Add locale checking tests

e2e/support/cypress.js

@@ -1 +1,3 @@
 import "@testing-library/cypress/add-commands";
+
+Cypress.on("uncaught:exception", (err, runnable) => false);

e2e/test/compatibility.cy.spec.js

@@ -69,19 +69,65 @@ const TIMEOUT_MS = 40000;
       });
     });
 
-    it.only("should download an Interactive Dashboard", () => {
+    it("should download an Interactive Dashboard", () => {
       cy.visit({
         url: "/interactive-dashboard",
       });
 
       expect(cy.findByTestId("embed-frame", {timeout: TIMEOUT_MS}).should("exist"));
       cy.findByTestId("embed-frame", {timeout: TIMEOUT_MS}).within(() => {
         cy.findByTestId("fixed-width-dashboard-header").within(() => {
+          // Different icons for 54 and 55
           cy.get('button svg.Icon-download, button svg.Icon-document').first().click();
         });
 
         cy.readFile('cypress/downloads/E-commerce Insights.pdf', {timeout: TIMEOUT_MS}).should('exist');
       });
     });
+
+    it("should load a metabase locale", () => {
+      cy.visit({
+        url: "/interactive-question?locale=es",
+      });
+
+      expect(cy.findByText('Tabla', {timeout: TIMEOUT_MS}).should("exist"));
+    });
+
+    it("should load a moment locale", () => {
+      cy.visit({
+        url: "/interactive-question?locale=es",
+      });
+
+      cy.findByText('Filtro', {timeout: TIMEOUT_MS}).click();
+      cy.get('[data-element-id="mantine-popover"]').within(() => {
+        cy.findByText('Created At').click();
+        cy.findByText(/(Fechas específicas…|Rango de fechas fijo…)/).click();
+      })
+
+      cy.findByTestId('date-filter-picker').within(() => {
+        const monthName = new Intl.DateTimeFormat('es-ES', { month: 'short' }).format(new Date());
+
+        cy.findByText(new RegExp(monthName, 'i')).should('exist');
+      })
+    });
+
+    it("should load a dayjs locale", () => {
+      cy.visit({
+        url: "/interactive-question?locale=es",
+      });
+
+      cy.findByText('Filtro', {timeout: TIMEOUT_MS}).click();
+      cy.get('[data-element-id="mantine-popover"]').within(() => {
+        cy.findByText('Created At').click();
+        // Different texts for 54 and 55
+        cy.findByText(/(Fechas específicas…|Rango de fechas fijo…)/).click();
+      })
+
+      cy.findByTestId('date-filter-picker').within(() => {
+        const monthName = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(new Date());
+
+        cy.findByText(new RegExp(monthName, 'i')).should('exist');
+      })
+    });
   });
 });

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { useSearchParams } from 'next/navigation'
+import {
+  MetabaseProvider,
+  defineMetabaseAuthConfig,
+  defineMetabaseTheme
+} from '@metabase/embedding-sdk-react/nextjs';
+import { PropsWithChildren } from 'react';
+
+if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
+  throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
+}
+
+const authConfig = defineMetabaseAuthConfig({
+  metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
+  authProviderUri: `/api/metabase/auth`,
+});
+
+const theme = defineMetabaseTheme({
+  // Specify a font to use from the set of fonts supported by Metabase.
+  // You can set the font to "Custom" to use the custom font
+  // configured in your Metabase instance.
+  fontFamily: "Lato",
+
+  // Override the base font size for every component.
+  // This does not usually need to be set, as the components
+  // inherit the font size from the parent container, such as the body.
+  fontSize: "16px",
+
+  // Override the base line height for every component.
+  lineHeight: 1.5,
+
+  // Match your application's color scheme
+  colors: {
+    brand: "#6b88bd",
+    "text-primary": "#FFFFFF",
+    "text-secondary": "#B0BEC5",
+    "text-tertiary": "#78909C",
+    background: "#181A1B",
+    "background-hover": "#23272B",
+    border: "#263238",
+    filter: "#939393",
+    summarize: "#5e749c",
+    shadow: "rgba(0,0,0,0.6)",
+  },
+
+  components: {
+    question: {
+      backgroundColor: "#23272B",
+    },
+    table: {
+      cell: {
+        textColor: "#FFFFFF",
+        backgroundColor: "#181A1B",
+      },
+    },
+  },
+});
+
+export const AppProvider = ({children}: PropsWithChildren) => {
+  const searchParams = useSearchParams()
+  const locale = searchParams.get('locale') ?? undefined
+
+  return (
+    <MetabaseProvider
+      authConfig={authConfig}
+      theme={theme}
+      locale={locale}
+    >
+      {children}
+    </MetabaseProvider>
+  )
+}

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

@@ -1,17 +1,10 @@
-import {
-  defineMetabaseAuthConfig,
-  MetabaseProvider,
-  defineMetabaseTheme,
-} from "@metabase/embedding-sdk-react/nextjs";
 import type { Metadata } from "next";
 
 import localFont from "next/font/local";
 import "./globals.css";
 import Link from "next/link";
