diff --git a/web/playwright-tests/bar-chart-navigation.spec.ts b/web/playwright-tests/bar-chart-navigation.spec.ts index 9ae073e15..d7732e1a0 100644 --- a/web/playwright-tests/bar-chart-navigation.spec.ts +++ b/web/playwright-tests/bar-chart-navigation.spec.ts @@ -51,7 +51,7 @@ test('Can click start chat', async ({ page }) => { await page.waitForLoadState('networkidle'); await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('load'); - await page.waitForTimeout(8000); + await page.waitForTimeout(400); await expect(page).toHaveURL('http://localhost:3000/app/chats', { timeout: 30000 }); }); @@ -69,16 +69,11 @@ test('Can add and remove from favorites', async ({ page }) => { test('Can open sql editor', async ({ page }) => { await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/chart'); - await page.getByTestId('edit-sql-button').getByRole('button').click(); - await page.waitForTimeout(50); - await page.waitForLoadState('networkidle'); - await page.waitForLoadState('domcontentloaded'); + await expect(page.getByTestId('segmented-trigger-sql')).toBeVisible(); + await page.getByTestId('segmented-trigger-sql').click(); + await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/sql'); await expect(page.getByRole('button', { name: 'Run' })).toBeVisible(); - await page.getByTestId('edit-sql-button').getByRole('button').click(); - await page.waitForTimeout(250); - - await page.getByTestId('edit-chart-button').getByRole('button').click(); - await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).toBeVisible(); + await expect(page.getByTestId('segmented-trigger-sql')).toHaveAttribute('data-state', 'active'); }); test('Bar chart span clicking works', async ({ page }) => { @@ -91,24 +86,22 @@ test('Bar chart span clicking works', async ({ page }) => { await page.waitForTimeout(55); await page.getByTestId('edit-chart-button').getByRole('button').click(); await page.waitForTimeout(55); - await page.getByTestId('segmented-trigger-results').click(); + 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('edit-sql-button').getByRole('button').click(); + await page.getByTestId('segmented-trigger-sql').click(); await page.waitForTimeout(55); await expect(page.getByText('Copy SQLSaveRun')).toBeVisible(); - await page.getByTestId('segmented-trigger-file').click(); - await page.waitForTimeout(2500); + await page.getByTestId('edit-chart-button').getByRole('button').click(); 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)', { - exact: true - }) - ).toBeVisible(); + 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 }); diff --git a/web/playwright-tests/bar-chart-styling-updates.spec.ts b/web/playwright-tests/bar-chart-styling-updates.spec.ts index 6729b5889..195f852fd 100644 --- a/web/playwright-tests/bar-chart-styling-updates.spec.ts +++ b/web/playwright-tests/bar-chart-styling-updates.spec.ts @@ -203,6 +203,7 @@ test('Can toggle legend', async ({ page }) => { .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(100); await page.waitForLoadState('networkidle'); await page.reload(); @@ -301,6 +302,7 @@ test('Can add a goal line', async ({ page }) => { 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(); @@ -346,18 +348,19 @@ test('Can add a trendline', async ({ page }) => { 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 - .locator('div') - .filter({ hasText: /^Trend lineAdd trend lineLinear$/ }) - .getByRole('button') - .nth(1) - .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(90); + await page.waitForTimeout(50); await page.waitForLoadState('networkidle'); }); diff --git a/web/playwright-tests/bar-chart-x-axis-updates.spec.ts b/web/playwright-tests/bar-chart-x-axis-updates.spec.ts index be7cd7b01..2fc1197ad 100644 --- a/web/playwright-tests/bar-chart-x-axis-updates.spec.ts +++ b/web/playwright-tests/bar-chart-x-axis-updates.spec.ts @@ -20,6 +20,7 @@ test('X axis config - Title', async ({ page }) => { 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(); @@ -29,6 +30,7 @@ test('X axis config - Title', async ({ page }) => { 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(); @@ -66,8 +68,7 @@ test('X axis config - We can edit the label separator style', async ({ page }) = await page.getByRole('combobox').click(); await page.getByRole('option', { name: '100,000' }).click(); await page.getByRole('button', { name: 'Save' }).click(); - - await page.waitForTimeout(10); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await expect(page.locator('body')).toMatchAriaSnapshot(` @@ -83,7 +84,7 @@ test('X axis config - We can edit the label separator style', async ({ page }) = 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(); @@ -103,6 +104,7 @@ test('X axis config - We can edit the decimal places', async ({ page }) => { 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(); @@ -117,6 +119,8 @@ test('X axis config - We can edit the decimal places', async ({ page }) => { 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 }) => { @@ -127,6 +131,7 @@ test('X axis config - We can edit the multiply by places', async ({ page }) => { 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(); @@ -135,6 +140,7 @@ test('X axis config - We can edit the multiply by places', async ({ page }) => { 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'); }); @@ -155,10 +161,12 @@ test('X axis config - We can edit the prefix', async ({ page }) => { - 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) @@ -174,5 +182,6 @@ test('X axis config - We can edit the prefix', async ({ page }) => { await page.getByRole('textbox', { name: 'dollars' }).click(); await page.getByRole('textbox', { name: 'dollars' }).fill(''); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); }); diff --git a/web/playwright-tests/bar-chart-y-axis-updates.spec.ts b/web/playwright-tests/bar-chart-y-axis-updates.spec.ts index 58e6455ac..f3589ec48 100644 --- a/web/playwright-tests/bar-chart-y-axis-updates.spec.ts +++ b/web/playwright-tests/bar-chart-y-axis-updates.spec.ts @@ -10,6 +10,7 @@ test('Y axis config - Title', async ({ page }) => { 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(); @@ -18,6 +19,7 @@ test('Y axis config - Title', async ({ page }) => { 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(); @@ -32,6 +34,7 @@ test('Y axis config - Label style', async ({ page }) => { 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'); @@ -44,6 +47,7 @@ test('Y axis config - Label style', async ({ page }) => { await expect(page.getByText('Unsaved changes')).toBeVisible(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); }); @@ -60,6 +64,7 @@ test('Y axis config - Label seperator style', async ({ page }) => { 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(); @@ -94,6 +99,7 @@ test('Y axis config - adjust bar roundness', async ({ page }) => { - button "Save" `); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await page.reload(); @@ -110,6 +116,7 @@ test('Y axis config - adjust bar roundness', async ({ page }) => { .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) @@ -140,6 +147,7 @@ test('Y axis config - show data labels', async ({ page }) => { .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await page.reload(); @@ -161,6 +169,7 @@ test('Y axis config - show data labels', async ({ page }) => { .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await page.reload(); @@ -188,6 +197,7 @@ test('Y axis config - global settings', async ({ page }) => { .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await expect(page.locator('body')).toMatchAriaSnapshot(` @@ -210,6 +220,7 @@ test('Y axis config - global settings', async ({ page }) => { .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) @@ -230,6 +241,7 @@ test('Y axis config - global settings', async ({ page }) => { .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); await expect(page.locator('body')).toMatchAriaSnapshot(` @@ -253,6 +265,7 @@ test('Y axis config - global settings', async ({ page }) => { 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(` @@ -269,5 +282,6 @@ test('Y axis config - global settings', async ({ page }) => { await page.getByRole('combobox').filter({ hasText: 'Logarithmic' }).click(); await page.getByRole('option', { name: 'Linear' }).click(); await page.getByRole('button', { name: 'Save' }).click(); + await page.waitForTimeout(250); await page.waitForLoadState('networkidle'); }); diff --git a/web/playwright-tests/dashboard-collection.test.ts b/web/playwright-tests/dashboard-collection.test.ts index 99ff032e2..41a6a927b 100644 --- a/web/playwright-tests/dashboard-collection.test.ts +++ b/web/playwright-tests/dashboard-collection.test.ts @@ -14,7 +14,7 @@ test.skip('Can add dashboard to collection', async ({ page }) => { .click(); const url = 'http://localhost:3000/app/collections/0ac43ae2-beda-4007-9574-71a17425da0a'; - await page.waitForTimeout(5000); + await page.waitForTimeout(1000); await page.waitForLoadState('networkidle'); await page.waitForLoadState('domcontentloaded'); await expect(page.url()).toBe(url); diff --git a/web/playwright-tests/dashboard-updates.test.ts b/web/playwright-tests/dashboard-updates.test.ts index d00d61ece..efce372c1 100644 --- a/web/playwright-tests/dashboard-updates.test.ts +++ b/web/playwright-tests/dashboard-updates.test.ts @@ -152,7 +152,7 @@ test('Can edit name and description of a dashboard', async ({ page }) => { await page.waitForLoadState('networkidle'); await page.getByTestId('segmented-trigger-file').click(); await page.getByTestId('segmented-trigger-file').click(); - await page.waitForTimeout(5000); // Wait up to 2 seconds for the text to appear + await page.waitForTimeout(2000); // Wait up to 2 seconds for the text to appear await expect(page.getByText('Important Metrics SWAG')).toBeVisible({ timeout: 20000 }); // Wait up to 20 seconds for visibility await expect(page.locator('.current-line').first()).toBeVisible(); diff --git a/web/playwright-tests/login.test.ts b/web/playwright-tests/login.test.ts index eae6af28e..d72ea1f49 100644 --- a/web/playwright-tests/login.test.ts +++ b/web/playwright-tests/login.test.ts @@ -9,7 +9,7 @@ test('Login to buster', async ({ page }) => { await page.getByRole('textbox', { name: 'Password' }).fill('password'); await page.getByRole('button', { name: 'Sign in' }).click(); - await page.waitForTimeout(1500); + await page.waitForTimeout(1000); await page.goto('http://localhost:3000/app/home'); expect(page).toHaveURL('http://localhost:3000/app/home'); diff --git a/web/playwright-tests/metric-chart-updates.spec.ts b/web/playwright-tests/metric-chart-updates.spec.ts index 073159f71..a189e4398 100644 --- a/web/playwright-tests/metric-chart-updates.spec.ts +++ b/web/playwright-tests/metric-chart-updates.spec.ts @@ -65,7 +65,7 @@ test('Metric can metric headers', async ({ page }) => { await page.getByTestId('edit-metric-subheader-type').click(); await page.getByRole('option', { name: 'Column value' }).click(); - await page.waitForTimeout(3000); + await page.waitForTimeout(1000); await expect(page.locator('h4')).toBeVisible(); await page.getByRole('button', { name: 'Reset' }).click(); await expect(page.locator('h4')).toBeHidden(); diff --git a/web/playwright-tests/pie-styling-updates.spec.ts b/web/playwright-tests/pie-styling-updates.spec.ts index 8d5e3685c..7c72f3730 100644 --- a/web/playwright-tests/pie-styling-updates.spec.ts +++ b/web/playwright-tests/pie-styling-updates.spec.ts @@ -47,7 +47,7 @@ test.describe.serial('Pie chart styling updates', async () => { } await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible(); - await page.waitForTimeout(1125); + await page.waitForTimeout(1000); await page.getByRole('button', { name: 'Save' }).click(); await page.waitForTimeout(125); await page.waitForLoadState('networkidle'); diff --git a/web/playwright-tests/scatter-chart-updates.test.ts b/web/playwright-tests/scatter-chart-updates.test.ts index fc8c7261b..d9880a5bc 100644 --- a/web/playwright-tests/scatter-chart-updates.test.ts +++ b/web/playwright-tests/scatter-chart-updates.test.ts @@ -8,7 +8,9 @@ test.describe.serial('Create a scatter plot with a question', () => { 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(5000); + await page.waitForTimeout(1000); + 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 @@ -40,7 +42,7 @@ test.describe.serial('Create a scatter plot with a question', () => { await page.waitForTimeout(250); await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('load'); - await page.waitForTimeout(1500); + 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); diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx index fc883d82a..a6983bbbd 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx +++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx @@ -35,8 +35,9 @@ export const CollapseDelete = React.forwardRef< onDelete?: () => void; initialOpen?: boolean; draggingProps?: DraggingProps; + dataTestId?: string; } ->(({ children, title, onDelete, initialOpen = false, draggingProps }, ref) => { +>(({ children, title, onDelete, initialOpen = false, draggingProps, dataTestId }, ref) => { const [open, setOpen] = useState(initialOpen); const onToggleDropdown = useMemoizedFn(() => { @@ -44,7 +45,9 @@ export const CollapseDelete = React.forwardRef< }); return ( -
+
onDeleteGoalLine(goal.id)}> diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditTrendline/EditTrendline.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditTrendline/EditTrendline.tsx index 90be88ff0..8ea0ecfa9 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditTrendline/EditTrendline.tsx +++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditTrendline/EditTrendline.tsx @@ -219,6 +219,7 @@ const EditTrendlineItem: React.FC<{ onDeleteTrendline(trend.id)}>