Add e2e tests for locale loading

Author: sanex3339

client/src/App.jsx

@@ -6,14 +6,15 @@ import {
   defineMetabaseAuthConfig,
   defineMetabaseTheme,
 } from "@metabase/embedding-sdk-react";
+import { useMemo } from "react";
 
 // Configuration
 const config = defineMetabaseAuthConfig({
   metabaseInstanceUrl: import.meta.env.VITE_METABASE_INSTANCE_URL,
   authProviderUri: import.meta.env.VITE_AUTH_PROVIDER_URI,
 });
 
-const questionId = 24;
+const defaultQuestionId = 24;
 
 const theme = defineMetabaseTheme({
   // Specify a font to use from the set of fonts supported by Metabase.
@@ -63,10 +64,19 @@ const theme = defineMetabaseTheme({
 });
 
 function App() {
+  const { locale, questionId } = useMemo(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    return {
+      locale: searchParams.get('locale') ?? null,
+      questionId: parseInt(searchParams.get('questionId') || defaultQuestionId),
+    };
+  }, [])
+
   return (
     <div className="App" style={{ width: "1200px", height: "800px" }}>
-      <MetabaseProvider authConfig={config} theme={theme}>
-        <InteractiveQuestion questionId={questionId} />
+      <MetabaseProvider authConfig={config} theme={theme} locale={locale}>
+        <InteractiveQuestion questionId={questionId} withDownloads />
       </MetabaseProvider>
     </div>
   );

e2e/test/compatibility.cy.spec.js

@@ -1,4 +1,4 @@
-const TIMEOUT_MS = 20000;
+const TIMEOUT_MS = 40000;
 
 describe("Embedding SDK: metabase-nodejs-react-sdk-embedding-sample compatibility", () => {
   it("should open an Interactive Question", () => {
@@ -12,4 +12,53 @@ describe("Embedding SDK: metabase-nodejs-react-sdk-embedding-sample compatibilit
 
     expect(cy.findByTestId("visualization-root").should("exist"));
   });
+
+  it("should load a metabase locale", () => {
+    cy.visit({
+      url: "/?locale=es&questionId=1",
+    });
+
+    expect(cy.findByText('Tabla', {timeout: TIMEOUT_MS}).should("exist"));
+  });
+
+  it("should load a moment locale", () => {
+    const time = new Date('2025-01-01')
+    cy.clock(time, ['Date'])
+
+    cy.visit({
+      url: "/?locale=es&questionId=1",
+    });
+
+    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 relativas…|Rango de fechas relativo…)/).click();
+    })
+
+    cy.findByTestId('date-filter-picker').within(() => {
+
+      cy.findByText('dic. 2–31, 2024').should('exist');
+    })
+  });
+
+  it("should load a dayjs locale", () => {
+    const time = new Date('2025-01-01')
+    cy.clock(time, ['Date'])
+
+    cy.visit({
+      url: "/?locale=es&questionId=1",
+    });
+
+    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(() => {
+      cy.findByText('enero 2025').should('exist');
+    })
+  });
 });