Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update tests to be ran with multiple workers

This commit is contained in:
Nate Kelley 2025-05-14 11:16:35 -06:00
parent a73142a4ec
commit 1f6e8b7f42
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
18 changed files with 1812 additions and 1843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/package-lock.json generated
View File

@ -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"

16
web/package.json
View File

@ -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",

67
web/playwright-tests/bar-chart-add-to.test.ts
View File

@ -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();
});

132
web/playwright-tests/bar-chart-navigation.spec.ts
View File

@ -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');
});

395
web/playwright-tests/bar-chart-styling-updates.spec.ts
View File

@ -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');
});

1002
web/playwright-tests/bar-chart-updates.test.ts Normal file
View File

File diff suppressed because it is too large Load Diff

187
web/playwright-tests/bar-chart-x-axis-updates.spec.ts
View File

@ -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');
});

287
web/playwright-tests/bar-chart-y-axis-updates.spec.ts
View File

@ -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');
});

72
web/playwright-tests/chats-list.test.ts
View File

@ -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();
});

150
web/playwright-tests/collection-tests.test.ts
View File

@ -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();
});
});

342
web/playwright-tests/dashboard-updates.test.ts
View File

@ -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'
);
});

118
web/playwright-tests/invite-user.test.ts
View File

@ -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');
});
});

554
web/playwright-tests/line-chart-axis-tests.spec.ts
View File

@ -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 });
});
});

134
web/playwright-tests/metric-chart-updates.spec.ts
View File

@ -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();
});
});

78
web/playwright-tests/sharing-metric.test.ts
View File

@ -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();
});
});

2
web/playwright.config.ts
View File

@ -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. */

3
web/src/components/ui/dropdown/Dropdown.tsx
View File

@ -458,7 +458,8 @@ const DropdownItem = <T,>({
checked={selected}
disabled={disabled}
onClick={onClickItem}
closeOnSelect={closeOnSelect}>
closeOnSelect={closeOnSelect}
dataTestId={`dropdown-checkbox-${value}`}>
{renderContent()}
</DropdownMenuCheckboxItemMultiple>
);

14
web/src/components/ui/dropdown/DropdownBase.tsx
View File

@ -163,12 +163,23 @@ const DropdownMenuCheckboxItemMultiple = React.forwardRef<
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
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 (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
@ -181,6 +192,7 @@ const DropdownMenuCheckboxItemMultiple = React.forwardRef<
}
onClick?.(e);
}}
data-testid={dataTestId}
{...props}>
<span
className={cn(