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

…figurations
scania-digital-design-system · Jan 14, 2025 · 61829c0 · 61829c0
1 parent 14c7cbe
commit 61829c0
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 50 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/tooltip/test/click/tooltip.e2e.ts b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts
@@ -19,18 +19,6 @@ testConfigurations.basic.forEach((config) => {
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
 
-    test('Should not appear on hover', async ({ page }) => {
-      // Select the button that triggers the tooltip on click
-      const button = page.locator('tds-button#button-3');
-
-      await button.hover();
-
-      const tooltipText = page.locator('text=Text inside Tooltip');
-
-      // Assert that the tooltip is visible after clicking the button
-      await expect(tooltipText).toBeHidden();
-    });
-
     test('Should appears on button click', async ({ page }) => {
       // Select the button that triggers the tooltip on click
       const button = page.locator('tds-button#button-3');
@@ -44,32 +32,50 @@ testConfigurations.basic.forEach((config) => {
 
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('Should contain correct HTML content on click', async ({ page }) => {
-      // Hover over the button to trigger the tooltip
-      const button = page.locator('tds-button#button-3');
-      await button.click();
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-      const tooltipParagraph = page.locator('.tooltip-paragraph');
+  test('Should not appear on hover', async ({ page }) => {
+    // Select the button that triggers the tooltip on click
+    const button = page.locator('tds-button#button-3');
 
-      // Verify the paragraph is visible as part of the tooltip
-      await expect(tooltipParagraph).toBeVisible();
+    await button.hover();
 
-      // Fetch the inner HTML of the tooltip paragraph
-      let innerHtml = await tooltipParagraph.innerHTML();
+    const tooltipText = page.locator('text=Text inside Tooltip');
 
-      // Remove class attributes from the inner HTML for comparison
-      innerHtml = innerHtml.replace(/ class="[^"]*"/g, '').trim();
+    // Assert that the tooltip is visible after clicking the button
+    await expect(tooltipText).toBeHidden();
+  });
 
-      // Normalize whitespace in the inner HTML for comparison
-      innerHtml = innerHtml.replace(/\s+/g, ' ').trim();
+  test('Should contain correct HTML content on click', async ({ page }) => {
+    // Hover over the button to trigger the tooltip
+    const button = page.locator('tds-button#button-3');
+    await button.click();
 
-      // Define the expected HTML content, ensuring to trim any potential whitespace for a precise match
-      const expectedHtmlContent =
-        'Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too.';
+    const tooltipParagraph = page.locator('.tooltip-paragraph');
 
-      // Perform the comparison to verify the tooltip's content
-      expect(innerHtml).toEqual(expectedHtmlContent);
-    });
+    // Verify the paragraph is visible as part of the tooltip
+    await expect(tooltipParagraph).toBeVisible();
+
+    // Fetch the inner HTML of the tooltip paragraph
+    let innerHtml = await tooltipParagraph.innerHTML();
+
+    // Remove class attributes from the inner HTML for comparison
+    innerHtml = innerHtml.replace(/ class="[^"]*"/g, '').trim();
+
+    // Normalize whitespace in the inner HTML for comparison
+    innerHtml = innerHtml.replace(/\s+/g, ' ').trim();
+
+    // Define the expected HTML content, ensuring to trim any potential whitespace for a precise match
+    const expectedHtmlContent =
+      'Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too.';
+
+    // Perform the comparison to verify the tooltip's content
+    expect(innerHtml).toEqual(expectedHtmlContent);
   });
 });
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts
@@ -33,32 +33,38 @@ testConfigurations.basic.forEach((config) => {
 
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('tooltip contains correct HTML content on hover', async ({ page }) => {
-      // Hover over the button to trigger the tooltip
-      const button = page.locator('tds-button#button-1');
-      await button.hover();
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-      const tooltipParagraph = page.locator('.tooltip-paragraph');
+  test('tooltip contains correct HTML content on hover', async ({ page }) => {
+    // Hover over the button to trigger the tooltip
+    const button = page.locator('tds-button#button-1');
+    await button.hover();
 
-      // Verify the paragraph is visible as part of the tooltip
-      await expect(tooltipParagraph).toBeVisible();
+    const tooltipParagraph = page.locator('.tooltip-paragraph');
 
-      // Fetch the inner HTML of the tooltip paragraph
-      let innerHtml = await tooltipParagraph.innerHTML();
+    // Verify the paragraph is visible as part of the tooltip
+    await expect(tooltipParagraph).toBeVisible();
 
-      // Normalize whitespace in the inner HTML for comparison
-      innerHtml = innerHtml.replace(/\s+/g, ' ').trim();
+    // Fetch the inner HTML of the tooltip paragraph
+    let innerHtml = await tooltipParagraph.innerHTML();
 
-      // Remove class attributes from the inner HTML
-      innerHtml = innerHtml.replace(/ class="[^"]*"/g, '');
+    // Normalize whitespace in the inner HTML for comparison
+    innerHtml = innerHtml.replace(/\s+/g, ' ').trim();
 
-      // Define the expected HTML content, ensuring to trim any potential whitespace for a precise match
-      const expectedHtmlContent =
-        'Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too.';
+    // Remove class attributes from the inner HTML
+    innerHtml = innerHtml.replace(/ class="[^"]*"/g, '');
 
-      // Perform the comparison to verify the tooltip's content
-      expect(innerHtml).toEqual(expectedHtmlContent);
-    });
+    // Define the expected HTML content, ensuring to trim any potential whitespace for a precise match
+    const expectedHtmlContent =
+      'Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too.';
+
+    // Perform the comparison to verify the tooltip's content
+    expect(innerHtml).toEqual(expectedHtmlContent);
   });
 });