Skip to content

Commit fa735dd

Browse files
sanex3339sanex3339
committed
Add locale tests
1 parent 133a646 commit fa735dd

File tree

6 files changed

+201
-114
lines changed

6 files changed

+201
-114
lines changed

‎e2e/support/cypress.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
import "@testing-library/cypress/add-commands";
2+
3+
Cypress.on("uncaught:exception", (err, runnable) => false);

‎e2e/test/compatibility.cy.spec.js‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const TIMEOUT_MS = 40000;
6969
});
7070
});
7171

72-
it.only("should download an Interactive Dashboard", () => {
72+
it("should download an Interactive Dashboard", () => {
7373
cy.visit({
7474
url: "/interactive-dashboard",
7575
});
@@ -83,5 +83,49 @@ const TIMEOUT_MS = 40000;
8383
cy.readFile('cypress/downloads/E-commerce Insights.pdf', {timeout: TIMEOUT_MS}).should('exist');
8484
});
8585
});
86+
87+
it("should load a metabase locale", () => {
88+
cy.visit({
89+
url: "/interactive-question?locale=es",
90+
});
91+
92+
expect(cy.findByText('Tabla', {timeout: TIMEOUT_MS}).should("exist"));
93+
});
94+
95+
it("should load a moment locale", () => {
96+
cy.visit({
97+
url: "/interactive-question?locale=es",
98+
});
99+
100+
cy.findByText('Filtro', {timeout: TIMEOUT_MS}).click();
101+
cy.get('[data-element-id="mantine-popover"]').within(() => {
102+
cy.findByText('Created At').click();
103+
cy.findByText('Rango de fechas relativo…').click();
104+
})
105+
106+
cy.findByTestId('date-filter-picker').within(() => {
107+
const monthName = new Intl.DateTimeFormat('es-ES', { month: 'short' }).format(new Date());
108+
109+
cy.findByText(new RegExp(monthName, 'i')).should('exist');
110+
})
111+
});
112+
113+
it("should load a dayjs locale", () => {
114+
cy.visit({
115+
url: "/interactive-question?locale=es",
116+
});
117+
118+
cy.findByText('Filtro', {timeout: TIMEOUT_MS}).click();
119+
cy.get('[data-element-id="mantine-popover"]').within(() => {
120+
cy.findByText('Created At').click();
121+
cy.findByText('Rango de fechas fijo…').click();
122+
})
123+
124+
cy.findByTestId('date-filter-picker').within(() => {
125+
const monthName = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(new Date());
126+
127+
cy.findByText(new RegExp(monthName, 'i')).should('exist');
128+
})
129+
});
86130
});
87131
});

‎next-sample-app-router/src/app/app-provider.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client";
2+
3+
import { useSearchParams } from 'next/navigation'
4+
import {
5+
MetabaseProvider,
6+
defineMetabaseAuthConfig,
7+
defineMetabaseTheme
8+
} from '@metabase/embedding-sdk-react/nextjs';
9+
import { PropsWithChildren } from 'react';
10+
11+
if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
12+
throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
13+
}
14+
15+
const authConfig = defineMetabaseAuthConfig({
16+
metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
17+
authProviderUri: `/api/metabase/auth`,
18+
});
19+
20+
const theme = defineMetabaseTheme({
21+
// Specify a font to use from the set of fonts supported by Metabase.
22+
// You can set the font to "Custom" to use the custom font
23+
// configured in your Metabase instance.
24+
fontFamily: "Lato",
25+
26+
// Override the base font size for every component.
27+
// This does not usually need to be set, as the components
28+
// inherit the font size from the parent container, such as the body.
29+
fontSize: "16px",
30+
31+
// Override the base line height for every component.
32+
lineHeight: 1.5,
33+
34+
// Match your application's color scheme
35+
colors: {
36+
brand: "#6b88bd",
37+
"text-primary": "#FFFFFF",
38+
"text-secondary": "#B0BEC5",
39+
"text-tertiary": "#78909C",
40+
background: "#181A1B",
41+
"background-hover": "#23272B",
42+
border: "#263238",
43+
filter: "#939393",
44+
summarize: "#5e749c",
45+
shadow: "rgba(0,0,0,0.6)",
46+
},
47+
48+
components: {
49+
question: {
50+
backgroundColor: "#23272B",
51+
},
52+
table: {
53+
cell: {
54+
textColor: "#FFFFFF",
55+
backgroundColor: "#181A1B",
56+
},
57+
},
58+
},
59+
});
60+
61+
export const AppProvider = ({children}: PropsWithChildren) => {
62+
const searchParams = useSearchParams()
63+
const locale = searchParams.get('locale') ?? undefined
64+
65+
return (
66+
<MetabaseProvider
67+
authConfig={authConfig}
68+
theme={theme}
69+
locale={locale}
70+
>
71+
{children}
72+
</MetabaseProvider>
73+
)
74+
}

