Add e2e tests for pdf downloading and locale loading

client/package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "@metabase/embedding-sdk-react": "^0.54.11",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "wouter": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

client/src/App.jsx

@@ -4,16 +4,19 @@ import {
   MetabaseProvider,
   InteractiveQuestion,
   defineMetabaseAuthConfig,
-  defineMetabaseTheme,
+  defineMetabaseTheme, InteractiveDashboard,
 } from "@metabase/embedding-sdk-react";
+import { useMemo } from "react";
+import { Redirect, Route, Switch, useSearchParams } from "wouter"
 
 // 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 defaultDashboardId = 1;
 
 const theme = defineMetabaseTheme({
   // Specify a font to use from the set of fonts supported by Metabase.
@@ -63,10 +66,22 @@ const theme = defineMetabaseTheme({
 });
 
 function App() {
+  const [searchParams] = useSearchParams()
+
+  const { locale, questionId, dashboardId } = useMemo(() => ({
+    locale: searchParams.get('locale') ?? null,
+    questionId: parseInt(searchParams.get('questionId') || defaultQuestionId),
+    dashboardId: parseInt(searchParams.get('dashboardId') || defaultDashboardId),
+  }), [searchParams])
+
   return (
     <div className="App" style={{ width: "1200px", height: "800px" }}>
-      <MetabaseProvider authConfig={config} theme={theme}>
-        <InteractiveQuestion questionId={questionId} />
+      <MetabaseProvider authConfig={config} theme={theme} locale={locale}>
+        <Switch>
+            <Route path="/" component={() => <Redirect to="/interactive-question" />} />
+            <Route path="/interactive-question" component={() => <InteractiveQuestion questionId={questionId} />} />
+            <Route path="/interactive-dashboard" component={() => <InteractiveDashboard dashboardId={dashboardId} withDownloads />} />
+        </Switch>
       </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,69 @@ describe("Embedding SDK: metabase-nodejs-react-sdk-embedding-sample compatibilit
 
     expect(cy.findByTestId("visualization-root").should("exist"));
   });
+
+  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", {timeout: TIMEOUT_MS}).within(() => {
+        // Different icons for 54 and 55
+        cy.get('button svg.Icon-download, button svg.Icon-document').first().click({force: true});
+      });
+
+      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&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: "/interactive-question?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: "/interactive-question?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');
+    })
+  });
 });