test(table): move non-screenshot tests to not run for all style confi…

…gurations
scania-digital-design-system · Jan 13, 2025 · f954cc9 · f954cc9
1 parent a5ba538
commit f954cc9
Show file tree

Hide file tree

Showing 13 changed files with 274 additions and 209 deletions.
diff --git a/...2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png b/...2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts b/packages/core/src/components/table/table/test/batch/table.e2e.ts
@@ -23,17 +23,23 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff on screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('table has a settings button', async ({ page }) => {
-      const tdsTableToolbarSettings = page.getByRole('img');
-      await expect(tdsTableToolbarSettings).toHaveCount(1);
-      await expect(tdsTableToolbarSettings).toBeVisible();
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    test('table has a [Download] button', async ({ page }) => {
-      const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
-      await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
-      await expect(tdsTableToolbarDownloadButton).toBeVisible();
-    });
+  test('table has a settings button', async ({ page }) => {
+    const tdsTableToolbarSettings = page.getByRole('img');
+    await expect(tdsTableToolbarSettings).toHaveCount(1);
+    await expect(tdsTableToolbarSettings).toBeVisible();
+  });
+
+  test('table has a [Download] button', async ({ page }) => {
+    const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
+    await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
+    await expect(tdsTableToolbarDownloadButton).toBeVisible();
   });
 });
diff --git a/...omponents/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts b/...omponents/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts
@@ -31,17 +31,23 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff of screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
     });
+  });
+});
 
-    test('expect slotted input to show search icon on hover', async ({ page }) => {
-      const inputfield = page.getByTestId('firstHeaderInput');
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-      await inputfield.hover();
+  test('expect slotted input to show search icon on hover', async ({ page }) => {
+    const inputfield = page.getByTestId('firstHeaderInput');
 
-      // finding wrapper component after hover over slotted input
-      const icon = page.getByTestId('firstHeaderWrapper').locator('tds-icon');
-      let iconClass = await icon.evaluate((element: HTMLInputElement) => element.className);
+    await inputfield.hover();
 
-      expect(iconClass).toContain('search-icon');
-    });
+    // finding wrapper component after hover over slotted input
+    const icon = page.getByTestId('firstHeaderWrapper').locator('tds-icon');
+    let iconClass = await icon.evaluate((element: HTMLInputElement) => element.className);
+
+    expect(iconClass).toContain('search-icon');
   });
 });
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts b/packages/core/src/components/table/table/test/default/table.e2e.ts
@@ -23,40 +23,46 @@ testConfigurations.withModeVariants.forEach((config) => {
       /** Check screenshot diff */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('table has four columns', async ({ page }) => {
-      const tableHeaderCells = page.locator('tds-header-cell');
-      await expect(tableHeaderCells).toHaveCount(4);
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
-      /* Expect each header to be visible */
-      await expect(page.getByText('Truck type')).toBeVisible();
-      await expect(page.getByText('Driver name')).toBeVisible();
-      await expect(page.getByText('Country')).toBeVisible();
-      await expect(page.getByText('Mileage')).toBeVisible();
-    });
+  test('table has four columns', async ({ page }) => {
+    const tableHeaderCells = page.locator('tds-header-cell');
+    await expect(tableHeaderCells).toHaveCount(4);
+  });
 
-    test('Row should contain the correct number of rows with', async ({ page }) => {
-      /* Expect the number of rows to be correct amount */
-      const tableBodyRows = page.locator('tds-table-body-row');
-      await expect(tableBodyRows).toHaveCount(6);
-    });
+  test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
+    /* Expect each header to be visible */
+    await expect(page.getByText('Truck type')).toBeVisible();
+    await expect(page.getByText('Driver name')).toBeVisible();
+    await expect(page.getByText('Country')).toBeVisible();
+    await expect(page.getByText('Mileage')).toBeVisible();
+  });
 