-
-if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
-  throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
-}
+import { AppProvider } from '@/app/app-provider';
+import { Suspense } from 'react';
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -29,52 +22,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-const authConfig = defineMetabaseAuthConfig({
-  metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
-  authProviderUri: `/api/metabase/auth`,
-});
-
-const theme = defineMetabaseTheme({
-  // Specify a font to use from the set of fonts supported by Metabase.
-  // You can set the font to "Custom" to use the custom font
-  // configured in your Metabase instance.
-  fontFamily: "Lato",
-
-  // Override the base font size for every component.
-  // This does not usually need to be set, as the components
-  // inherit the font size from the parent container, such as the body.
-  fontSize: "16px",
-
-  // Override the base line height for every component.
-  lineHeight: 1.5,
-
-  // Match your application's color scheme
-  colors: {
-    brand: "#6b88bd",
-    "text-primary": "#FFFFFF",
-    "text-secondary": "#B0BEC5",
-    "text-tertiary": "#78909C",
-    background: "#181A1B",
-    "background-hover": "#23272B",
-    border: "#263238",
-    filter: "#939393",
-    summarize: "#5e749c",
-    shadow: "rgba(0,0,0,0.6)",
-  },
-
-  components: {
-    question: {
-      backgroundColor: "#23272B",
-    },
-    table: {
-      cell: {
-        textColor: "#FFFFFF",
-        backgroundColor: "#181A1B",
-      },
-    },
-  },
-});
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -95,7 +42,9 @@ export default function RootLayout({
           <Link href="/static-dashboard">Static Dashboard</Link>
           <Link href="/interactive-dashboard">Interactive Dashboard</Link>
         </nav>
-        <MetabaseProvider authConfig={authConfig} theme={theme}>{children}</MetabaseProvider>
+        <Suspense>
+          <AppProvider>{children}</AppProvider>
+        </Suspense>
       </body>
     </html>
   );

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

@@ -0,0 +1,72 @@
+import { useSearchParams } from 'next/navigation'
+import {
+  MetabaseProvider,
+  defineMetabaseAuthConfig,
+  defineMetabaseTheme
+} from '@metabase/embedding-sdk-react/nextjs';
+import { PropsWithChildren } from 'react';
+
+if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
+  throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
+}
+
+const authConfig = defineMetabaseAuthConfig({
+  metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
+  authProviderUri: `/api/metabase/auth`,
+});
+
+const theme = defineMetabaseTheme({
+  // Specify a font to use from the set of fonts supported by Metabase.
+  // You can set the font to "Custom" to use the custom font
+  // configured in your Metabase instance.
+  fontFamily: "Lato",
+
+  // Override the base font size for every component.
+  // This does not usually need to be set, as the components
+  // inherit the font size from the parent container, such as the body.
+  fontSize: "16px",
+
+  // Override the base line height for every component.
+  lineHeight: 1.5,
+
+  // Match your application's color scheme
+  colors: {
+    brand: "#6b88bd",
+    "text-primary": "#FFFFFF",
+    "text-secondary": "#B0BEC5",
+    "text-tertiary": "#78909C",
+    background: "#181A1B",
+    "background-hover": "#23272B",
+    border: "#263238",
+    filter: "#939393",
+    summarize: "#5e749c",
+    shadow: "rgba(0,0,0,0.6)",
+  },
+
+  components: {
+    question: {
+      backgroundColor: "#23272B",
+    },
+    table: {
+      cell: {
+        textColor: "#FFFFFF",
+        backgroundColor: "#181A1B",
+      },
+    },
+  },
+});
+
+export const AppProvider = ({children}: PropsWithChildren) => {
+  const searchParams = useSearchParams()
+  const locale = searchParams.get('locale') ?? undefined
+
+  return (
+    <MetabaseProvider
+      authConfig={authConfig}
+      theme={theme}
+      locale={locale}
+    >
+      {children}
+    </MetabaseProvider>
+  )
+}

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

@@ -1,61 +1,7 @@
 import "@/styles/globals.css";
-import {
-  defineMetabaseAuthConfig,
-  MetabaseProvider,
-  defineMetabaseTheme,
-} from "@metabase/embedding-sdk-react/nextjs";
 import Link from "next/link";
 import type { AppProps } from "next/app";
-
-if (!process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL) {
-  throw new Error("Missing NEXT_PUBLIC_METABASE_INSTANCE_URL");
-}
-
-const authConfig = defineMetabaseAuthConfig({
-  metabaseInstanceUrl: process.env.NEXT_PUBLIC_METABASE_INSTANCE_URL,
-  authProviderUri: `/api/metabase/auth`,
-});
-
-const theme = defineMetabaseTheme({
-  // Specify a font to use from the set of fonts supported by Metabase.
-  // You can set the font to "Custom" to use the custom font
-  // configured in your Metabase instance.
-  fontFamily: "Lato",
-
-  // Override the base font size for every component.
-  // This does not usually need to be set, as the components
-  // inherit the font size from the parent container, such as the body.
-  fontSize: "16px",
-
-  // Override the base line height for every component.
-  lineHeight: 1.5,
-
-  // Match your application's color scheme
-  colors: {
-    brand: "#6b88bd",
-    "text-primary": "#FFFFFF",
-    "text-secondary": "#B0BEC5",
-    "text-tertiary": "#78909C",
-    background: "#181A1B",
-    "background-hover": "#23272B",
-    border: "#263238",
-    filter: "#939393",
-    summarize: "#5e749c",
-    shadow: "rgba(0,0,0,0.6)",
-  },
-
-  components: {
-    question: {
-      backgroundColor: "#23272B",
-    },
-    table: {
-      cell: {
-        textColor: "#FFFFFF",
-        backgroundColor: "#181A1B",
-      },
-    },
-  },
-});
+import { AppProvider } from '@/components/app-provider';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -69,9 +15,9 @@ export default function App({ Component, pageProps }: AppProps) {
         <Link href="/static-dashboard">Static Dashboard</Link>
         <Link href="/interactive-dashboard">Interactive Dashboard</Link>
       </nav>
-      <MetabaseProvider authConfig={authConfig} theme={theme}>
+      <AppProvider>
         <Component {...pageProps} />
-      </MetabaseProvider>
+      </AppProvider>
     </div>
   );
 }