buster/apps/web/playwright-tests/scatter-chart-updates.test.ts

82 lines
3.5 KiB
TypeScript

import { expect, test } from '@playwright/test';
test.describe.serial('Create a scatter plot with a question', () => {
const question = `I want to understand if there's a relationship between how much an employee sells and the number of orders they process. Can you generate a scatter plot showing each employee's total sales amount on one axis and their total number of orders on the other axis for the last 12 months?`;
let scatterURL = '';
test.skip(`I can create a scatter plot with a question: ${question}`, async ({ page }) => {
await page.goto('http://localhost:3000/app/home');
await page.getByRole('textbox', { name: 'Ask Buster a question...' }).click();
await page.getByRole('textbox', { name: 'Ask Buster a question...' }).fill(question);
await page.getByRole('main').getByRole('button').click();
await page.waitForTimeout(4000);
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
await expect(page.getByRole('link', { name: 'Reasoning link' })).toBeVisible();
await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible({
timeout: 240000 // 4 minutes
});
await expect(page.getByTestId('share-button')).toBeVisible();
await expect(page.getByTestId('save-to-dashboard-button')).toBeVisible();
await expect(page.getByTestId('edit-chart-button').getByRole('button')).toBeVisible();
await page.getByTestId('edit-chart-button').getByRole('button').click();
await expect(page.getByTestId('select-chart-type-scatter')).toBeVisible();
await expect(page.getByTestId('select-chart-type-scatter')).toHaveAttribute(
'data-state',
'selected'
);
const url = page.url();
scatterURL = url;
});
// scatterURL =
// 'http://localhost:3000/app/chats/84c1d148-4056-4aca-8741-29f2d11619c2/metrics/8c1e2db2-1cbb-532a-bf36-040c2431c7f3/chart?metric_version_number=1&secondary_view=chart-edit';
test.skip('I can update the scatter plot', async ({ page }) => {
await page.goto(scatterURL);
await expect(page.getByTestId('edit-chart-button').getByRole('button')).toBeVisible();
await page.getByTestId('edit-chart-button').getByRole('button').click();
await page.waitForTimeout(250);
await page.waitForLoadState('domcontentloaded');
await page.waitForLoadState('load');
await page.waitForTimeout(1000);
await expect(page.getByTestId('select-chart-type-scatter')).not.toBeVisible();
await page.getByTestId('edit-chart-button').getByRole('button').click();
await page.waitForTimeout(250);
await expect(page.getByTestId('select-chart-type-scatter')).toHaveAttribute(
'data-state',
'selected'
);
await page.getByTestId('segmented-trigger-Styling').click();
await expect(page.getByText('Dot size')).toBeVisible();
});
// scatterURL =
// 'http://localhost:3000/app/metrics/8c1e2db2-1cbb-532a-bf36-040c2431c7f3/chart?secondary_view=chart-edit';
test.skip('I can add a trend line', async ({ page }) => {
await page.goto(scatterURL);
await page.waitForTimeout(100);
await page.getByTestId('segmented-trigger-Styling').click();
await page.getByRole('button', { name: 'Add trend line' }).click();
await expect(
page
.locator('div')
.filter({ hasText: /^Linear$/ })
.nth(1)
).toBeVisible();
await page.locator('.relative > button').first().click();
await expect(
page
.locator('div')
.filter({ hasText: /^Linear$/ })
.nth(1)
).toBeHidden();
});
});