-    test('table has the correct text inside each cell', async ({ page }) => {
-      /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
-      const promises = [];
-      for (let i = 1; i <= 8; i++) {
-        const tableBodyCellHasText = page
-          .locator('tds-body-cell')
-          .filter({ hasText: `Test value ${i}` });
-        promises.push(expect(tableBodyCellHasText).toHaveCount(3));
-        promises.push(expect(tableBodyCellHasText.first()).toBeVisible());
-        promises.push(expect(tableBodyCellHasText.nth(1)).toBeVisible());
-        promises.push(expect(tableBodyCellHasText.nth(2)).toBeVisible());
-      }
-
-      await Promise.all(promises);
-    });
+  test('Row should contain the correct number of rows with', async ({ page }) => {
+    /* Expect the number of rows to be correct amount */
+    const tableBodyRows = page.locator('tds-table-body-row');
+    await expect(tableBodyRows).toHaveCount(6);
+  });
+
+  test('table has the correct text inside each cell', async ({ page }) => {
+    /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
+    const promises = [];
+    for (let i = 1; i <= 8; i++) {
+      const tableBodyCellHasText = page
+        .locator('tds-body-cell')
+        .filter({ hasText: `Test value ${i}` });
+      promises.push(expect(tableBodyCellHasText).toHaveCount(3));
+      promises.push(expect(tableBodyCellHasText.first()).toBeVisible());
+      promises.push(expect(tableBodyCellHasText.nth(1)).toBeVisible());
+      promises.push(expect(tableBodyCellHasText.nth(2)).toBeVisible());
+    }
+
+    await Promise.all(promises);
   });
 });
diff --git a/.../core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts b/.../core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts
@@ -33,17 +33,23 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff of screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
     });
+  });
+});
 
-    test('expect slotted input to show pen icon on hover', async ({ page }) => {
-      const inputfield = page.getByTestId('firstInput');
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-      await inputfield.hover();
+  test('expect slotted input to show pen icon on hover', async ({ page }) => {
+    const inputfield = page.getByTestId('firstInput');
 
-      // finding wrapper component after hover over slotted input
-      const icon = page.getByTestId('firstWrapper').locator('tds-icon');
-      let iconClass = await icon.evaluate((element: HTMLInputElement) => element.className);
+    await inputfield.hover();
 
-      expect(iconClass).toContain('edit-icon');
-    });
+    // finding wrapper component after hover over slotted input
+    const icon = page.getByTestId('firstWrapper').locator('tds-icon');
+    let iconClass = await icon.evaluate((element: HTMLInputElement) => element.className);
+
+    expect(iconClass).toContain('edit-icon');
   });
 });
diff --git a/...re/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts b/...re/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts
@@ -48,16 +48,26 @@ testConfigurations.withModeVariants.forEach((config) => {
       await expect(tableBodyExpandableRowSlot).toBeHidden();
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('has a set rowId attribute', async ({ page }) => {
-      const tableRow = page.locator('tds-table-body-row-expandable').first();
-      const rowId = await tableRow.getAttribute('row-id');
-      expect(rowId).toBe('1');
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
 
-    test('has a randomly generated rowId attribute', async ({ page }) => {
-      const tableRow = page.locator('tds-table-body-row-expandable').last();
-      await expect(tableRow).toHaveAttribute('row-id');
-    });
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    await tableComponent.waitFor({ state: 'visible' });
+  });
+
+  test('has a set rowId attribute', async ({ page }) => {
+    const tableRow = page.locator('tds-table-body-row-expandable').first();
+    const rowId = await tableRow.getAttribute('row-id');
+    expect(rowId).toBe('1');
+  });
+
+  test('has a randomly generated rowId attribute', async ({ page }) => {
+    const tableRow = page.locator('tds-table-body-row-expandable').last();
+    await expect(tableRow).toHaveAttribute('row-id');
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts
@@ -1,34 +1,26 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
-import {
-  testConfigurations,
-  getTestDescribeText,
-  setupPage,
-} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
-const componentName = 'tds-table';
 const testDescription = 'tds-table-expandable-row-double-click-first';
 
-testConfigurations.withModeVariants.forEach((config) => {
-  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
-    test.beforeEach(async ({ page }) => {
-      await setupPage(page, config, componentTestPath, componentName);
-    });
+test.describe.parallel(testDescription, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    test('double click on expand button in first row -> expanded row should be closed', async ({
-      page,
-    }) => {
-      const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-      await tableBodyRowFirstInput.dblclick();
+  test('double click on expand button in first row -> expanded row should be closed', async ({
+    page,
+  }) => {
+    const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
+    await tableBodyRowFirstInput.dblclick();
 
-      const tableBodyFirstExpandableRowSlot = page.getByText(/Hello world 1/);
-      const tableBodySecondExpandableRowSlot = page.getByText(/Hello to you too/);
-      const tableBodyThirdExpandableRowSlot = page.getByText(/Call to action/);
+    const tableBodyFirstExpandableRowSlot = page.getByText(/Hello world 1/);
+    const tableBodySecondExpandableRowSlot = page.getByText(/Hello to you too/);
+    const tableBodyThirdExpandableRowSlot = page.getByText(/Call to action/);
 
-      await expect(tableBodyFirstExpandableRowSlot).toBeHidden();
-      await expect(tableBodySecondExpandableRowSlot).toBeHidden();
-      await expect(tableBodyThirdExpandableRowSlot).toBeHidden();
-    });
+    await expect(tableBodyFirstExpandableRowSlot).toBeHidden();
+    await expect(tableBodySecondExpandableRowSlot).toBeHidden();
+    await expect(tableBodyThirdExpandableRowSlot).toBeHidden();
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts
@@ -25,10 +25,21 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* check of diff in component screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
     });
+  });
+});
 
-    test('each row has expand checkbox', async ({ page }) => {
-      const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
-      await expect(tableBodyRowsExpandInput).toHaveCount(3);
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    // Wait for the component to be visible
+    await tableComponent.waitFor({ state: 'visible' });
+  });
+
+  test('each row has expand checkbox', async ({ page }) => {
+    const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
+    await expect(tableBodyRowsExpandInput).toHaveCount(3);
   });
 });
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts b/packages/core/src/components/table/table/test/filtering/table.e2e.ts
@@ -23,18 +23,24 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff of screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
     });
