From bdbf27459ded7accf3ea3831ce72cebca7236a41 Mon Sep 17 00:00:00 2001 From: sanex3339 Date: Mon, 26 May 2025 11:59:39 +0400 Subject: [PATCH] Add e2e tests for pdf downloading and locale loading --- client/package-lock.json | 32 ++++++++++++++- client/package.json | 3 +- client/src/App.jsx | 23 +++++++++-- e2e/test/compatibility.cy.spec.js | 67 ++++++++++++++++++++++++++++++- 4 files changed, 118 insertions(+), 7 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 06e29e4..7b2c8ef 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,7 +10,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", @@ -7799,6 +7800,12 @@ "node": "*" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "license": "MIT" + }, "node_modules/moment": { "version": "2.30.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", @@ -9093,6 +9100,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regexparam": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-3.0.0.tgz", + "integrity": "sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/rehype-external-links": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-2.1.0.tgz", @@ -11067,6 +11083,20 @@ "node": ">=0.10.0" } }, + "node_modules/wouter": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.7.0.tgz", + "integrity": "sha512-ElkqESy10WgRRbdd22uQkSSO6LmG6vxI50pxPKry2TLebbdXvgtp7rJ48KafjUvsKcQQmIewxgRCGixPfk58tw==", + "license": "Unlicense", + "dependencies": { + "mitt": "^3.0.1", + "regexparam": "^3.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", diff --git a/client/package.json b/client/package.json index eb09381..cf5a761 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/App.jsx b/client/src/App.jsx index cd6748a..86be579 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -4,8 +4,10 @@ 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({ @@ -13,7 +15,8 @@ const config = defineMetabaseAuthConfig({ 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 (
- - + + + } /> + } /> + } /> +
); diff --git a/e2e/test/compatibility.cy.spec.js b/e2e/test/compatibility.cy.spec.js index a782114..89af982 100644 --- a/e2e/test/compatibility.cy.spec.js +++ b/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'); + }) + }); });