‎next-sample-app-router/src/app/layout.tsx‎

Lines changed: 5 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
1-
import {
2-
defineMetabaseAuthConfig,
3-
MetabaseProvider,
4-
defineMetabaseTheme,
5-
} from "@metabase/embedding-sdk-react/nextjs";
61
import type { Metadata } from "next";
72

83
import localFont from "next/font/local";
94
import "./globals.css";
105
import Link from "next/link";
11-
12-
if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
13-
throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
14-
}
6+
import { AppProvider } from '@/app/app-provider';
7+
import { Suspense } from 'react';
158

169
const geistSans = localFont({
1710
src: "./fonts/GeistVF.woff",
@@ -29,52 +22,6 @@ export const metadata: Metadata = {
2922
description: "Generated by create next app",
3023
};
3124

32-
const authConfig = defineMetabaseAuthConfig({
33-
metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
34-
authProviderUri: `/api/metabase/auth`,
35-
});
36-
37-
const theme = defineMetabaseTheme({
38-
// Specify a font to use from the set of fonts supported by Metabase.
39-
// You can set the font to "Custom" to use the custom font
40-
// configured in your Metabase instance.
41-
fontFamily: "Lato",
42-
43-
// Override the base font size for every component.
44-
// This does not usually need to be set, as the components
45-
// inherit the font size from the parent container, such as the body.
46-
fontSize: "16px",
47-
48-
// Override the base line height for every component.
49-
lineHeight: 1.5,
50-
51-
// Match your application's color scheme
52-
colors: {
53-
brand: "#6b88bd",
54-
"text-primary": "#FFFFFF",
55-
"text-secondary": "#B0BEC5",
56-
"text-tertiary": "#78909C",
57-
background: "#181A1B",
58-
"background-hover": "#23272B",
59-
border: "#263238",
60-
filter: "#939393",
61-
summarize: "#5e749c",
62-
shadow: "rgba(0,0,0,0.6)",
63-
},
64-
65-
components: {
66-
question: {
67-
backgroundColor: "#23272B",
68-
},
69-
table: {
70-
cell: {
71-
textColor: "#FFFFFF",
72-
backgroundColor: "#181A1B",
73-
},
74-
},
75-
},
76-
});
77-
7825
export default function RootLayout({
7926
children,
8027
}: Readonly<{
@@ -95,7 +42,9 @@ export default function RootLayout({
9542
<Link href="/static-dashboard">Static Dashboard</Link>
9643
<Link href="/interactive-dashboard">Interactive Dashboard</Link>
9744
</nav>
98-
<MetabaseProvider authConfig={authConfig} theme={theme}>{children}</MetabaseProvider>
45+
<Suspense>
46+
<AppProvider>{children}</AppProvider>
47+
</Suspense>
9948
</body>
10049
</html>
10150
);

‎next-sample-pages-router/src/components/app-provider.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { useSearchParams } from 'next/navigation'
2+
import {
3+
MetabaseProvider,
4+
defineMetabaseAuthConfig,
5+
defineMetabaseTheme
6+
} from '@metabase/embedding-sdk-react/nextjs';
7+
import { PropsWithChildren } from 'react';
8+
9+
if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
10+
throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
11+
}
12+
13+
const authConfig = defineMetabaseAuthConfig({
14+
metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
15+
authProviderUri: `/api/metabase/auth`,
16+
});
17+
18+
const theme = defineMetabaseTheme({
19+
// Specify a font to use from the set of fonts supported by Metabase.
20+
// You can set the font to "Custom" to use the custom font
21+
// configured in your Metabase instance.
22+
fontFamily: "Lato",
23+
24+
// Override the base font size for every component.
25+
// This does not usually need to be set, as the components
26+
// inherit the font size from the parent container, such as the body.
27+
fontSize: "16px",
28+
29+
// Override the base line height for every component.
30+
lineHeight: 1.5,
31+
32+
// Match your application's color scheme
33+
colors: {
34+
brand: "#6b88bd",
35+
"text-primary": "#FFFFFF",
36+
"text-secondary": "#B0BEC5",
37+
"text-tertiary": "#78909C",
38+
background: "#181A1B",
39+
"background-hover": "#23272B",
40+
border: "#263238",
41+
filter: "#939393",
42+
summarize: "#5e749c",
43+
shadow: "rgba(0,0,0,0.6)",
44+
},
45+
46+
components: {
47+
question: {
48+
backgroundColor: "#23272B",
49+
},
50+
table: {
51+
cell: {
52+
textColor: "#FFFFFF",
53+
backgroundColor: "#181A1B",
54+
},
55+
},
56+
},
57+
});
58+
59+
export const AppProvider = ({children}: PropsWithChildren) => {
60+
const searchParams = useSearchParams()
61+
const locale = searchParams.get('locale') ?? undefined
62+
63+
return (
64+
<MetabaseProvider
65+
authConfig={authConfig}
66+
theme={theme}
67+
locale={locale}
68+
>
69+
{children}
70+
</MetabaseProvider>
71+
)
72+
}

‎next-sample-pages-router/src/pages/_app.tsx‎

Lines changed: 3 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,7 @@
11
import "@/styles/globals.css";
2-
import {
3-
defineMetabaseAuthConfig,
4-
MetabaseProvider,
5-
defineMetabaseTheme,
6-
} from "@metabase/embedding-sdk-react/nextjs";
72
import Link from "next/link";
83
import type { AppProps } from "next/app";
9-
10-
if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
11-
throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
12-
}
13-
14-
const authConfig = defineMetabaseAuthConfig({
15-
metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
16-
authProviderUri: `/api/metabase/auth`,
17-
});
18-
19-
const theme = defineMetabaseTheme({
20-
// Specify a font to use from the set of fonts supported by Metabase.
21-
// You can set the font to "Custom" to use the custom font
22-
// configured in your Metabase instance.
23-
fontFamily: "Lato",
24-
25-
// Override the base font size for every component.
26-
// This does not usually need to be set, as the components
27-
// inherit the font size from the parent container, such as the body.
28-
fontSize: "16px",
29-
30-
// Override the base line height for every component.
31-
lineHeight: 1.5,
32-
33-
// Match your application's color scheme
34-
colors: {
35-
brand: "#6b88bd",
36-
"text-primary": "#FFFFFF",
37-
"text-secondary": "#B0BEC5",
38-
"text-tertiary": "#78909C",
39-
background: "#181A1B",
40-
"background-hover": "#23272B",
41-
border: "#263238",
42-
filter: "#939393",
43-
summarize: "#5e749c",
44-
shadow: "rgba(0,0,0,0.6)",
45-
},
46-
47-
components: {
48-
question: {
49-
backgroundColor: "#23272B",
50-
},
51-
table: {
52-
cell: {
53-
textColor: "#FFFFFF",
54-
backgroundColor: "#181A1B",
55-
},
56-
},
57-
},
58-
});
4+
import { AppProvider } from '@/components/app-provider';
595

606
export default function App({ Component, pageProps }: AppProps) {
617
return (
@@ -69,9 +15,9 @@ export default function App({ Component, pageProps }: AppProps) {
6915
<Link href="/static-dashboard">Static Dashboard</Link>
7016
<Link href="/interactive-dashboard">Interactive Dashboard</Link>
7117
</nav>
72-
<MetabaseProvider authConfig={authConfig} theme={theme}>
18+
<AppProvider>
7319
<Component {...pageProps} />
74-
</MetabaseProvider>
20+
</AppProvider>
7521
</div>
7622
);
7723
}

0 commit comments

Comments
 (0)