+  });
+});
 
-    test('table has header "Filter"', async ({ page }) => {
-      /* Search for header by text and see if it exists */
-      const tdsTableToolbarCaption = page.getByText('Filter');
-      await expect(tdsTableToolbarCaption).toHaveCount(1);
-      await expect(tdsTableToolbarCaption).toBeVisible();
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    test('search button inside the header exists', async ({ page }) => {
-      const tdsTableToolbarSearchIcon = page.getByRole('img');
-      await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
-      await expect(tdsTableToolbarSearchIcon).toBeVisible();
-    });
+  test('table has header "Filter"', async ({ page }) => {
+    /* Search for header by text and see if it exists */
+    const tdsTableToolbarCaption = page.getByText('Filter');
+    await expect(tdsTableToolbarCaption).toHaveCount(1);
+    await expect(tdsTableToolbarCaption).toBeVisible();
+  });
+
+  test('search button inside the header exists', async ({ page }) => {
+    const tdsTableToolbarSearchIcon = page.getByRole('img');
+    await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
+    await expect(tdsTableToolbarSearchIcon).toBeVisible();
   });
 });
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts
@@ -24,24 +24,6 @@ testConfigurations.withModeVariants.forEach((config) => {
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
 
-    test('table header contains checkbox', async ({ page }) => {
-      const tableHeaderCheckbox = page.getByRole('checkbox').first();
-      await expect(tableHeaderCheckbox).toHaveCount(1);
-      await expect(tableHeaderCheckbox).toBeVisible();
-    });
-
-    test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
-      const tableBodyRowCheckboxes = page.getByRole('checkbox');
-      await expect(tableBodyRowCheckboxes).toHaveCount(5);
-
-      /* Check if each checkbox is visible */
-      const promises = [];
-      for (let i = 0; i < 5; i++) {
-        promises.push(expect(tableBodyRowCheckboxes.nth(i)).toBeVisible());
-      }
-      await Promise.all(promises);
-    });
-
     test('can check every checkbox in the table', async ({ page }) => {
       const tableCheckboxes = page.getByRole('cell');
       await expect(tableCheckboxes).toHaveCount(5);
@@ -65,3 +47,27 @@ testConfigurations.withModeVariants.forEach((config) => {
     });
   });
 });
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('table header contains checkbox', async ({ page }) => {
+    const tableHeaderCheckbox = page.getByRole('checkbox').first();
+    await expect(tableHeaderCheckbox).toHaveCount(1);
+    await expect(tableHeaderCheckbox).toBeVisible();
+  });
+
+  test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
+    const tableBodyRowCheckboxes = page.getByRole('checkbox');
+    await expect(tableBodyRowCheckboxes).toHaveCount(5);
+
+    /* Check if each checkbox is visible */
+    const promises = [];
+    for (let i = 0; i < 5; i++) {
+      promises.push(expect(tableBodyRowCheckboxes.nth(i)).toBeVisible());
+    }
+    await Promise.all(promises);
+  });
+});