Add trendline tests

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 expect(page.getByTestId('segmented-trigger-sql')).toBeVisible();
-  await page.waitForTimeout(50);
+  await page.getByTestId('segmented-trigger-sql').click();
-  await page.waitForLoadState('networkidle');
+  await page.goto('http://localhost:3000/app/metrics/45c17750-2b61-5683-ba8d-ff6c6fefacee/sql');
-  await page.waitForLoadState('domcontentloaded');
   await expect(page.getByRole('button', { name: 'Run' })).toBeVisible();
-  await page.getByTestId('edit-sql-button').getByRole('button').click();
+  await expect(page.getByTestId('segmented-trigger-sql')).toHaveAttribute('data-state', 'active');
-  await page.waitForTimeout(250);
-
-  await page.getByTestId('edit-chart-button').getByRole('button').click();
-  await expect(page.locator('div').filter({ hasText: /^Edit chart$/ })).toBeVisible();
 });
 
 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.getByTestId('edit-chart-button').getByRole('button').click();
-  await page.waitForTimeout(2500);
   await page.waitForLoadState('networkidle');
   await page.waitForLoadState('domcontentloaded');
   await page.waitForLoadState('load');
 
-  await expect(
+  await expect(page.getByRole('textbox', { name: 'New chart' })).toBeVisible();
-    page.getByText('Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)', {
+  await expect(page.getByRole('textbox', { name: 'New chart' })).toHaveValue(
-      exact: true
+    'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)'
-    })
+  );
-  ).toBeVisible();
 
   await page.getByTestId('edit-chart-button').getByRole('button').click();
   await expect(page.getByText('Edit chart')).toBeVisible({ timeout: 15000 });

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
+  await page.waitForTimeout(50);
-    .locator('div')
+  await expect(page.getByTestId('trendline-Linear').locator('div').nth(1)).toBeVisible();
-    .filter({ hasText: /^Trend lineAdd trend lineLinear$/ })
+  await page.getByText('Styling').click();
-    .getByRole('button')
+  await page.getByTestId('trendline-Linear').locator('div').nth(1).hover();
-    .nth(1)
+  await page.getByTestId('delete-button').click();
-    .click();
   await page.getByRole('button', { name: 'Save' }).click();
-  await page.waitForTimeout(90);
+  await page.waitForTimeout(50);
   await page.waitForLoadState('networkidle');
 });
 

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(250);
-  await page.waitForTimeout(10);
   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');
 });

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

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

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

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

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

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

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

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 (
-    <div className={cn('bg-background rounded border', 'flex w-full flex-col')}>
+    <div
+      className={cn('bg-background rounded border', 'flex w-full flex-col')}
+      data-testid={dataTestId}>
       <CollapseDeleteHeader
         ref={ref}
         title={title}
@@ -165,6 +168,7 @@ const DropdownIcon: React.FC<{
         <Button
           size="small"
           onClick={onClickDeletePreflight}
+          data-testid="delete-button"
           className={cn(
             'flex items-center justify-center',
             'opacity-0 duration-200',
@@ -182,6 +186,7 @@ const DropdownIcon: React.FC<{
         size="small"
         className="flex"
         variant="ghost"
+        data-testid="toggle-dropdown-button"
         onClick={onClickToggleDropdown}
         prefix={
           <div

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowGoalLine.tsx

@@ -143,6 +143,7 @@ const EditGoalLineItem: React.FC<{
       title={
         goal.showGoalLineLabel ? goal.goalLineLabel || `Goal: ${goal.value}` : `Goal: ${goal.value}`
       }
+      dataTestId={`goal-line-${goal.id}`}
       onDelete={() => onDeleteGoalLine(goal.id)}>
       <GoalLineItemContent goal={goal} onUpdateExisitingGoalLine={onUpdateExisitingGoalLine} />
     </CollapseDelete>

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditTrendline/EditTrendline.tsx

@@ -219,6 +219,7 @@ const EditTrendlineItem: React.FC<{
     <CollapseDelete
       initialOpen={isNewTrend}
       title={title}
+      dataTestId={`trendline-${title}`}
       onDelete={() => onDeleteTrendline(trend.id)}>
       <TrendlineItemContent
         trend={trend}