diff --git a/web/package-lock.json b/web/package-lock.json index eb64a537a..6282900ff 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -30,11 +30,11 @@ "@radix-ui/react-tooltip": "^1.2.6", "@supabase/ssr": "^0.6.1", "@supabase/supabase-js": "^2.49.4", - "@tanstack/query-sync-storage-persister": "^5.76.0", + "@tanstack/query-sync-storage-persister": "^5.76.1", "@tanstack/react-form": "^1.11.1", - "@tanstack/react-query": "^5.76.0", - "@tanstack/react-query-devtools": "^5.76.0", - "@tanstack/react-query-persist-client": "^5.76.0", + "@tanstack/react-query": "^5.76.1", + "@tanstack/react-query-devtools": "^5.76.1", + "@tanstack/react-query-persist-client": "^5.76.1", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.8", "@types/jest": "^29.5.14", @@ -53,7 +53,7 @@ "dom-to-image": "^2.6.0", "email-validator": "^2.0.4", "font-color-contrast": "^11.1.0", - "framer-motion": "^12.11.0", + "framer-motion": "^12.11.3", "intersection-observer": "^0.12.2", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -68,7 +68,7 @@ "next-themes": "^0.4.6", "papaparse": "^5.5.2", "pluralize": "^8.0.0", - "posthog-js": "^1.240.6", + "posthog-js": "^1.242.1", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "react": "^18", @@ -76,14 +76,14 @@ "react-colorful": "^5.6.1", "react-day-picker": "8.10.1", "react-dom": "^18", - "react-hotkeys-hook": "^5.0.1", + "react-hotkeys-hook": "^5.1.0", "react-markdown": "^10.1.0", "react-syntax-highlighter": "^15.6.1", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.1", "sonner": "^2.0.3", "tailwind-merge": "^3.3.0", - "ts-jest": "^29.3.2", + "ts-jest": "^29.3.3", "use-context-selector": "^2.0.0", "utility-types": "^3.11.0", "valibot": "^1.1.0", @@ -6835,9 +6835,9 @@ } }, "node_modules/@tanstack/query-persist-client-core": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.76.0.tgz", - "integrity": "sha512-xcTZjILf4q49Nsl6wcnhBYZ4O0gpnuNwV6vPIEWIrwTuSNWz2zd/g9bc8SxnXy7xCV8SM1H0IJn8KjLQIUb2ag==", + "version": "5.76.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.76.1.tgz", + "integrity": "sha512-BkNL5QMXLwTMv5po6Ex68/xWCWdnjxx2rWeRf/we6hCI5dCN5Yf+GCbsJcSuc27I2paQJ1xFbfYs18Zmc1kJmA==", "license": "MIT", "dependencies": { "@tanstack/query-core": "5.76.0" @@ -6848,13 +6848,13 @@ } }, "node_modules/@tanstack/query-sync-storage-persister": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.76.0.tgz", - "integrity": "sha512-N8d8voY61XkM+jfXTySduLrevD6wRM3pwQ1kG0syLiWWx/sX2+CpaTMSPr0GggjQuhmjhUPo83LaV+e449tizA==", + "version": "5.76.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.76.1.tgz", + "integrity": "sha512-SFGP+MdZ8UDhIuD0rRI+QOVPIQF9rRJL0RzdGqGSB1i1BwhD/Gxgnyk1oMEUKQDGEWYKHjLWRVDNioGW0kSwkw==", "license": "MIT", "dependencies": { "@tanstack/query-core": "5.76.0", - "@tanstack/query-persist-client-core": "5.76.0" + "@tanstack/query-persist-client-core": "5.76.1" }, "funding": { "type": "github", @@ -6909,9 +6909,9 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.76.0.tgz", - "integrity": "sha512-dZLYzVuUFZJkenxd8o01oyFimeLBmSkaUviPHuDzXe7LSLO4WTTx92jwJlNUXOOHzg6t0XknklZ15cjhYNSDjA==", + "version": "5.76.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.76.1.tgz", + "integrity": "sha512-YxdLZVGN4QkT5YT1HKZQWiIlcgauIXEIsMOTSjvyD5wLYK8YVvKZUPAysMqossFJJfDpJW3pFn7WNZuPOqq+fw==", "license": "MIT", "dependencies": { "@tanstack/query-core": "5.76.0" @@ -6925,9 +6925,9 @@ } }, "node_modules/@tanstack/react-query-devtools": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.76.0.tgz", - "integrity": "sha512-RoyRzH5XJB//OhAdzQTutesw9uHyNZroLp/I7NDAQf8OVJKTTcoaYBmaw5pmB2e3bVdgqFu6nHFZUr5j5qBdZw==", + "version": "5.76.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.76.1.tgz", + "integrity": "sha512-LFVWgk/VtXPkerNLfYIeuGHh0Aim/k9PFGA+JxLdRaUiroQ4j4eoEqBrUpQ1Pd/KXoG4AB9vVE/M6PUQ9vwxBQ==", "license": "MIT", "dependencies": { "@tanstack/query-devtools": "5.76.0" @@ -6937,24 +6937,24 @@ "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^5.76.0", + "@tanstack/react-query": "^5.76.1", "react": "^18 || ^19" } }, "node_modules/@tanstack/react-query-persist-client": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.76.0.tgz", - "integrity": "sha512-QPKgkHX1yC1Ec21FTQHBTbQcHYI+6157DgsmxABp94H7/ZUJ3szZ7wdpdBPQyZ9VxBXlKRN+aNZkOPC90+r/uA==", + "version": "5.76.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.76.1.tgz", + "integrity": "sha512-LN8LLBDyQLTBifbL3HIAOPh48MNw2y5ff49nBUsJO6nwpl3iRKp6qwQ58rGUqHflvuAfKQKeJIvwSXMvckxJMg==", "license": "MIT", "dependencies": { - "@tanstack/query-persist-client-core": "5.76.0" + "@tanstack/query-persist-client-core": "5.76.1" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^5.76.0", + "@tanstack/react-query": "^5.76.1", "react": "^18 || ^19" } }, @@ -12332,12 +12332,12 @@ } }, "node_modules/framer-motion": { - "version": "12.11.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.11.0.tgz", - "integrity": "sha512-BaBPmkhaC2l0n619Kt1nQaxSdUdyyz5V1Z7EKJ1CcraOTZitgVx0RTbL8lmg2XesaFi6o8MPBIhkWDIvzDpGaQ==", + "version": "12.11.3", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.11.3.tgz", + "integrity": "sha512-ksUtDFBZtrbQFt4bEMFrFgo7camhmXcLeuylKQxEYSd9czkZ4tZmFROxWczWeu51WqC2m91ifpvgGCBLd0uviQ==", "license": "MIT", "dependencies": { - "motion-dom": "^12.11.0", + "motion-dom": "^12.11.2", "motion-utils": "^12.9.4", "tslib": "^2.4.0" }, @@ -16916,9 +16916,9 @@ } }, "node_modules/motion-dom": { - "version": "12.11.0", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.11.0.tgz", - "integrity": "sha512-CItkGYJenn5ZsbzTX0D9mE0UWdjdd9r535FrxEXhzR8Kwa9I2dLr1uhEJgQPWbgaIJ6i0sNFnf2T9NvVDWQVBw==", + "version": "12.11.2", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.11.2.tgz", + "integrity": "sha512-wZ396XNNTI9GOkyrr80wFSbZc1JbIHSHTbLdririSbkEgahWWKmsHzsxyxqBBvuBU/iaQWVu1YCjdpXYNfo2yQ==", "license": "MIT", "dependencies": { "motion-utils": "^12.9.4" @@ -18148,9 +18148,9 @@ "license": "MIT" }, "node_modules/posthog-js": { - "version": "1.240.6", - "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.240.6.tgz", - "integrity": "sha512-Pz5r/LrMchGf9jCVnTXJrbyMhKriZRGLSZ5qt8c8QrPkmG2JOnFHNWmmBlu+iqmzbY3+oROrhwyP4IgQl2z34w==", + "version": "1.242.1", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.242.1.tgz", + "integrity": "sha512-j2mzw0eukyuw/Qm3tNZ6pfaXmc7eglWj6ftmvR1Lz9GtMr85ndGNXJvIGO+6PBrQW2o0D1G0k/KV93ehta0hFA==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "core-js": "^3.38.1", @@ -18699,9 +18699,9 @@ } }, "node_modules/react-hotkeys-hook": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.0.1.tgz", - "integrity": "sha512-TysTwXrUSj6QclMZIEoxCfvy/6EsoZcrfE970aUVa9fO3c3vcms+IVjv3ljbhUPM/oY1iEoun7O2W8v8INl5hw==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.1.0.tgz", + "integrity": "sha512-GCNGXjBzV9buOS3REoQFmSmE4WTvBhYQ0YrAeeMZI83bhXg3dRWsLHXDutcVDdEjwJqJCxk5iewWYX5LtFUd7g==", "license": "MIT", "workspaces": [ "packages/*" @@ -19766,9 +19766,9 @@ "license": "MIT" }, "node_modules/semver": { - "version": "7.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", - "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz", + "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==", "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -21033,9 +21033,9 @@ } }, "node_modules/ts-jest": { - "version": "29.3.2", - "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.3.2.tgz", - "integrity": "sha512-bJJkrWc6PjFVz5g2DGCNUo8z7oFEYaz1xP1NpeDU7KNLMWPpEyV8Chbpkn8xjzgRDpQhnGMyvyldoL7h8JXyug==", + "version": "29.3.3", + "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.3.3.tgz", + "integrity": "sha512-y6jLm19SL4GroiBmHwFK4dSHUfDNmOrJbRfp6QmDIlI9p5tT5Q8ItccB4pTIslCIqOZuQnBwpTR0bQ5eUMYwkw==", "license": "MIT", "dependencies": { "bs-logger": "^0.2.6", @@ -21045,8 +21045,8 @@ "json5": "^2.2.3", "lodash.memoize": "^4.1.2", "make-error": "^1.3.6", - "semver": "^7.7.1", - "type-fest": "^4.39.1", + "semver": "^7.7.2", + "type-fest": "^4.41.0", "yargs-parser": "^21.1.1" }, "bin": { @@ -21082,9 +21082,9 @@ } }, "node_modules/ts-jest/node_modules/type-fest": { - "version": "4.39.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.39.1.tgz", - "integrity": "sha512-uW9qzd66uyHYxwyVBYiwS4Oi0qZyUqwjU+Oevr6ZogYiXt99EOYtwvzMSLw1c3lYo2HzJsep/NB23iEVEgjG/w==", + "version": "4.41.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz", + "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==", "license": "(MIT OR CC0-1.0)", "engines": { "node": ">=16" diff --git a/web/package.json b/web/package.json index 870af9f7c..f2f6cc919 100644 --- a/web/package.json +++ b/web/package.json @@ -42,11 +42,11 @@ "@radix-ui/react-tooltip": "^1.2.6", "@supabase/ssr": "^0.6.1", "@supabase/supabase-js": "^2.49.4", - "@tanstack/query-sync-storage-persister": "^5.76.0", + "@tanstack/query-sync-storage-persister": "^5.76.1", "@tanstack/react-form": "^1.11.1", - "@tanstack/react-query": "^5.76.0", - "@tanstack/react-query-devtools": "^5.76.0", - "@tanstack/react-query-persist-client": "^5.76.0", + "@tanstack/react-query": "^5.76.1", + "@tanstack/react-query-devtools": "^5.76.1", + "@tanstack/react-query-persist-client": "^5.76.1", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.8", "@types/jest": "^29.5.14", @@ -65,7 +65,7 @@ "dom-to-image": "^2.6.0", "email-validator": "^2.0.4", "font-color-contrast": "^11.1.0", - "framer-motion": "^12.11.0", + "framer-motion": "^12.11.3", "intersection-observer": "^0.12.2", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -80,7 +80,7 @@ "next-themes": "^0.4.6", "papaparse": "^5.5.2", "pluralize": "^8.0.0", - "posthog-js": "^1.240.6", + "posthog-js": "^1.242.1", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "react": "^18", @@ -88,14 +88,14 @@ "react-colorful": "^5.6.1", "react-day-picker": "8.10.1", "react-dom": "^18", - "react-hotkeys-hook": "^5.0.1", + "react-hotkeys-hook": "^5.1.0", "react-markdown": "^10.1.0", "react-syntax-highlighter": "^15.6.1", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.1", "sonner": "^2.0.3", "tailwind-merge": "^3.3.0", - "ts-jest": "^29.3.2", + "ts-jest": "^29.3.3", "use-context-selector": "^2.0.0", "utility-types": "^3.11.0", "valibot": "^1.1.0", diff --git a/web/playwright-tests/bar-chart-add-to.test.ts b/web/playwright-tests/bar-chart-add-to.test.ts deleted file mode 100644 index e49d8a8f2..000000000 --- a/web/playwright-tests/bar-chart-add-to.test.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('Can add to collection', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('add-to-collection-button').click(); - await expect(page.getByRole('checkbox')).toHaveAttribute('data-state', 'unchecked'); - await page.getByRole('checkbox').click(); - await expect(page.getByRole('checkbox')).toBeVisible(); - await expect(page.getByRole('checkbox')).toHaveAttribute('data-state', 'checked'); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.reload(); - await page.getByTestId('add-to-collection-button').click(); - await expect(page.getByRole('checkbox')).toHaveAttribute('data-state', 'checked'); - await page.getByRole('checkbox').click(); - await expect(page.getByRole('checkbox')).toHaveAttribute('data-state', 'unchecked'); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); -}); - -test('Can navigate to collections page', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('add-to-collection-button').click(); - const currentUrl = page.url(); - await page - .getByRole('menuitemcheckbox', { name: 'Important Things' }) - .getByRole('button') - .click(); - await page.goto('http://localhost:3000/app/collections/0ac43ae2-beda-4007-9574-71a17425da0a'); - expect(page.url()).not.toBe(currentUrl); -}); - -test.skip('Add to dashboard', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('save-to-dashboard-button').click(); - await page.getByText('Important Metrics').click(); - await expect( - page.getByRole('menuitemcheckbox', { name: 'Important Metrics' }).getByRole('checkbox') - ).toBeVisible(); - - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.reload(); - - await page.getByTestId('save-to-dashboard-button').click(); - await page - .getByRole('menuitemcheckbox', { name: 'Important Metrics' }) - .getByRole('button') - .click(); - await expect(page.getByRole('button', { name: 'Yearly Sales Revenue -' })).toBeVisible(); - await page - .locator( - 'div:nth-child(4) > .buster-resize-columns > .react-split > .react-split__pane > div > div:nth-child(2) > .bg-background > div' - ) - .first() - .click(); - await expect(page.getByRole('button', { name: 'Start chat' })).toBeVisible(); - await page.getByTestId('save-to-dashboard-button').click(); - await page - .getByRole('menuitemcheckbox', { name: 'Important Metrics' }) - .getByRole('checkbox') - .click(); - await page.getByRole('button', { name: 'Submit' }).click(); - await expect(page.getByTestId('share-button')).toBeVisible(); - await expect(page.getByTestId('three-dot-menu-button')).toBeVisible(); - await expect(page.getByRole('button', { name: 'Start chat' })).toBeVisible(); -}); diff --git a/web/playwright-tests/bar-chart-navigation.spec.ts b/web/playwright-tests/bar-chart-navigation.spec.ts deleted file mode 100644 index 71d724010..000000000 --- a/web/playwright-tests/bar-chart-navigation.spec.ts +++ /dev/null @@ -1,132 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('Can click close icon in edit chart mode', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page - .locator('div') - .filter({ hasText: /^Edit chart$/ }) - .getByRole('button') - .click(); - expect(page.url()).toBe( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart' - ); - await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).not.toBeVisible(); - - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).toBeVisible(); -}); - -test('Can click start chat', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByRole('button', { name: 'Start chat' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - await expect( - page.getByText('Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) has been') - ).toBeVisible(); - - await page.getByTestId('collapse-file-button').click(); - await expect(page.getByTestId('collapse-file-button')).not.toBeVisible({ timeout: 7000 }); - - await page.getByTestId('chat-response-message-file').click(); - await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.getByText('Edit chart')).toBeVisible(); - - //CAN DELETE THE CHAT NOW - await page - .locator('div') - .filter({ hasText: /^Edit chart$/ }) - .getByRole('button') - .click(); - await page.getByTestId('chat-header-options-button').click(); - await page.getByRole('menuitem', { name: 'Delete chat' }).click(); - await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible(); - await page.getByRole('button', { name: 'Submit' }).click(); - await page.waitForTimeout(500); - - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - await page.waitForTimeout(400); - - await expect(page).toHaveURL('http://localhost:3000/app/chats', { timeout: 30000 }); -}); - -test('Can add and remove from favorites', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('three-dot-menu-button').click(); - await page.getByRole('menuitem', { name: 'Add to favorites' }).click(); - await page.waitForTimeout(1000); - await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeVisible(); - await page.getByTestId('three-dot-menu-button').click(); - await page.getByRole('menuitem', { name: 'Remove from favorites' }).click(); - await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeHidden(); -}); - -test('Can open sql editor', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await expect(page.getByTestId('segmented-trigger-sql')).toBeVisible(); - await page.getByTestId('segmented-trigger-sql').click(); - await page.waitForTimeout(55); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - await expect(page.getByRole('button', { name: 'Run' })).toBeVisible(); - await expect(page.getByTestId('segmented-trigger-sql')).toHaveAttribute('data-state', 'active'); -}); - -test('Bar chart span clicking works', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.waitForTimeout(55); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.waitForTimeout(55); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.waitForTimeout(55); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.waitForTimeout(55); - await page.getByTestId('segmented-trigger-sql').click(); - await page.waitForTimeout(55); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - await page.getByTestId('segmented-trigger-sql').click(); - await page.waitForTimeout(55); - await expect(page.getByText('Copy SQLSaveRun')).toBeVisible(); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - - await expect(page.getByRole('textbox', { name: 'New chart' })).toBeVisible(); - await expect(page.getByRole('textbox', { name: 'New chart' })).toHaveValue( - 'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)' - ); - - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.getByText('Edit chart')).toBeVisible({ timeout: 15000 }); -}); - -test('Can navigate to bar chart from favorites', async ({ page }) => { - await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('three-dot-menu-button').click(); - await expect(page.getByText('Add to favorites')).toBeVisible(); - await page.getByRole('menuitem', { name: 'Add to favorites' }).click(); - await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeVisible(); - await page.getByRole('link', { name: 'Home' }).click(); - await page.reload(); - await page.waitForTimeout(55); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - await page.getByRole('link', { name: 'Yearly Sales Revenue -' }).click(); - await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); - await page.getByRole('link', { name: 'Yearly Sales Revenue -' }).getByRole('button').click(); - await page.waitForTimeout(55); - await page.waitForLoadState('networkidle'); -}); diff --git a/web/playwright-tests/bar-chart-styling-updates.spec.ts b/web/playwright-tests/bar-chart-styling-updates.spec.ts deleted file mode 100644 index 195f852fd..000000000 --- a/web/playwright-tests/bar-chart-styling-updates.spec.ts +++ /dev/null @@ -1,395 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('Can load a bar chart and remove axis', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page.getByRole('link', { name: 'Metrics', exact: true }).click(); - - await page - .getByRole('link', { - name: 'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)' - }) - .click(); - - await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - - //can remove x axis from bar chart - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.locator('.relative > button').first().click(); - await expect(page.getByText('No valid axis selected')).toBeVisible(); - - //can drag a numeric column to x axis - - const sourceElement = page - .getByTestId('select-axis-available-items-list') - .getByRole('button') - .first(); - expect(sourceElement).toBeVisible(); - - const targetElement = page - .getByTestId('select-axis-drop-zone-xAxis') - .locator('div') - .filter({ hasText: /^Drag column here$/ }); - expect(targetElement).toBeVisible(); - - const sourceBoundingBox = await sourceElement.boundingBox(); - const targetBoundingBox = await targetElement.boundingBox(); - - if (sourceBoundingBox && targetBoundingBox) { - // Start at the center of the source element - await page.mouse.move( - sourceBoundingBox.x + sourceBoundingBox.width / 2, - sourceBoundingBox.y + sourceBoundingBox.height / 2 - ); - await page.mouse.down(); - - // Move to target in small increments - const steps = 30; - const dx = (targetBoundingBox.x - sourceBoundingBox.x) / steps; - const dy = (targetBoundingBox.y - sourceBoundingBox.y) / steps; - - for (let i = 0; i <= steps; i++) { - await page.mouse.move( - sourceBoundingBox.x + dx * i + sourceBoundingBox.width / 2, - sourceBoundingBox.y + dy * i + sourceBoundingBox.height / 2, - { steps: 1 } - ); - await page.waitForTimeout(1); // Add a small delay between each movement - } - - await page.mouse.up(); - } - - await expect( - page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button', { name: 'Year' }) - ).toBeVisible(); - - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(2).click(); - await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible(); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect(page.getByRole('button', { name: 'Reset' })).not.toBeVisible(); -}); - -test('Can add a tooltip to a bar chart', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - - const sourceElement = page - .getByTestId('select-axis-available-items-list') - .getByRole('button') - .first(); - const targetElement = page - .getByTestId('select-axis-drop-zone-tooltip') - .locator('div') - .filter({ hasText: /^Drag column here$/ }); - - const sourceBoundingBox = await sourceElement.boundingBox(); - const targetBoundingBox = await targetElement.boundingBox(); - - if (sourceBoundingBox && targetBoundingBox) { - // Start at the center of the source element - await page.mouse.move( - sourceBoundingBox.x + sourceBoundingBox.width / 2, - sourceBoundingBox.y + sourceBoundingBox.height / 2 - ); - await page.mouse.down(); - - // Move to target in small increments - const steps = 30; - const dx = (targetBoundingBox.x - sourceBoundingBox.x) / steps; - const dy = (targetBoundingBox.y - sourceBoundingBox.y) / steps; - - for (let i = 0; i <= steps; i++) { - await page.mouse.move( - sourceBoundingBox.x + dx * i + sourceBoundingBox.width / 2, - sourceBoundingBox.y + dy * i + sourceBoundingBox.height / 2, - { steps: 1 } - ); - await page.waitForTimeout(1); // Add a small delay between each movement - } - - await page.mouse.up(); - } - - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - page.reload(); - - await page - .getByTestId('metric-view-chart-content') - .getByRole('img') - .hover({ - position: { - x: 633, - y: 43 - } - }); - - page.reload(); - - await expect( - page.getByTestId('select-axis-drop-zone-tooltip').getByRole('button', { name: 'Year' }) - ).toBeVisible(); - await page.getByTestId('select-axis-drop-zone-tooltip').getByRole('button').nth(2).click(); - await expect( - page.getByTestId('select-axis-drop-zone-tooltip').getByText('Drag column here') - ).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); -}); - -test('Can toggle legend', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Show legend$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - - await page - .locator('div') - .filter({ hasText: /^Show legend$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - await page - .locator('div') - .filter({ hasText: /^Data labels$/ }) - .getByRole('switch') - .click(); - await page - .locator('div') - .filter({ hasText: /^Data labels$/ }) - .getByRole('switch') - .click(); - await page - .locator('div') - .filter({ hasText: /^Grid lines$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page - .locator('div') - .filter({ hasText: /^Grid lines$/ }) - .getByRole('switch') - .click(); - await page - .locator('div') - .filter({ hasText: /^Hide y-axis$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page - .locator('div') - .filter({ hasText: /^Hide y-axis$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); -}); - -test('Can toggle sorting', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page.getByTestId('segmented-trigger-asc').click(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - - img - - text: Unsaved changes - - button "Reset" - - button "Save" - `); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - - await page.getByTestId('segmented-trigger-desc').click(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - - img - - text: Unsaved changes - - button "Reset" - - button "Save" - `); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - - await page.getByTestId('segmented-trigger-none').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); -}); - -test('Can toggle legend headline', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: 'Total' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - - await page.reload(); - - await page.getByTestId('segmented-trigger-Styling').click(); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: 'None' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ - - img - `); -}); - -test('Can add a goal line', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - - await page.waitForTimeout(150); - await page.getByRole('button', { name: 'Add goal line' }).click(); - - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ - - img - `); - await page - .getByRole('main') - .filter({ hasText: 'Jan 1, 2022 - May 2, 2025•' }) - .getByRole('button') - .nth(2) - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ - - img - `); -}); - -test('Can add a trendline', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page.getByRole('button', { name: 'Add trend line' }).click(); - await page.getByRole('combobox').filter({ hasText: 'Linear' }).click(); - await page.getByRole('option', { name: 'Max' }).click(); - await page.getByRole('combobox').filter({ hasText: 'Max' }).click(); - await page.getByRole('option', { name: 'Median' }).click(); - await page.getByRole('combobox').filter({ hasText: 'Median' }).click(); - await page.getByRole('option', { name: 'Average' }).click(); - await page.getByRole('combobox').filter({ hasText: 'Average' }).click(); - await page.getByRole('option', { name: 'Linear' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(90); - await page.waitForLoadState('networkidle'); - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - page.reload(); - - await page.getByTestId('segmented-trigger-Styling').click(); - await page.waitForTimeout(50); - await expect(page.getByTestId('trendline-Linear').locator('div').nth(1)).toBeVisible(); - await page.getByText('Styling').click(); - await page.getByTestId('trendline-Linear').locator('div').nth(1).hover(); - await page.getByTestId('delete-button').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); -}); - -test('Can change colors', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Colors').click(); - await page - .locator('div') - .filter({ hasText: /^Forest Lake$/ }) - .first() - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ - - img - `); - - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page - .locator('div') - .filter({ hasText: /^Buster$/ }) - .first() - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); -}); diff --git a/web/playwright-tests/bar-chart-updates.test.ts b/web/playwright-tests/bar-chart-updates.test.ts new file mode 100644 index 000000000..93e693a29 --- /dev/null +++ b/web/playwright-tests/bar-chart-updates.test.ts @@ -0,0 +1,1002 @@ +import { test, expect } from '@playwright/test'; + +test.describe.serial('Bar chart - add to tests', () => { + test('Can add to collection', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/2b569e92-229b-5cad-b312-b09c751c544d/chart'); + await page.getByTestId('add-to-collection-button').click(); + await page.waitForLoadState('networkidle'); + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toBeVisible(); + + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toHaveAttribute('data-state', 'unchecked'); + await page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + .click(); + await page.waitForLoadState('networkidle'); + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toBeVisible(); + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toHaveAttribute('data-state', 'checked'); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.reload(); + await page.getByTestId('add-to-collection-button').click(); + await page.waitForLoadState('networkidle'); + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toHaveAttribute('data-state', 'checked'); + await page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + .click(); + await page.waitForLoadState('networkidle'); + await expect( + page + .getByTestId('dropdown-checkbox-0ac43ae2-beda-4007-9574-71a17425da0a') + .getByRole('checkbox') + ).toHaveAttribute('data-state', 'unchecked'); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + }); + + test('Can navigate to collections page', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/2b569e92-229b-5cad-b312-b09c751c544d/chart'); + await page.getByTestId('add-to-collection-button').click(); + const currentUrl = page.url(); + await page + .getByRole('menuitemcheckbox', { name: 'Important Things' }) + .getByRole('button') + .click(); + await page.goto('http://localhost:3000/app/collections/0ac43ae2-beda-4007-9574-71a17425da0a'); + expect(page.url()).not.toBe(currentUrl); + }); + + test.skip('Add to dashboard', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/2b569e92-229b-5cad-b312-b09c751c544d/chart'); + await page.getByTestId('save-to-dashboard-button').click(); + await page.getByText('Important Metrics').click(); + await expect( + page.getByRole('menuitemcheckbox', { name: 'Important Metrics' }).getByRole('checkbox') + ).toBeVisible(); + + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.reload(); + + await page.getByTestId('save-to-dashboard-button').click(); + await page + .getByRole('menuitemcheckbox', { name: 'Important Metrics' }) + .getByRole('button') + .click(); + await expect(page.getByRole('button', { name: 'Yearly Sales Revenue -' })).toBeVisible(); + await page + .locator( + 'div:nth-child(4) > .buster-resize-columns > .react-split > .react-split__pane > div > div:nth-child(2) > .bg-background > div' + ) + .first() + .click(); + await expect(page.getByRole('button', { name: 'Start chat' })).toBeVisible(); + await page.getByTestId('save-to-dashboard-button').click(); + await page + .getByRole('menuitemcheckbox', { name: 'Important Metrics' }) + .getByRole('checkbox') + .click(); + await page.getByRole('button', { name: 'Submit' }).click(); + await expect(page.getByTestId('share-button')).toBeVisible(); + await expect(page.getByTestId('three-dot-menu-button')).toBeVisible(); + await expect(page.getByRole('button', { name: 'Start chat' })).toBeVisible(); + }); +}); + +test.describe.serial('Bar chart navigation', () => { + test('Can click close icon in edit chart mode', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page + .locator('div') + .filter({ hasText: /^Edit chart$/ }) + .getByRole('button') + .click(); + expect(page.url()).toBe( + 'http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart' + ); + await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).not.toBeVisible(); + + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).toBeVisible(); + }); + + test('Can click start chat', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart'); + await page.getByRole('button', { name: 'Start chat' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + await expect(page.getByRole('textbox', { name: 'New chart' })).toBeVisible(); + await page.getByRole('textbox', { name: 'New chart' }).dblclick(); + await page.getByRole('textbox', { name: 'New chart' }).press('ControlOrMeta+c'); + + await expect( + page.getByText( + 'Top 10 Products by Revenue (Q2 2023 - Q1 2024) has been pulled into a new chat.' + ) + ).toBeVisible(); + + await page.getByTestId('collapse-file-button').click(); + await expect(page.getByTestId('collapse-file-button')).not.toBeVisible({ timeout: 7000 }); + + await page.getByTestId('chat-response-message-file').click(); + await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await expect(page.getByText('Edit chart')).toBeVisible(); + + //CAN DELETE THE CHAT NOW + await page + .locator('div') + .filter({ hasText: /^Edit chart$/ }) + .getByRole('button') + .click(); + await page.getByTestId('chat-header-options-button').click(); + await page.getByRole('menuitem', { name: 'Delete chat' }).click(); + await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible(); + await page.getByRole('button', { name: 'Submit' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + + await expect(page).toHaveURL('http://localhost:3000/app/chats', { timeout: 30000 }); + }); + + test('Can add and remove from favorites', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart'); + await page.getByTestId('three-dot-menu-button').click(); + await page.getByRole('menuitem', { name: 'Add to favorites' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + + await expect(page.getByRole('link', { name: 'Top 10 Products' })).toBeVisible(); + + await page.getByTestId('three-dot-menu-button').click(); + await page.getByRole('menuitem', { name: 'Remove from favorites' }).click(); + await expect(page.getByRole('link', { name: 'Top 10 Products' })).toBeHidden(); + }); + + test('Can open sql editor', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart'); + await expect(page.getByTestId('segmented-trigger-sql')).toBeVisible(); + await page.getByTestId('segmented-trigger-sql').click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + await expect(page.getByRole('button', { name: 'Run' })).toBeVisible(); + await expect(page.getByTestId('segmented-trigger-sql')).toHaveAttribute('data-state', 'active'); + }); + + test('Bar chart span clicking works', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart'); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForTimeout(250); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForTimeout(250); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForTimeout(250); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForTimeout(250); + await page.getByTestId('segmented-trigger-sql').click(); + await page.waitForTimeout(250); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + await page.getByTestId('segmented-trigger-sql').click(); + await page.waitForTimeout(250); + await expect(page.getByText('Copy SQLSaveRun')).toBeVisible(); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + + await expect(page.getByRole('textbox', { name: 'New chart' })).toBeVisible(); + + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await expect(page.getByText('Edit chart')).toBeVisible({ timeout: 15000 }); + }); + + test('Can navigate to bar chart from favorites', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/9c94612e-348e-591c-bc80-fd24d556dcf7/chart'); + await page.getByTestId('three-dot-menu-button').click(); + await expect(page.getByText('Add to favorites')).toBeVisible(); + await page.getByRole('menuitem', { name: 'Add to favorites' }).click(); + await expect(page.getByRole('link', { name: 'Top 10 Products' })).toBeVisible(); + await page.getByRole('link', { name: 'Home' }).click(); + await page.reload(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + await page.getByRole('link', { name: 'Top 10 Products' }).click(); + await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); + await page.getByRole('link', { name: 'Top 10 Products' }).getByRole('button').click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + }); +}); + +test.describe.serial('Bar chart styling updates', () => { + test('Can load a bar chart and remove axis', async ({ page }) => { + await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee'); + + await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + + //can remove x axis from bar chart + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.locator('.relative > button').first().click(); + await expect(page.getByText('No valid axis selected')).toBeVisible(); + + //can drag a numeric column to x axis + + const sourceElement = page + .getByTestId('select-axis-available-items-list') + .getByRole('button') + .first(); + expect(sourceElement).toBeVisible(); + + const targetElement = page + .getByTestId('select-axis-drop-zone-xAxis') + .locator('div') + .filter({ hasText: /^Drag column here$/ }); + expect(targetElement).toBeVisible(); + + const sourceBoundingBox = await sourceElement.boundingBox(); + const targetBoundingBox = await targetElement.boundingBox(); + + if (sourceBoundingBox && targetBoundingBox) { + // Start at the center of the source element + await page.mouse.move( + sourceBoundingBox.x + sourceBoundingBox.width / 2, + sourceBoundingBox.y + sourceBoundingBox.height / 2 + ); + await page.mouse.down(); + + // Move to target in small increments + const steps = 30; + const dx = (targetBoundingBox.x - sourceBoundingBox.x) / steps; + const dy = (targetBoundingBox.y - sourceBoundingBox.y) / steps; + + for (let i = 0; i <= steps; i++) { + await page.mouse.move( + sourceBoundingBox.x + dx * i + sourceBoundingBox.width / 2, + sourceBoundingBox.y + dy * i + sourceBoundingBox.height / 2, + { steps: 1 } + ); + await page.waitForTimeout(1); // Add a small delay between each movement + } + + await page.mouse.up(); + } + + await expect( + page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button', { name: 'Year' }) + ).toBeVisible(); + + await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(2).click(); + await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible(); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect(page.getByRole('button', { name: 'Reset' })).not.toBeVisible(); + }); + + test('Can add a tooltip to a bar chart', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + + const sourceElement = page + .getByTestId('select-axis-available-items-list') + .getByRole('button') + .first(); + const targetElement = page + .getByTestId('select-axis-drop-zone-tooltip') + .locator('div') + .filter({ hasText: /^Drag column here$/ }); + + const sourceBoundingBox = await sourceElement.boundingBox(); + const targetBoundingBox = await targetElement.boundingBox(); + + if (sourceBoundingBox && targetBoundingBox) { + // Start at the center of the source element + await page.mouse.move( + sourceBoundingBox.x + sourceBoundingBox.width / 2, + sourceBoundingBox.y + sourceBoundingBox.height / 2 + ); + await page.mouse.down(); + + // Move to target in small increments + const steps = 30; + const dx = (targetBoundingBox.x - sourceBoundingBox.x) / steps; + const dy = (targetBoundingBox.y - sourceBoundingBox.y) / steps; + + for (let i = 0; i <= steps; i++) { + await page.mouse.move( + sourceBoundingBox.x + dx * i + sourceBoundingBox.width / 2, + sourceBoundingBox.y + dy * i + sourceBoundingBox.height / 2, + { steps: 1 } + ); + await page.waitForTimeout(1); // Add a small delay between each movement + } + + await page.mouse.up(); + } + + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + page.reload(); + + await page + .getByTestId('metric-view-chart-content') + .getByRole('img') + .hover({ + position: { + x: 633, + y: 43 + } + }); + + page.reload(); + + await expect( + page.getByTestId('select-axis-drop-zone-tooltip').getByRole('button', { name: 'Year' }) + ).toBeVisible(); + await page.getByTestId('select-axis-drop-zone-tooltip').getByRole('button').nth(2).click(); + await expect( + page.getByTestId('select-axis-drop-zone-tooltip').getByText('Drag column here') + ).toBeVisible(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + }); + + test('Can toggle legend', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page + .locator('div') + .filter({ hasText: /^Show legend$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + + await page + .locator('div') + .filter({ hasText: /^Show legend$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + await page + .locator('div') + .filter({ hasText: /^Data labels$/ }) + .getByRole('switch') + .click(); + await page + .locator('div') + .filter({ hasText: /^Data labels$/ }) + .getByRole('switch') + .click(); + await page + .locator('div') + .filter({ hasText: /^Grid lines$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + await page + .locator('div') + .filter({ hasText: /^Grid lines$/ }) + .getByRole('switch') + .click(); + await page + .locator('div') + .filter({ hasText: /^Hide y-axis$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + await page + .locator('div') + .filter({ hasText: /^Hide y-axis$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + }); + + test('Can toggle sorting', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page.getByTestId('segmented-trigger-asc').click(); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + - img + - text: Unsaved changes + - button "Reset" + - button "Save" + `); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + + await page.getByTestId('segmented-trigger-desc').click(); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + - img + - text: Unsaved changes + - button "Reset" + - button "Save" + `); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + + await page.getByTestId('segmented-trigger-none').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + }); + + test('Can toggle legend headline', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + + await page.getByRole('combobox').click(); + await page.getByRole('option', { name: 'Total' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + + await page.reload(); + + await page.getByTestId('segmented-trigger-Styling').click(); + await page.getByRole('combobox').click(); + await page.getByRole('option', { name: 'None' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ + - img + `); + }); + + test('Can add a goal line', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + + await page.waitForTimeout(150); + await page.getByRole('button', { name: 'Add goal line' }).click(); + + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ + - img + `); + await page + .getByRole('main') + .filter({ hasText: 'Jan 1, 2022 - May 2, 2025•' }) + .getByRole('button') + .nth(2) + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ + - img + `); + }); + + test('Can add a trendline', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page.getByRole('button', { name: 'Add trend line' }).click(); + await page.getByRole('combobox').filter({ hasText: 'Linear' }).click(); + await page.getByRole('option', { name: 'Max' }).click(); + await page.getByRole('combobox').filter({ hasText: 'Max' }).click(); + await page.getByRole('option', { name: 'Median' }).click(); + await page.getByRole('combobox').filter({ hasText: 'Median' }).click(); + await page.getByRole('option', { name: 'Average' }).click(); + await page.getByRole('combobox').filter({ hasText: 'Average' }).click(); + await page.getByRole('option', { name: 'Linear' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(90); + await page.waitForLoadState('networkidle'); + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + page.reload(); + + await page.getByTestId('segmented-trigger-Styling').click(); + await page.waitForTimeout(50); + await expect(page.getByTestId('trendline-Linear').locator('div').nth(1)).toBeVisible(); + await page.getByText('Styling').click(); + await page.getByTestId('trendline-Linear').locator('div').nth(1).hover(); + await page.getByTestId('delete-button').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + }); + + test('Can change colors', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Colors').click(); + await page + .locator('div') + .filter({ hasText: /^Forest Lake$/ }) + .first() + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\? Total Sales Revenue/ + - img + `); + + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page + .locator('div') + .filter({ hasText: /^Buster$/ }) + .first() + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + }); +}); + +test.describe.serial('Bar chart - x axis updates', () => { + test('X axis config - Title', async ({ page }) => { + await page.goto('http://localhost:3000/app/home'); + await page.getByRole('link', { name: 'Metrics', exact: true }).click(); + + await page + .getByRole('link', { + name: 'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)' + }) + .click(); + + await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + + //#1 TEST WE CAN EDIT THE TITLE + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: 'Year' }).click(); + await page.getByRole('textbox', { name: 'Year' }).fill('WOOHOO!'); + await expect(page.getByTestId('select-axis-drop-zone-xAxis')).toContainText('WOOHOO!'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await expect(page.getByTestId('select-axis-drop-zone-xAxis')).toContainText('WOOHOO!'); + await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: 'WOOHOO!' }).click(); + await page.getByRole('textbox', { name: 'WOOHOO!' }).fill('Year'); + await page.waitForTimeout(100); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForTimeout(100); + await page.reload(); + await expect(page.getByTestId('select-axis-drop-zone-xAxis')).not.toContainText('WOOHOO!'); + }); + + test('X axis config - We can edit the prefix', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45848c7f-0d28-52a0-914e-f3fc1b7d4180/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: '$' }).click(); + await page.getByRole('textbox', { name: '$' }).fill('SWAG'); + + await expect(page.getByRole('textbox', { name: '$' })).toHaveValue('SWAG'); + + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.getByRole('textbox', { name: 'dollars' }).click(); + await page.getByRole('textbox', { name: 'dollars' }).fill('SWAG2'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await expect(page.getByRole('textbox', { name: '$' })).toHaveValue('SWAG'); + await expect(page.getByRole('textbox', { name: 'dollars' })).toHaveValue('SWAG2'); + + await page.reload(); + + await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: '$' }).click(); + await page.getByRole('textbox', { name: '$' }).fill(''); + await page.getByRole('textbox', { name: 'dollars' }).click(); + await page.getByRole('textbox', { name: 'dollars' }).fill(''); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(150); + await page.waitForLoadState('networkidle'); + }); +}); + +test.describe.serial('Bar chart - y axis updates', () => { + test('Y axis config - Title', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: 'Total Sales Revenue' }).click(); + await page.getByRole('textbox', { name: 'Total Sales Revenue' }).press('ControlOrMeta+a'); + await page.getByRole('textbox', { name: 'Total Sales Revenue' }).fill('THIS IS A TEST!'); + await expect(page.getByRole('button', { name: 'THIS IS A TEST!' })).toBeVisible(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + expect(page.getByRole('textbox', { name: 'THIS IS A TEST!' })).toBeVisible(); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: 'THIS IS A TEST!' }).click(); + await page.getByRole('textbox', { name: 'THIS IS A TEST!' }).fill('Total Sales Revenue'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await expect(page.getByRole('textbox', { name: 'Total Sales Revenue' })).toBeVisible(); + }); + + test('Y axis config - Label style', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByTestId('segmented-trigger-percent').click(); + await expect(page.getByText('Unsaved changes')).toBeVisible(); + await page.waitForTimeout(100); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + + await page.reload(); + + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + expect(page.getByTestId('segmented-trigger-percent')).toHaveAttribute('data-state', 'active'); + + await page.getByTestId('segmented-trigger-number').click(); + + await expect(page.getByText('Unsaved changes')).toBeVisible(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + }); + + test('Y axis config - Label seperator style', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByTestId('edit-separator-input').getByRole('combobox').click(); + expect(page.getByRole('option', { name: '100000' })).toBeVisible(); + await page.getByRole('option', { name: '100000' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForLoadState('networkidle'); + await page.getByTestId('edit-separator-input').getByRole('combobox').click(); + await page.getByRole('option', { name: '100,000' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + expect(page.getByText('100,000')).toBeVisible(); + }); + + test('Y axis config - adjust bar roundness', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('slider').click(); + await page + .locator('div') + .filter({ hasText: /^Bar roundness$/ }) + .getByRole('spinbutton') + .fill('25'); + await page.getByRole('textbox', { name: 'Total Sales Revenue' }).click(); + await page + .locator('div') + .filter({ hasText: /^TitleBar roundnessShow data labels$/ }) + .getByRole('spinbutton') + .click(); + await page + .locator('div') + .filter({ hasText: /^TitleBar roundnessShow data labels$/ }) + .getByRole('spinbutton') + .fill('26'); + await page + .locator('div') + .filter({ hasText: /^TitleBar roundnessShow data labels$/ }) + .getByRole('spinbutton') + .press('Enter'); + await expect( + page + .locator('div') + .filter({ hasText: /^Bar roundness$/ }) + .getByRole('spinbutton') + ).toBeVisible(); + await expect(page.getByRole('button', { name: 'Save' })).toBeVisible(); + + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + + await page + .locator('div') + .filter({ hasText: /^Bar roundness$/ }) + .getByRole('spinbutton') + .click(); + await page + .locator('div') + .filter({ hasText: /^Bar roundness$/ }) + .getByRole('spinbutton') + .fill('8'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + // + }); + + test('Y axis config - show data labels', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('switch').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + await page + .locator('div') + .filter({ hasText: /^Show label as %$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + await page + .locator('div') + .filter({ hasText: /^Show label as %$/ }) + .getByRole('switch') + .click(); + await page + .locator('div') + .filter({ hasText: /^Show data labels$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + }); + + test('Y axis config - global settings', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' + ); + await page + .locator('div') + .filter({ hasText: /^Y-Axis$/ }) + .getByRole('button') + .click(); + await page + .locator('div') + .filter({ hasText: /^Show axis title$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + + await page.reload(); + + await page + .locator('div') + .filter({ hasText: /^Y-Axis$/ }) + .getByRole('button') + .click(); + await page + .locator('div') + .filter({ hasText: /^Show axis title$/ }) + .getByRole('switch') + .click(); + + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + + await page.reload(); + + await page + .locator('div') + .filter({ hasText: /^Y-Axis$/ }) + .getByRole('button') + .click(); + await page + .locator('div') + .filter({ hasText: /^Show axis label$/ }) + .getByRole('switch') + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + + await page.reload(); + + await page + .locator('div') + .filter({ hasText: /^Y-Axis$/ }) + .getByRole('button') + .click(); + await page + .locator('div') + .filter({ hasText: /^Show axis label$/ }) + .getByRole('switch') + .click(); + await page.getByRole('combobox').click(); + await page.getByRole('option', { name: 'Logarithmic' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await expect(page.locator('body')).toMatchAriaSnapshot(` + - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) + - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ + - img + `); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page + .locator('div') + .filter({ hasText: /^Y-Axis$/ }) + .getByRole('button') + .click(); + await page.getByRole('combobox').filter({ hasText: 'Logarithmic' }).click(); + await page.getByRole('option', { name: 'Linear' }).click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + }); +}); diff --git a/web/playwright-tests/bar-chart-x-axis-updates.spec.ts b/web/playwright-tests/bar-chart-x-axis-updates.spec.ts deleted file mode 100644 index 2fc1197ad..000000000 --- a/web/playwright-tests/bar-chart-x-axis-updates.spec.ts +++ /dev/null @@ -1,187 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('X axis config - Title', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page.getByRole('link', { name: 'Metrics', exact: true }).click(); - - await page - .getByRole('link', { - name: 'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)' - }) - .click(); - - await expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - - //#1 TEST WE CAN EDIT THE TITLE - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: 'Year' }).click(); - await page.getByRole('textbox', { name: 'Year' }).fill('WOOHOO!'); - await expect(page.getByTestId('select-axis-drop-zone-xAxis')).toContainText('WOOHOO!'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await expect(page.getByTestId('select-axis-drop-zone-xAxis')).toContainText('WOOHOO!'); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: 'WOOHOO!' }).click(); - await page.getByRole('textbox', { name: 'WOOHOO!' }).fill('Year'); - await page.waitForTimeout(100); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await page.waitForTimeout(100); - await page.reload(); - await expect(page.getByTestId('select-axis-drop-zone-xAxis')).not.toContainText('WOOHOO!'); -}); - -test('X axis config - we can edit the label style', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByTestId('segmented-trigger-percent').click(); - await expect(page.getByText('Unsaved changes')).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByTestId('segmented-trigger-number').click(); - await expect(page.getByText('Unsaved changes')).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - expect(page.getByTestId('segmented-trigger-number')).toHaveAttribute('data-state', 'active'); -}); - -test('X axis config - We can edit the label separator style', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: '100,000' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page.waitForTimeout(20); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: '100000' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); -}); - -test('X axis config - We can edit the decimal places', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('spinbutton').first().click(); - await page.getByRole('spinbutton').first().fill('2'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - expect(page.getByRole('spinbutton').first()).toHaveValue('2'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page.getByRole('spinbutton').first().click(); - await page.getByRole('spinbutton').first().fill('0'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); -}); - -test('X axis config - We can edit the multiply by places', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByPlaceholder('1').click(); - await page.getByPlaceholder('1').fill('10'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - expect(page.getByPlaceholder('1')).toHaveValue('10'); - await page.getByPlaceholder('1').click(); - await page.getByPlaceholder('1').fill('1'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); -}); - -test('X axis config - We can edit the prefix', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: '$' }).click(); - await page.getByRole('textbox', { name: '$' }).fill('SWAG'); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - - img - - text: Unsaved changes - - button "Reset" - - button "Save" - `); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await page.getByRole('textbox', { name: 'dollars' }).click(); - await page.getByRole('textbox', { name: 'dollars' }).fill('SWAG2'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - - await page.reload(); - - await page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: '$' }).click(); - await page.getByRole('textbox', { name: '$' }).fill(''); - await page.getByRole('textbox', { name: 'dollars' }).click(); - await page.getByRole('textbox', { name: 'dollars' }).fill(''); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); -}); diff --git a/web/playwright-tests/bar-chart-y-axis-updates.spec.ts b/web/playwright-tests/bar-chart-y-axis-updates.spec.ts deleted file mode 100644 index f3589ec48..000000000 --- a/web/playwright-tests/bar-chart-y-axis-updates.spec.ts +++ /dev/null @@ -1,287 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('Y axis config - Title', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: 'Total Sales Revenue' }).click(); - await page.getByRole('textbox', { name: 'Total Sales Revenue' }).press('ControlOrMeta+a'); - await page.getByRole('textbox', { name: 'Total Sales Revenue' }).fill('THIS IS A TEST!'); - await expect(page.getByRole('button', { name: 'THIS IS A TEST!' })).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - expect(page.getByRole('textbox', { name: 'THIS IS A TEST!' })).toBeVisible(); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: 'THIS IS A TEST!' }).click(); - await page.getByRole('textbox', { name: 'THIS IS A TEST!' }).fill('Total Sales Revenue'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await expect(page.getByRole('textbox', { name: 'Total Sales Revenue' })).toBeVisible(); -}); - -test('Y axis config - Label style', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByTestId('segmented-trigger-percent').click(); - await expect(page.getByText('Unsaved changes')).toBeVisible(); - await page.waitForTimeout(250); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - - await page.reload(); - - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - expect(page.getByTestId('segmented-trigger-percent')).toHaveAttribute('data-state', 'active'); - - await page.getByTestId('segmented-trigger-number').click(); - - await expect(page.getByText('Unsaved changes')).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); -}); - -test('Y axis config - Label seperator style', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByTestId('edit-separator-input').getByRole('combobox').click(); - expect(page.getByRole('option', { name: '100000' })).toBeVisible(); - await page.getByRole('option', { name: '100000' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForLoadState('networkidle'); - await page.getByTestId('edit-separator-input').getByRole('combobox').click(); - await page.getByRole('option', { name: '100,000' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - expect(page.getByText('100,000')).toBeVisible(); -}); - -test('Y axis config - adjust bar roundness', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('slider').click(); - await page - .locator('div') - .filter({ hasText: /^Bar roundness$/ }) - .getByRole('spinbutton') - .fill('25'); - await expect( - page - .locator('div') - .filter({ hasText: /^Bar roundness$/ }) - .getByRole('spinbutton') - ).toBeVisible(); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - - img - - text: Unsaved changes - - button "Reset" - - button "Save" - `); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - - await page - .locator('div') - .filter({ hasText: /^Bar roundness$/ }) - .getByRole('spinbutton') - .click(); - await page - .locator('div') - .filter({ hasText: /^Bar roundness$/ }) - .getByRole('spinbutton') - .fill('8'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - // -}); - -test('Y axis config - show data labels', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('switch').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page - .locator('div') - .filter({ hasText: /^Show label as %$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page - .locator('div') - .filter({ hasText: /^Show label as %$/ }) - .getByRole('switch') - .click(); - await page - .locator('div') - .filter({ hasText: /^Show data labels$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); -}); - -test('Y axis config - global settings', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart?secondary_view=chart-edit' - ); - await page - .locator('div') - .filter({ hasText: /^Y-Axis$/ }) - .getByRole('button') - .click(); - await page - .locator('div') - .filter({ hasText: /^Show axis title$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - - await page.reload(); - - await page - .locator('div') - .filter({ hasText: /^Y-Axis$/ }) - .getByRole('button') - .click(); - await page - .locator('div') - .filter({ hasText: /^Show axis title$/ }) - .getByRole('switch') - .click(); - - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - - await page.reload(); - - await page - .locator('div') - .filter({ hasText: /^Y-Axis$/ }) - .getByRole('button') - .click(); - await page - .locator('div') - .filter({ hasText: /^Show axis label$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - - await page.reload(); - - await page - .locator('div') - .filter({ hasText: /^Y-Axis$/ }) - .getByRole('button') - .click(); - await page - .locator('div') - .filter({ hasText: /^Show axis label$/ }) - .getByRole('switch') - .click(); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: 'Logarithmic' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); - - await expect(page.locator('body')).toMatchAriaSnapshot(` - - textbox "New chart": Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD) - - text: /Jan 1, \\d+ - May 2, \\d+ • What is the total yearly sales revenue for products supplied by Signature Cycles from \\d+ to present\\?/ - - img - `); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page - .locator('div') - .filter({ hasText: /^Y-Axis$/ }) - .getByRole('button') - .click(); - await page.getByRole('combobox').filter({ hasText: 'Logarithmic' }).click(); - await page.getByRole('option', { name: 'Linear' }).click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(250); - await page.waitForLoadState('networkidle'); -}); diff --git a/web/playwright-tests/chats-list.test.ts b/web/playwright-tests/chats-list.test.ts index e5067bebf..efefbc9fb 100644 --- a/web/playwright-tests/chats-list.test.ts +++ b/web/playwright-tests/chats-list.test.ts @@ -5,42 +5,44 @@ const chatsRoute = createBusterRoute({ route: BusterRoutes.APP_CHAT }); -test('Can navigate to a chat from the chat history list', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page.getByRole('link', { name: 'Chat history' }).click(); - await expect(page.getByText('Chat history')).toBeVisible(); +test.describe.serial('Chats list', () => { + test('Can navigate to a chat from the chat history list', async ({ page }) => { + await page.goto('http://localhost:3000/app/home'); + await page.getByRole('link', { name: 'Chat history' }).click(); + await expect(page.getByText('Chat history')).toBeVisible(); - await page.locator('.list-container').getByRole('link').first().click(); + await page.locator('.list-container').getByRole('link').first().click(); - await page.waitForURL((url) => url.toString() !== chatsRoute); - expect(page.url()).not.toEqual(chatsRoute); -}); - -test('Complex click through for a chat', async ({ page }) => { - await page.goto('http://localhost:3000/app/chats'); - await page.getByRole('link', { name: 'Total Products Sold To Date' }).click(); - await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); - await page.getByRole('link', { name: 'Chat history' }).click(); - await page.getByRole('link', { name: 'Top Customer Identification' }).click(); - await page.goto('http://localhost:3000/app/chats/0ba71c06-f86d-4a2d-973c-3870e8a5372e'); - await page.getByRole('textbox', { name: 'Ask Buster a question...' }).click(); - await page.getByRole('link', { name: 'Chat history' }).click(); - await page.getByRole('link', { name: 'Most Active Vendor Last 3' }).click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - await page.getByTestId('collapse-file-button').click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).not.toBeVisible({ - timeout: 1000 + await page.waitForURL((url) => url.toString() !== chatsRoute); + expect(page.url()).not.toEqual(chatsRoute); + }); + + test('Complex click through for a chat', async ({ page }) => { + await page.goto('http://localhost:3000/app/chats'); + await page.getByRole('link', { name: 'Total Products Sold To Date' }).click(); + await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); + await page.getByRole('link', { name: 'Chat history' }).click(); + await page.getByRole('link', { name: 'Top Customer Identification' }).click(); + await page.goto('http://localhost:3000/app/chats/0ba71c06-f86d-4a2d-973c-3870e8a5372e'); + await page.getByRole('textbox', { name: 'Ask Buster a question...' }).click(); + await page.getByRole('link', { name: 'Chat history' }).click(); + await page.getByRole('link', { name: 'Most Active Vendor Last 3' }).click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + await page.getByTestId('collapse-file-button').click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).not.toBeVisible({ + timeout: 1000 + }); + await page.getByTestId('chat-response-message-file').click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + await expect(page.getByText('Edit chart')).toBeVisible(); + await page + .locator('div') + .filter({ hasText: /^Edit chart$/ }) + .getByRole('button') + .click(); + await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); + await expect(page.getByText('Edit chart')).not.toBeVisible(); }); - await page.getByTestId('chat-response-message-file').click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - await expect(page.getByText('Edit chart')).toBeVisible(); - await page - .locator('div') - .filter({ hasText: /^Edit chart$/ }) - .getByRole('button') - .click(); - await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); - await expect(page.getByText('Edit chart')).not.toBeVisible(); }); diff --git a/web/playwright-tests/collection-tests.test.ts b/web/playwright-tests/collection-tests.test.ts index ce62d0cc7..d086a7e3a 100644 --- a/web/playwright-tests/collection-tests.test.ts +++ b/web/playwright-tests/collection-tests.test.ts @@ -1,78 +1,80 @@ import { test, expect } from '@playwright/test'; -test('Can create a collection', async ({ page }) => { - await page.goto('http://localhost:3000/app/collections'); - await page.getByRole('button', { name: 'New Collection' }).click(); - await page.getByRole('textbox', { name: 'Collection title' }).click(); - await page.getByRole('textbox', { name: 'Collection title' }).fill('My cool test'); - await page.getByRole('button', { name: 'Create collection' }).click(); +test.describe.serial('collection tests', () => { + test('Can create a collection', async ({ page }) => { + await page.goto('http://localhost:3000/app/collections'); + await page.getByRole('button', { name: 'New Collection' }).click(); + await page.getByRole('textbox', { name: 'Collection title' }).click(); + await page.getByRole('textbox', { name: 'Collection title' }).fill('My cool test'); + await page.getByRole('button', { name: 'Create collection' }).click(); - await expect( - page.getByRole('main').getByRole('button', { name: 'Add to collection' }) - ).toBeVisible(); - await page.getByRole('button').filter({ hasText: /^$/ }).nth(2).click(); - await page.getByRole('menuitem', { name: 'Rename collection' }).click(); - await page.getByRole('textbox', { name: 'Enter collection name' }).fill('Nate rulez!'); - await page.getByRole('button', { name: 'Rename' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await page.reload(); - await expect(page.getByRole('link', { name: 'Nate rulez!' })).toBeVisible(); - await page.getByRole('button').filter({ hasText: /^$/ }).nth(2).click(); - await page.getByRole('menuitem', { name: 'Delete collection' }).click(); - await page.getByRole('button', { name: 'Submit' }).click(); - await page.waitForTimeout(1000); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await page.waitForLoadState('load'); - expect(page.url()).toBe('http://localhost:3000/app/collections'); -}); - -test('Can add a metric to a collection', async ({ page }) => { - await page.goto('http://localhost:3000/app/collections'); - await page.getByRole('link', { name: 'Important Things' }).click(); - await page.getByRole('button', { name: 'Add to collection' }).click(); - await page.waitForTimeout(550); - - await page.getByText('Yearly Sales Revenue -').click(); - - await page.getByRole('button', { name: 'Add assets' }).click(); - await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Quarterly Revenue Report (' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Quarterly Revenue Growth Rate' })).toBeVisible(); - await page.getByRole('button', { name: 'Add to collection' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await page - .getByLabel('Input Modal') - .locator('div') - .filter({ - hasText: /^Yearly Sales Revenue - Signature Cycles Products \(Last 3 Years \+ YTD\)$/ - }) - .first() - .click(); - await page.getByRole('button', { name: 'Remove assets' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeHidden(); -}); - -test('Complex collection click through', async ({ page }) => { - await page.goto('http://localhost:3000/app/collections/0ac43ae2-beda-4007-9574-71a17425da0a'); - await page.getByRole('link', { name: 'Quarterly Revenue Growth Rate' }).click(); - await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); - await page.goBack(); - await expect(page.getByRole('link', { name: 'Important Things' })).toBeVisible(); - await page.waitForTimeout(650); - await page.getByRole('link', { name: 'Revenue by Sales Territory (' }).click(); - await page.getByRole('button', { name: 'Start chat' }).click(); - await page.waitForTimeout(650); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); - await page.waitForTimeout(650); - await page.goBack(); - await page.waitForTimeout(650); - await page.goBack(); - await page.waitForTimeout(650); - await expect(page.getByRole('textbox', { name: 'New chart' })).not.toBeVisible(); + await expect( + page.getByRole('main').getByRole('button', { name: 'Add to collection' }) + ).toBeVisible(); + await page.getByRole('button').filter({ hasText: /^$/ }).nth(2).click(); + await page.getByRole('menuitem', { name: 'Rename collection' }).click(); + await page.getByRole('textbox', { name: 'Enter collection name' }).fill('Nate rulez!'); + await page.getByRole('button', { name: 'Rename' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.reload(); + await expect(page.getByRole('link', { name: 'Nate rulez!' })).toBeVisible(); + await page.getByRole('button').filter({ hasText: /^$/ }).nth(2).click(); + await page.getByRole('menuitem', { name: 'Delete collection' }).click(); + await page.getByRole('button', { name: 'Submit' }).click(); + await page.waitForTimeout(1000); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); + expect(page.url()).toBe('http://localhost:3000/app/collections'); + }); + + test('Can add a metric to a collection', async ({ page }) => { + await page.goto('http://localhost:3000/app/collections'); + await page.getByRole('link', { name: 'Important Things' }).click(); + await page.getByRole('button', { name: 'Add to collection' }).click(); + await page.waitForTimeout(550); + + await page.getByText('Yearly Sales Revenue -').click(); + + await page.getByRole('button', { name: 'Add assets' }).click(); + await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Quarterly Revenue Report (' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Quarterly Revenue Growth Rate' })).toBeVisible(); + await page.getByRole('button', { name: 'Add to collection' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page + .getByLabel('Input Modal') + .locator('div') + .filter({ + hasText: /^Yearly Sales Revenue - Signature Cycles Products \(Last 3 Years \+ YTD\)$/ + }) + .first() + .click(); + await page.getByRole('button', { name: 'Remove assets' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect(page.getByRole('link', { name: 'Yearly Sales Revenue -' })).toBeHidden(); + }); + + test('Complex collection click through', async ({ page }) => { + await page.goto('http://localhost:3000/app/collections/0ac43ae2-beda-4007-9574-71a17425da0a'); + await page.getByRole('link', { name: 'Quarterly Revenue Growth Rate' }).click(); + await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible(); + await page.goBack(); + await expect(page.getByRole('link', { name: 'Important Things' })).toBeVisible(); + await page.waitForTimeout(650); + await page.getByRole('link', { name: 'Revenue by Sales Territory (' }).click(); + await page.getByRole('button', { name: 'Start chat' }).click(); + await page.waitForTimeout(650); + await page.waitForLoadState('networkidle'); + await expect(page.getByTestId('chat-response-message-file')).toBeVisible(); + await page.waitForTimeout(650); + await page.goBack(); + await page.waitForTimeout(650); + await page.goBack(); + await page.waitForTimeout(650); + await expect(page.getByRole('textbox', { name: 'New chart' })).not.toBeVisible(); + }); }); diff --git a/web/playwright-tests/dashboard-updates.test.ts b/web/playwright-tests/dashboard-updates.test.ts index f1bee1b8d..6292494c3 100644 --- a/web/playwright-tests/dashboard-updates.test.ts +++ b/web/playwright-tests/dashboard-updates.test.ts @@ -1,173 +1,177 @@ import { test, expect } from '@playwright/test'; -test('Go to dashboard', async ({ page }) => { - await page.goto('http://localhost:3000/app/dashboards'); - await expect(page.getByText('Dashboards').nth(1)).toBeVisible(); - await expect(page.getByRole('button', { name: 'New dashboard' })).toBeVisible(); - await expect(page.getByRole('button', { name: '12px star' })).toBeVisible(); - await page.getByRole('link', { name: 'Important Metrics 12px star' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( - 'Important Metrics' - ); -}); - -test('Can remove a metric from a dashboard', async ({ page }) => { - await page.goto('http://localhost:3000/app/dashboards/c0855f0f-f50a-424e-9e72-9e53711a7f6a'); - await expect(page.getByRole('button', { name: 'Quarterly Gross Profit Margin' })).toBeVisible(); - // Hover over the metric to reveal the three-dot menu - await page - .locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`) - .hover({ timeout: 500 }); - await expect( - page.locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`) - ).toBeVisible(); - - await page - .getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72') - .locator('button') - .click(); - await page.getByRole('menuitem', { name: 'Delete' }).click(); - await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible(); - await page.getByRole('button', { name: 'Submit' }).click(); - await expect( - page.getByRole('button', { name: 'Quarterly Gross Profit Margin' }) - ).not.toBeVisible(); - await page - .locator('div') - .filter({ hasText: /^DashboardFileStart chat$/ }) - .getByRole('button') - .nth(2) - .click(); - await page.getByRole('textbox', { name: 'Search...' }).click(); - await page - .getByRole('textbox', { name: 'Search...' }) - .fill('Quarterly Gross Profit Margin Trend (Q2 2023 - Q1 2024)'); - await page.waitForTimeout(450); - await page.waitForLoadState('networkidle'); - await page - .locator('div:nth-child(2) > div > div > div > .border-border > div > .peer') - .first() - .click(); - await expect(page.getByRole('button', { name: 'Add metrics' })).toBeVisible(); - await page.getByRole('button', { name: 'Add metrics' }).click(); - await page.waitForTimeout(300); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72')).toBeVisible(); - - //drag back into place - // Use a more specific selector if the element is a link - const sourceElement = page.getByRole('button', { name: 'Quarterly Gross Profit Margin' }); - const targetElement = page.getByRole('button', { name: 'Revenue by Product Category (' }); - - expect(sourceElement).toBeVisible(); - expect(targetElement).toBeVisible(); - - try { - // Skip the initial click since it's a link and would navigate away - // Go straight to hover and mouse operations - await sourceElement.hover({ force: true }); - await page.waitForTimeout(200); - await page.mouse.down(); - await page.waitForTimeout(200); - - // Move to target element - await targetElement.hover({ force: true, position: { x: 5, y: 5 } }); - await page.waitForTimeout(400); - - await page.mouse.up(); - await page.waitForTimeout(1000); - } catch (e) { - const sourceBoundingBox = await sourceElement.boundingBox(); - const targetBoundingBox = await targetElement.boundingBox(); - - if (sourceBoundingBox && targetBoundingBox) { - const startX = sourceBoundingBox.x + sourceBoundingBox.width / 2; - const startY = sourceBoundingBox.y + sourceBoundingBox.height / 2; - const endX = targetBoundingBox.x + 10; - const endY = targetBoundingBox.y + targetBoundingBox.height / 2; - - // Skip the initial click - await page.mouse.move(startX, startY); - await page.waitForTimeout(300); - await page.mouse.down(); - await page.waitForTimeout(300); - - // Move to destination with a slower motion - const steps = 20; - for (let i = 0; i <= steps; i++) { - const stepX = startX + (endX - startX) * (i / steps); - const stepY = startY + (endY - startY) * (i / steps); - await page.mouse.move(stepX, stepY); - await page.waitForTimeout(3); - } - - await page.waitForTimeout(100); - await page.mouse.up(); - await page.waitForTimeout(100); - } - } - - // Verify the element was moved successfully - await expect(sourceElement).toBeVisible(); - await page.getByRole('textbox', { name: 'New dashboard' }).click(); - await expect(page.getByRole('button', { name: 'Save' })).toBeVisible(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(55); - await page.waitForLoadState('networkidle'); -}); - -test('Can edit name and description of a dashboard', async ({ page }) => { - await page.goto('http://localhost:3000/app/dashboards/c0855f0f-f50a-424e-9e72-9e53711a7f6a'); - await expect(page.getByRole('textbox', { name: 'Add description...' })).toHaveValue(''); - - await page.getByRole('textbox', { name: 'New dashboard' }).click(); - await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics NATE RULES'); - await page.getByRole('textbox', { name: 'Add description...' }).click(); - await page.getByRole('textbox', { name: 'Add description...' }).fill('HUH?'); - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toBeVisible(); - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( - 'Important Metrics NATE RULES' - ); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( - 'Important Metrics NATE RULES' - ); - await page.getByRole('textbox', { name: 'New dashboard' }).click(); - await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics'); - await page.getByRole('textbox', { name: 'Add description...' }).click(); - await expect(page.getByRole('textbox', { name: 'Add description...' })).toHaveValue('HUH?'); - - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( - 'Important Metrics' - ); - await page.getByRole('textbox', { name: 'Add description...' }).fill(''); - await expect(page.getByRole('textbox', { name: 'Add description...' })).toBeEmpty(); - await page.getByRole('textbox', { name: 'New dashboard' }).click(); - await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics SWAG'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(400); - await page.waitForLoadState('networkidle'); - await page.getByTestId('segmented-trigger-file').click(); - await page.getByTestId('segmented-trigger-file').click(); - await page.waitForTimeout(1000); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - - await expect(page.getByRole('code').getByText('Important Metrics SWAG')).toBeVisible({ - timeout: 22000 +test.describe.serial('dashboard updates', () => { + test('Go to dashboard', async ({ page }) => { + await page.goto('http://localhost:3000/app/dashboards'); + await expect(page.getByText('Dashboards').nth(1)).toBeVisible(); + await expect(page.getByRole('button', { name: 'New dashboard' })).toBeVisible(); + await expect(page.getByRole('button', { name: '12px star' })).toBeVisible(); + await page.getByRole('link', { name: 'Important Metrics 12px star' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( + 'Important Metrics' + ); + }); + + test('Can remove a metric from a dashboard', async ({ page }) => { + await page.goto('http://localhost:3000/app/dashboards/c0855f0f-f50a-424e-9e72-9e53711a7f6a'); + await expect(page.getByRole('button', { name: 'Quarterly Gross Profit Margin' })).toBeVisible(); + // Hover over the metric to reveal the three-dot menu + await page + .locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`) + .hover({ timeout: 500 }); + await expect( + page.locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`) + ).toBeVisible(); + + await page + .getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72') + .locator('button') + .click(); + await page.getByRole('menuitem', { name: 'Delete' }).click(); + await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible(); + await page.getByRole('button', { name: 'Submit' }).click(); + await expect( + page.getByRole('button', { name: 'Quarterly Gross Profit Margin' }) + ).not.toBeVisible(); + await page + .locator('div') + .filter({ hasText: /^DashboardFileStart chat$/ }) + .getByRole('button') + .nth(2) + .click(); + await page.getByRole('textbox', { name: 'Search...' }).click(); + await page + .getByRole('textbox', { name: 'Search...' }) + .fill('Quarterly Gross Profit Margin Trend (Q2 2023 - Q1 2024)'); + await page.waitForTimeout(450); + await page.waitForLoadState('networkidle'); + await page + .locator('div:nth-child(2) > div > div > div > .border-border > div > .peer') + .first() + .click(); + await expect(page.getByRole('button', { name: 'Add metrics' })).toBeVisible(); + await page.getByRole('button', { name: 'Add metrics' }).click(); + await page.waitForTimeout(300); + await page.waitForLoadState('networkidle'); + await expect( + page.getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72') + ).toBeVisible(); + + //drag back into place + // Use a more specific selector if the element is a link + const sourceElement = page.getByRole('button', { name: 'Quarterly Gross Profit Margin' }); + const targetElement = page.getByRole('button', { name: 'Revenue by Product Category (' }); + + expect(sourceElement).toBeVisible(); + expect(targetElement).toBeVisible(); + + try { + // Skip the initial click since it's a link and would navigate away + // Go straight to hover and mouse operations + await sourceElement.hover({ force: true }); + await page.waitForTimeout(200); + await page.mouse.down(); + await page.waitForTimeout(200); + + // Move to target element + await targetElement.hover({ force: true, position: { x: 5, y: 5 } }); + await page.waitForTimeout(400); + + await page.mouse.up(); + await page.waitForTimeout(1000); + } catch (e) { + const sourceBoundingBox = await sourceElement.boundingBox(); + const targetBoundingBox = await targetElement.boundingBox(); + + if (sourceBoundingBox && targetBoundingBox) { + const startX = sourceBoundingBox.x + sourceBoundingBox.width / 2; + const startY = sourceBoundingBox.y + sourceBoundingBox.height / 2; + const endX = targetBoundingBox.x + 10; + const endY = targetBoundingBox.y + targetBoundingBox.height / 2; + + // Skip the initial click + await page.mouse.move(startX, startY); + await page.waitForTimeout(300); + await page.mouse.down(); + await page.waitForTimeout(300); + + // Move to destination with a slower motion + const steps = 20; + for (let i = 0; i <= steps; i++) { + const stepX = startX + (endX - startX) * (i / steps); + const stepY = startY + (endY - startY) * (i / steps); + await page.mouse.move(stepX, stepY); + await page.waitForTimeout(3); + } + + await page.waitForTimeout(100); + await page.mouse.up(); + await page.waitForTimeout(100); + } + } + + // Verify the element was moved successfully + await expect(sourceElement).toBeVisible(); + await page.getByRole('textbox', { name: 'New dashboard' }).click(); + await expect(page.getByRole('button', { name: 'Save' })).toBeVisible(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(55); + await page.waitForLoadState('networkidle'); + }); + + test('Can edit name and description of a dashboard', async ({ page }) => { + await page.goto('http://localhost:3000/app/dashboards/c0855f0f-f50a-424e-9e72-9e53711a7f6a'); + await expect(page.getByRole('textbox', { name: 'Add description...' })).toHaveValue(''); + + await page.getByRole('textbox', { name: 'New dashboard' }).click(); + await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics NATE RULES'); + await page.getByRole('textbox', { name: 'Add description...' }).click(); + await page.getByRole('textbox', { name: 'Add description...' }).fill('HUH?'); + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toBeVisible(); + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( + 'Important Metrics NATE RULES' + ); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( + 'Important Metrics NATE RULES' + ); + await page.getByRole('textbox', { name: 'New dashboard' }).click(); + await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics'); + await page.getByRole('textbox', { name: 'Add description...' }).click(); + await expect(page.getByRole('textbox', { name: 'Add description...' })).toHaveValue('HUH?'); + + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( + 'Important Metrics' + ); + await page.getByRole('textbox', { name: 'Add description...' }).fill(''); + await expect(page.getByRole('textbox', { name: 'Add description...' })).toBeEmpty(); + await page.getByRole('textbox', { name: 'New dashboard' }).click(); + await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics SWAG'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(400); + await page.waitForLoadState('networkidle'); + await page.getByTestId('segmented-trigger-file').click(); + await page.getByTestId('segmented-trigger-file').click(); + await page.waitForTimeout(1000); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + + await expect(page.getByRole('code').getByText('Important Metrics SWAG')).toBeVisible({ + timeout: 22000 + }); + await expect(page.locator('.current-line').first()).toBeVisible(); + await page.getByTestId('segmented-trigger-dashboard').click(); + await page.getByRole('textbox', { name: 'New dashboard' }).click(); + await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics'); + await page.getByRole('button', { name: 'Save' }).click(); + await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( + 'Important Metrics' + ); }); - await expect(page.locator('.current-line').first()).toBeVisible(); - await page.getByTestId('segmented-trigger-dashboard').click(); - await page.getByRole('textbox', { name: 'New dashboard' }).click(); - await page.getByRole('textbox', { name: 'New dashboard' }).fill('Important Metrics'); - await page.getByRole('button', { name: 'Save' }).click(); - await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue( - 'Important Metrics' - ); }); diff --git a/web/playwright-tests/invite-user.test.ts b/web/playwright-tests/invite-user.test.ts index 6877b4aec..bce4b5923 100644 --- a/web/playwright-tests/invite-user.test.ts +++ b/web/playwright-tests/invite-user.test.ts @@ -1,67 +1,69 @@ import { test, expect } from '@playwright/test'; -test('Invite User', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page - .locator('div') - .filter({ hasText: /^Invite people$/ }) - .first() - .click(); - await page.getByRole('textbox', { name: 'buster@bluthbananas.com,' }).click(); - await page - .getByRole('textbox', { name: 'buster@bluthbananas.com,' }) - .fill('nate+integration-test@buser.so'); - await page.getByRole('button', { name: 'Send invites' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.getByText('Invites sent').first()).toBeVisible({ timeout: 3000 }); +test.describe.serial('invite user', () => { + test('Invite User', async ({ page }) => { + await page.goto('http://localhost:3000/app/home'); + await page + .locator('div') + .filter({ hasText: /^Invite people$/ }) + .first() + .click(); + await page.getByRole('textbox', { name: 'buster@bluthbananas.com,' }).click(); + await page + .getByRole('textbox', { name: 'buster@bluthbananas.com,' }) + .fill('nate+integration-test@buser.so'); + await page.getByRole('button', { name: 'Send invites' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.getByText('Invites sent').first()).toBeVisible({ timeout: 3000 }); - await page.getByRole('button').filter({ hasText: /^$/ }).first().click(); - await page.getByRole('link', { name: 'Users' }).click(); - await page.waitForTimeout(5000); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.getByRole('link', { name: 'nate+integration-test@buser.' })).toBeVisible({ - timeout: 20000 - }); - await expect(page.getByRole('main')).toMatchAriaSnapshot(` + await page.getByRole('button').filter({ hasText: /^$/ }).first().click(); + await page.getByRole('link', { name: 'Users' }).click(); + await page.waitForTimeout(5000); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.getByRole('link', { name: 'nate+integration-test@buser.' })).toBeVisible({ + timeout: 20000 + }); + await expect(page.getByRole('main')).toMatchAriaSnapshot(` - img - text: nate+integration-test@buser.so Restricted Querier `); - await page.getByRole('link', { name: 'nate+integration-test@buser.' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.getByText('nate+integration-test@buser.so')).toBeVisible(); -}); + await page.getByRole('link', { name: 'nate+integration-test@buser.' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.getByText('nate+integration-test@buser.so')).toBeVisible(); + }); -test('Can change user role', async ({ page }) => { - await page.goto('http://localhost:3000/app/settings/users'); - await page.getByRole('link', { name: 'B blake blake@buster.so' }).click(); - await page.waitForTimeout(1000); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); - await expect(page.getByText('blake@buster.so')).toBeVisible(); - await expect(page.getByRole('combobox')).toHaveText(/Querier/); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: 'Workspace Admin' }).click(); - await expect( - page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() - ).toBeVisible(); - await page.waitForTimeout(25); - await page.waitForLoadState('networkidle'); - await page.reload(); - await expect( - page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() - ).toBeVisible(); - await page.getByRole('combobox').click(); - await page.getByRole('option', { name: 'Querier', exact: true }).click(); - await expect( - page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() - ).toBeVisible(); - await page.waitForTimeout(15); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); + test('Can change user role', async ({ page }) => { + await page.goto('http://localhost:3000/app/settings/users'); + await page.getByRole('link', { name: 'B blake blake@buster.so' }).click(); + await page.waitForTimeout(1000); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await expect(page.getByText('blake@buster.so')).toBeVisible(); + await expect(page.getByRole('combobox')).toHaveText(/Querier/); + await page.getByRole('combobox').click(); + await page.getByRole('option', { name: 'Workspace Admin' }).click(); + await expect( + page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() + ).toBeVisible(); + await page.waitForTimeout(25); + await page.waitForLoadState('networkidle'); + await page.reload(); + await expect( + page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() + ).toBeVisible(); + await page.getByRole('combobox').click(); + await page.getByRole('option', { name: 'Querier', exact: true }).click(); + await expect( + page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first() + ).toBeVisible(); + await page.waitForTimeout(15); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + }); }); diff --git a/web/playwright-tests/line-chart-axis-tests.spec.ts b/web/playwright-tests/line-chart-axis-tests.spec.ts index a1bf998c7..e23960f59 100644 --- a/web/playwright-tests/line-chart-axis-tests.spec.ts +++ b/web/playwright-tests/line-chart-axis-tests.spec.ts @@ -1,320 +1,328 @@ import { test, expect } from '@playwright/test'; -test.skip('Line chart - x axis rotation', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page - .locator('div') - .filter({ hasText: /^X-Axis$/ }) - .getByRole('button') - .click(); - await page.getByTestId('segmented-trigger-45').click(); - expect(page.getByTestId('segmented-trigger-45')).toHaveAttribute('data-state', 'active'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await page.waitForTimeout(50); - await page - .locator('div') - .filter({ hasText: /^X-Axis$/ }) - .getByRole('button') - .click(); - expect(page.getByTestId('segmented-trigger-45')).toHaveAttribute('data-state', 'active'); - await page.getByTestId('segmented-trigger-auto').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); -}); +test.describe.serial('Line chart - axis tests', () => { + test.skip('Line chart - x axis rotation', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page + .locator('div') + .filter({ hasText: /^X-Axis$/ }) + .getByRole('button') + .click(); + await page.getByTestId('segmented-trigger-45').click(); + expect(page.getByTestId('segmented-trigger-45')).toHaveAttribute('data-state', 'active'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.waitForTimeout(50); + await page + .locator('div') + .filter({ hasText: /^X-Axis$/ }) + .getByRole('button') + .click(); + expect(page.getByTestId('segmented-trigger-45')).toHaveAttribute('data-state', 'active'); + await page.getByTestId('segmented-trigger-auto').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + }); -test('Line chart - line title', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).click(); - await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).fill('NATE RULEZ'); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect(page.locator('body')).toMatchAriaSnapshot(` + test('Line chart - line title', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).click(); + await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).fill('NATE RULEZ'); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect(page.locator('body')).toMatchAriaSnapshot(` - textbox "New chart": /Average Revenue per Customer \\(Quarterly\\) \\(Q2 \\d+ - Q1 \\d+\\)/ - text: /Q2 \\d+ - Q1 \\d+ • What is the average revenue generated per customer quarterly from Q2 \\d+ to Q1 \\d+\\?/ - img `); - await expect(page.getByTestId('select-axis-drop-zone-yAxis')).toContainText('NATE RULEZ'); - await page.getByRole('textbox', { name: 'NATE RULEZ' }).click(); - await page.getByRole('textbox', { name: 'NATE RULEZ' }).press('ControlOrMeta+a'); - await page.getByRole('textbox', { name: 'NATE RULEZ' }).fill(''); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('select-axis-drop-zone-yAxis')).not.toContainText('NATE RULEZ'); -}); + await expect(page.getByTestId('select-axis-drop-zone-yAxis')).toContainText('NATE RULEZ'); + await page.getByRole('textbox', { name: 'NATE RULEZ' }).click(); + await page.getByRole('textbox', { name: 'NATE RULEZ' }).press('ControlOrMeta+a'); + await page.getByRole('textbox', { name: 'NATE RULEZ' }).fill(''); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect(page.getByTestId('select-axis-drop-zone-yAxis')).not.toContainText('NATE RULEZ'); + }); -test('Line chart - line settings', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByTestId('segmented-trigger-dot-line').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(20); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('segmented-trigger-dot-line')).toHaveAttribute( - 'data-state', - 'active' - ); - await expect(page.locator('body')).toMatchAriaSnapshot(` + test('Line chart - line settings', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByTestId('segmented-trigger-dot-line').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(120); + await page.waitForLoadState('networkidle'); + await expect(page.getByTestId('segmented-trigger-dot-line')).toHaveAttribute( + 'data-state', + 'active' + ); + await expect(page.locator('body')).toMatchAriaSnapshot(` - textbox "New chart": /Average Revenue per Customer \\(Quarterly\\) \\(Q2 \\d+ - Q1 \\d+\\)/ - text: /Q2 \\d+ - Q1 \\d+ • What is the average revenue generated per customer quarterly from Q2 \\d+ to Q1 \\d+\\?/ - img `); - await page.getByTestId('segmented-trigger-step').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(20); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('segmented-trigger-step')).toHaveAttribute('data-state', 'active'); - await page.waitForTimeout(100); - await page.getByTestId('segmented-trigger-line').click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect(page.getByTestId('segmented-trigger-line')).toHaveAttribute('data-state', 'active'); -}); + await page.getByTestId('segmented-trigger-step').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(120); + await page.waitForLoadState('networkidle'); + await expect(page.getByTestId('segmented-trigger-step')).toHaveAttribute( + 'data-state', + 'active' + ); + await page.waitForTimeout(100); + await page.getByTestId('segmented-trigger-line').click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect(page.getByTestId('segmented-trigger-line')).toHaveAttribute( + 'data-state', + 'active' + ); + }); -test('Line chart - data labels', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); - await page.getByRole('switch').click(); - await expect(page.getByRole('switch')).toBeVisible(); - await expect(page.getByRole('switch')).toHaveAttribute('data-state', 'checked'); + test('Line chart - data labels', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('switch').click(); + await expect(page.getByRole('switch')).toBeVisible(); + await expect(page.getByRole('switch')).toHaveAttribute('data-state', 'checked'); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect(page.getByRole('switch')).not.toHaveAttribute('data-state', 'checked'); -}); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect(page.getByRole('switch')).not.toHaveAttribute('data-state', 'checked'); + }); -test('Line chart - styling updates - data labels', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Data labels$/ }) - .getByRole('switch') - .click(); - await expect( - page + test('Line chart - styling updates - data labels', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Data labels$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); - await page.waitForTimeout(150); - await page.getByRole('button', { name: 'Reset' }).click(); - await page.waitForTimeout(150); - await expect( - page - .locator('div') - .filter({ hasText: /^Data labels$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); -}); + .click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Data labels$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); + await page.waitForTimeout(150); + await page.getByRole('button', { name: 'Reset' }).click(); + await page.waitForTimeout(150); + await expect( + page + .locator('div') + .filter({ hasText: /^Data labels$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + }); -test('Line chart - styling updates - grid lines', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Grid lines$/ }) - .getByRole('switch') - .click(); - await expect( - page + test('Line chart - styling updates - grid lines', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Grid lines$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Grid lines$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); -}); + .click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Grid lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Grid lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); + }); -test('Line chart - styling updates - hide y-axis', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Hide y-axis$/ }) - .getByRole('switch') - .click(); - await expect( - page + test('Line chart - styling updates - hide y-axis', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Hide y-axis$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Hide y-axis$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); -}); + .click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Hide y-axis$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Hide y-axis$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + }); -test('Line chart - styling updates - smooth lines', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Smooth lines$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - - await expect( - page + test('Line chart - styling updates - smooth lines', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Smooth lines$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); - await page - .locator('div') - .filter({ hasText: /^Smooth lines$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - await expect( - page + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + + await expect( + page + .locator('div') + .filter({ hasText: /^Smooth lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); + await page .locator('div') .filter({ hasText: /^Smooth lines$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); -}); + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Smooth lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + }); -test('Line chart - styling updates - dots on lines', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Dot on lines$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - await expect( - page + test('Line chart - styling updates - dots on lines', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Dot on lines$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); + .click(); + await page.getByRole('button', { name: 'Save' }).click(); - await page.reload(); - await page.getByTestId('segmented-trigger-Styling').click(); - await page - .locator('div') - .filter({ hasText: /^Dot on lines$/ }) - .getByRole('switch') - .click(); - await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect( - page + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Dot on lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); + + await page.reload(); + await page.getByTestId('segmented-trigger-Styling').click(); + await page .locator('div') .filter({ hasText: /^Dot on lines$/ }) .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); -}); + .click(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect( + page + .locator('div') + .filter({ hasText: /^Dot on lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + }); -test('Line chart - when legend headline is turned it it also turns on show legend', async ({ - page -}) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await expect( + test('Line chart - when legend headline is turned it it also turns on show legend', async ({ page - .locator('div') - .filter({ hasText: /^Show legend$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); - await page.getByRole('combobox').filter({ hasText: 'None' }).click(); - await page.getByRole('option', { name: 'Current' }).click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Show legend$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'checked'); + }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Show legend$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + await page.getByRole('combobox').filter({ hasText: 'None' }).click(); + await page.getByRole('option', { name: 'Current' }).click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Show legend$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'checked'); - await page.getByRole('combobox').filter({ hasText: 'Current' }).click(); - await page.getByRole('option', { name: 'None' }).click(); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Show legend$/ }) - .getByRole('switch') - ).toHaveAttribute('data-state', 'unchecked'); -}); + await page.getByRole('combobox').filter({ hasText: 'Current' }).click(); + await page.getByRole('option', { name: 'None' }).click(); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Show legend$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); + }); -test('Line chart - can reset colors', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page.getByTestId('segmented-trigger-Colors').click(); - await page.getByTestId('segmented-trigger-Monochrome').click(); - await page.locator('div').filter({ hasText: /^Red$/ }).first().click(); - await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible(); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect(page.getByRole('button', { name: 'Reset' })).not.toBeVisible(); -}); + test('Line chart - can reset colors', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page.getByTestId('segmented-trigger-Colors').click(); + await page.getByTestId('segmented-trigger-Monochrome').click(); + await page.locator('div').filter({ hasText: /^Red$/ }).first().click(); + await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible(); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect(page.getByRole('button', { name: 'Reset' })).not.toBeVisible(); + }); -test('Line chart - when trying to navigate away it will warn you', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' - ); - await page.getByTestId('segmented-trigger-Styling').click(); - await page.getByTestId('segmented-trigger-Colors').click(); - await page.getByTestId('segmented-trigger-Monochrome').click(); - await page.locator('div').filter({ hasText: /^Red$/ }).first().click(); - await page.getByTestId('segmented-trigger-results').click(); - await expect(page.getByRole('button', { name: 'Discard changes' })).toBeVisible(); - await page.getByRole('button').filter({ hasText: /^$/ }).click(); - await expect(page.getByRole('button', { name: 'Discard changes' })).not.toBeVisible(); - await page.getByRole('button', { name: 'Reset' }).click(); - await page.getByTestId('segmented-trigger-results').click(); - const expectedURL = - 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/results'; - await expect(page.getByRole('button', { name: 'Discard changes' })).not.toBeVisible(); - await expect(page).toHaveURL(expectedURL, { timeout: 15000 }); + test('Line chart - when trying to navigate away it will warn you', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' + ); + await page.getByTestId('segmented-trigger-Styling').click(); + await page.getByTestId('segmented-trigger-Colors').click(); + await page.getByTestId('segmented-trigger-Monochrome').click(); + await page.locator('div').filter({ hasText: /^Red$/ }).first().click(); + await page.getByTestId('segmented-trigger-results').click(); + await expect(page.getByRole('button', { name: 'Discard changes' })).toBeVisible(); + await page.getByRole('button').filter({ hasText: /^$/ }).click(); + await expect(page.getByRole('button', { name: 'Discard changes' })).not.toBeVisible(); + await page.getByRole('button', { name: 'Reset' }).click(); + await page.getByTestId('segmented-trigger-results').click(); + const expectedURL = + 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/results'; + await expect(page.getByRole('button', { name: 'Discard changes' })).not.toBeVisible(); + await expect(page).toHaveURL(expectedURL, { timeout: 15000 }); + }); }); diff --git a/web/playwright-tests/metric-chart-updates.spec.ts b/web/playwright-tests/metric-chart-updates.spec.ts index a189e4398..eababaa28 100644 --- a/web/playwright-tests/metric-chart-updates.spec.ts +++ b/web/playwright-tests/metric-chart-updates.spec.ts @@ -1,72 +1,74 @@ import { test, expect } from '@playwright/test'; -test('Metric can change to be a table', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page.getByRole('link', { name: 'Metrics', exact: true }).click(); - await page.getByRole('link', { name: 'Total Unique Products Sold' }).click(); +test.describe.serial('Metric chart updates', () => { + test('Metric can change to be a table', async ({ page }) => { + await page.goto('http://localhost:3000/app/home'); + await page.getByRole('link', { name: 'Metrics', exact: true }).click(); + await page.getByRole('link', { name: 'Total Unique Products Sold' }).click(); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); - expect(page.getByTestId('select-chart-type-column')).toBeVisible(); - expect(page.getByTestId('select-chart-type-column')).toBeDisabled(); - expect(page.getByTestId('select-chart-type-table')).not.toBeDisabled(); + expect(page.getByTestId('select-chart-type-column')).toBeVisible(); + expect(page.getByTestId('select-chart-type-column')).toBeDisabled(); + expect(page.getByTestId('select-chart-type-table')).not.toBeDisabled(); - // - await page.getByTestId('select-chart-type-table').click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Unsaved changesResetSave$/ }) - .nth(1) - ).toBeVisible(); - await page.getByTestId('select-chart-type-metric').click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Unsaved changesResetSave$/ }) - .nth(1) - ).toBeHidden(); -}); - -test('Metric can metric headers', async ({ page }) => { - await page.goto('http://localhost:3000/app/home'); - await page.getByRole('link', { name: 'Metrics', exact: true }).click(); - await page.getByRole('link', { name: 'Total Unique Products Sold' }).click(); - await page.getByTestId('edit-chart-button').getByRole('button').click(); - // - - await page.getByTestId('edit-metric-header-type').click(); - await page.getByRole('option', { name: 'Custom' }).click(); - await page.getByRole('textbox', { name: 'Enter header' }).fill('WOW!'); - await expect(page.getByRole('heading', { name: 'WOW!' })).toBeVisible(); - await page.getByRole('textbox', { name: 'Enter header' }).click(); - await page.getByRole('textbox', { name: 'Enter header' }).fill(''); - await expect(page.getByRole('heading', { name: 'WOW!' })).toBeHidden(); - - //Header options - await page.getByTestId('edit-metric-header-type').click(); - await page.getByRole('option', { name: 'Column title' }).click(); - await expect(page.getByRole('heading', { name: 'Total Unique Products Sold' })).toBeVisible(); - await page.getByTestId('edit-metric-header-type').click(); - await page.getByRole('option', { name: 'Column value' }).click(); - await expect(page.locator('h4')).toBeVisible(); - await page.getByRole('button', { name: 'Reset' }).click(); - - //Subheader options - - await page.getByTestId('edit-metric-subheader-type').click(); - await page.getByRole('option', { name: 'Custom' }).click(); - await page.getByRole('textbox', { name: 'Enter sub-header' }).fill('Cool!'); - await expect(page.getByRole('heading', { name: 'Cool!' })).toBeVisible(); - await page.getByTestId('edit-metric-subheader-type').click(); - await page.getByText('Column title').click(); - await expect(page.getByRole('heading', { name: 'Total Unique Products Sold' })).toBeVisible(); - await page.getByTestId('edit-metric-subheader-type').click(); - await page.getByRole('option', { name: 'Column value' }).click(); - - await page.waitForTimeout(1000); - await expect(page.locator('h4')).toBeVisible(); - await page.getByRole('button', { name: 'Reset' }).click(); - await expect(page.locator('h4')).toBeHidden(); + // + await page.getByTestId('select-chart-type-table').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Unsaved changesResetSave$/ }) + .nth(1) + ).toBeVisible(); + await page.getByTestId('select-chart-type-metric').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Unsaved changesResetSave$/ }) + .nth(1) + ).toBeHidden(); + }); + + test('Metric can metric headers', async ({ page }) => { + await page.goto('http://localhost:3000/app/home'); + await page.getByRole('link', { name: 'Metrics', exact: true }).click(); + await page.getByRole('link', { name: 'Total Unique Products Sold' }).click(); + await page.getByTestId('edit-chart-button').getByRole('button').click(); + // + + await page.getByTestId('edit-metric-header-type').click(); + await page.getByRole('option', { name: 'Custom' }).click(); + await page.getByRole('textbox', { name: 'Enter header' }).fill('WOW!'); + await expect(page.getByRole('heading', { name: 'WOW!' })).toBeVisible(); + await page.getByRole('textbox', { name: 'Enter header' }).click(); + await page.getByRole('textbox', { name: 'Enter header' }).fill(''); + await expect(page.getByRole('heading', { name: 'WOW!' })).toBeHidden(); + + //Header options + await page.getByTestId('edit-metric-header-type').click(); + await page.getByRole('option', { name: 'Column title' }).click(); + await expect(page.getByRole('heading', { name: 'Total Unique Products Sold' })).toBeVisible(); + await page.getByTestId('edit-metric-header-type').click(); + await page.getByRole('option', { name: 'Column value' }).click(); + await expect(page.locator('h4')).toBeVisible(); + await page.getByRole('button', { name: 'Reset' }).click(); + + //Subheader options + + await page.getByTestId('edit-metric-subheader-type').click(); + await page.getByRole('option', { name: 'Custom' }).click(); + await page.getByRole('textbox', { name: 'Enter sub-header' }).fill('Cool!'); + await expect(page.getByRole('heading', { name: 'Cool!' })).toBeVisible(); + await page.getByTestId('edit-metric-subheader-type').click(); + await page.getByText('Column title').click(); + await expect(page.getByRole('heading', { name: 'Total Unique Products Sold' })).toBeVisible(); + await page.getByTestId('edit-metric-subheader-type').click(); + await page.getByRole('option', { name: 'Column value' }).click(); + + await page.waitForTimeout(1000); + await expect(page.locator('h4')).toBeVisible(); + await page.getByRole('button', { name: 'Reset' }).click(); + await expect(page.locator('h4')).toBeHidden(); + }); }); diff --git a/web/playwright-tests/sharing-metric.test.ts b/web/playwright-tests/sharing-metric.test.ts index d5fb5335a..9a5a59d6f 100644 --- a/web/playwright-tests/sharing-metric.test.ts +++ b/web/playwright-tests/sharing-metric.test.ts @@ -1,41 +1,43 @@ import { test, expect } from '@playwright/test'; -test('Can share a metric', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/chats/865352e8-c327-461d-ae67-9efeb530ff0e/metrics/1e91b291-8883-5451-8b98-89e99071e4f8/chart?metric_version_number=1' - ); - await page.getByTestId('share-button').click(); - await page.getByRole('textbox', { name: 'Invite others by email...' }).click(); - await page.getByRole('textbox', { name: 'Invite others by email...' }).fill('blake@buster.so'); - await page.getByRole('button', { name: 'Invite' }).click(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); - await expect(page.getByText('Can view')).toBeVisible(); - await page.getByText('Can view').click(); - await page.getByRole('menuitemcheckbox', { name: 'Remove' }).click(); - await expect(page.getByText('Can view')).toBeHidden(); - await page.waitForTimeout(100); - await page.waitForLoadState('networkidle'); -}); - -test('Can publish a metric', async ({ page }) => { - await page.goto( - 'http://localhost:3000/app/chats/865352e8-c327-461d-ae67-9efeb530ff0e/metrics/1e91b291-8883-5451-8b98-89e99071e4f8/chart?metric_version_number=1' - ); - await page.getByTestId('share-button').click(); - await page.getByTestId('segmented-trigger-Publish').click(); - await expect(page.getByRole('button', { name: 'Create public link' })).toBeVisible(); - await page.getByRole('button', { name: 'Create public link' }).click(); - await expect(page.getByText('Live on the web')).toBeVisible(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - - await page.reload(); - - await page.getByTestId('share-button').click(); - await page.getByTestId('segmented-trigger-Publish').click(); - await page.getByRole('button', { name: 'Unpublish' }).click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await expect(page.getByRole('button', { name: 'Create public link' })).toBeVisible(); +test.describe.serial('Sharing metric', () => { + test('Can share a metric', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/chats/865352e8-c327-461d-ae67-9efeb530ff0e/metrics/1e91b291-8883-5451-8b98-89e99071e4f8/chart?metric_version_number=1' + ); + await page.getByTestId('share-button').click(); + await page.getByRole('textbox', { name: 'Invite others by email...' }).click(); + await page.getByRole('textbox', { name: 'Invite others by email...' }).fill('blake@buster.so'); + await page.getByRole('button', { name: 'Invite' }).click(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + await expect(page.getByText('Can view')).toBeVisible(); + await page.getByText('Can view').click(); + await page.getByRole('menuitemcheckbox', { name: 'Remove' }).click(); + await expect(page.getByText('Can view')).toBeHidden(); + await page.waitForTimeout(100); + await page.waitForLoadState('networkidle'); + }); + + test('Can publish a metric', async ({ page }) => { + await page.goto( + 'http://localhost:3000/app/chats/865352e8-c327-461d-ae67-9efeb530ff0e/metrics/1e91b291-8883-5451-8b98-89e99071e4f8/chart?metric_version_number=1' + ); + await page.getByTestId('share-button').click(); + await page.getByTestId('segmented-trigger-Publish').click(); + await expect(page.getByRole('button', { name: 'Create public link' })).toBeVisible(); + await page.getByRole('button', { name: 'Create public link' }).click(); + await expect(page.getByText('Live on the web')).toBeVisible(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + + await page.reload(); + + await page.getByTestId('share-button').click(); + await page.getByTestId('segmented-trigger-Publish').click(); + await page.getByRole('button', { name: 'Unpublish' }).click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await expect(page.getByRole('button', { name: 'Create public link' })).toBeVisible(); + }); }); diff --git a/web/playwright.config.ts b/web/playwright.config.ts index f2c9d023d..5247d85d2 100644 --- a/web/playwright.config.ts +++ b/web/playwright.config.ts @@ -23,7 +23,7 @@ export default defineConfig({ /* Retry on CI only */ retries: process.env.CI ? 2 : 1, /* Run 3 tests in parallel */ - workers: process.env.CI ? 1 : 1, + workers: process.env.CI ? 1 : 10, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx index ecb515537..c3e715885 100644 --- a/web/src/components/ui/dropdown/Dropdown.tsx +++ b/web/src/components/ui/dropdown/Dropdown.tsx @@ -458,7 +458,8 @@ const DropdownItem = ({ checked={selected} disabled={disabled} onClick={onClickItem} - closeOnSelect={closeOnSelect}> + closeOnSelect={closeOnSelect} + dataTestId={`dropdown-checkbox-${value}`}> {renderContent()} ); diff --git a/web/src/components/ui/dropdown/DropdownBase.tsx b/web/src/components/ui/dropdown/DropdownBase.tsx index dacd11aa3..9745e0d47 100644 --- a/web/src/components/ui/dropdown/DropdownBase.tsx +++ b/web/src/components/ui/dropdown/DropdownBase.tsx @@ -163,12 +163,23 @@ const DropdownMenuCheckboxItemMultiple = React.forwardRef< React.ComponentPropsWithoutRef & { closeOnSelect?: boolean; selectType?: boolean; + dataTestId?: string; } >( ( - { className, children, onClick, checked = false, closeOnSelect = true, selectType, ...props }, + { + className, + children, + onClick, + checked = false, + closeOnSelect = true, + selectType, + dataTestId, + ...props + }, ref ) => { + console.log('dataTestId', dataTestId); return (