From fda7c0345e042851d627b822ce030cb738516539 Mon Sep 17 00:00:00 2001 From: Max Skanvik <179694889+max-umain@users.noreply.github.com> Date: Tue, 17 Dec 2024 09:33:59 +0100 Subject: [PATCH] test(slider): refactor tests to use beforeEach for page navigation --- .../slider/test/default/darkmode/slider.e2e.ts | 5 ++++- .../slider/test/default/lightmode/slider.e2e.ts | 12 ++++-------- .../components/slider/test/disabled/slider.e2e.ts | 8 +++++--- .../components/slider/test/read-only/slider.e2e.ts | 8 +++++--- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/slider/test/default/darkmode/slider.e2e.ts b/packages/core/src/components/slider/test/default/darkmode/slider.e2e.ts index 8970ed346..d98e3dd3a 100644 --- a/packages/core/src/components/slider/test/default/darkmode/slider.e2e.ts +++ b/packages/core/src/components/slider/test/default/darkmode/slider.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/slider/test/default/darkmode/index.html'; test.describe.parallel('tds-slider-default-darkmode', () => { - test('renders default slider correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders default slider correctly', async ({ page }) => { const slider = page.locator('tds-slider'); await expect(slider).toHaveCount(1); diff --git a/packages/core/src/components/slider/test/default/lightmode/slider.e2e.ts b/packages/core/src/components/slider/test/default/lightmode/slider.e2e.ts index 552348ccb..c95044c25 100644 --- a/packages/core/src/components/slider/test/default/lightmode/slider.e2e.ts +++ b/packages/core/src/components/slider/test/default/lightmode/slider.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/slider/test/default/lightmode/index.html'; test.describe.parallel('tds-slider-default-lightmode', () => { - test('renders default slider correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders default slider correctly', async ({ page }) => { const slider = page.locator('tds-slider'); await expect(slider).toHaveCount(1); @@ -14,13 +17,11 @@ test.describe.parallel('tds-slider-default-lightmode', () => { }); test('value is set to 50', async ({ page }) => { - await page.goto(componentTestPath); const sliderValue = page.locator('.tds-slider__value'); await expect(sliderValue).toHaveText('50'); }); test('min value is set to 0', async ({ page }) => { - await page.goto(componentTestPath); /* Find thumb and pull it towards a left and check if min value is 0 */ await page.locator('.tds-slider__thumb-inner').hover(); await page.mouse.down(); @@ -33,7 +34,6 @@ test.describe.parallel('tds-slider-default-lightmode', () => { }); test('max value is set to 100', async ({ page }) => { - await page.goto(componentTestPath); /* Find thumb and pull it towards a right and check if min value is 0 */ await page.locator('.tds-slider__thumb-inner').hover(); await page.mouse.down(); @@ -46,15 +46,12 @@ test.describe.parallel('tds-slider-default-lightmode', () => { }); test('label is hidden', async ({ page }) => { - await page.goto(componentTestPath); const slider = page.locator('tds-slider'); const sliderLabel = slider.locator('label'); await expect(sliderLabel).toHaveText(''); }); test('slider is not read only or disabled', async ({ page }) => { - await page.goto(componentTestPath); - /* Find thumb and pull it towards a left and check if value in thumb is changing */ await page.locator('.tds-slider__thumb-inner').hover(); await page.mouse.down(); @@ -67,7 +64,6 @@ test.describe.parallel('tds-slider-default-lightmode', () => { }); test('thumb is size large', async ({ page }) => { - await page.goto(componentTestPath); const sliderThumb = page.locator('.tds-slider__thumb-inner'); const sliderThumbWidth = await sliderThumb.evaluate((style) => getComputedStyle(style).width); const sliderThumbHeight = await sliderThumb.evaluate((style) => getComputedStyle(style).height); diff --git a/packages/core/src/components/slider/test/disabled/slider.e2e.ts b/packages/core/src/components/slider/test/disabled/slider.e2e.ts index cc9b21860..97a5d4cef 100644 --- a/packages/core/src/components/slider/test/disabled/slider.e2e.ts +++ b/packages/core/src/components/slider/test/disabled/slider.e2e.ts @@ -2,15 +2,18 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; const componentTestPath = 'src/components/slider/test/disabled/index.html'; + test.describe.parallel('tds-slider-disabled', () => { - test('read-only is false', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('read-only is false', async ({ page }) => { const slider = page.locator('tds-slider'); await expect(slider).not.toHaveAttribute('read-only'); }); test('slider is disabled', async ({ page }) => { - await page.goto(componentTestPath); const slider = page.locator('tds-slider input'); const sliderThumb = page.locator('.tds-slider__thumb'); const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor); @@ -21,7 +24,6 @@ test.describe.parallel('tds-slider-disabled', () => { }); test('slider can not be clicked on', async ({ page }) => { - await page.goto(componentTestPath); const sliderThumb = page.locator('.tds-slider__thumb-inner'); const sliderPointerEvents = await sliderThumb.evaluate( (style) => getComputedStyle(style).pointerEvents, diff --git a/packages/core/src/components/slider/test/read-only/slider.e2e.ts b/packages/core/src/components/slider/test/read-only/slider.e2e.ts index 54b01663a..caded9845 100644 --- a/packages/core/src/components/slider/test/read-only/slider.e2e.ts +++ b/packages/core/src/components/slider/test/read-only/slider.e2e.ts @@ -2,15 +2,18 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; const componentTestPath = 'src/components/slider/test/read-only/index.html'; + test.describe.parallel('tds-slider-read-only', () => { - test('read-only is true', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('read-only is true', async ({ page }) => { const slider = page.locator('tds-slider'); await expect(slider).toHaveAttribute('read-only'); }); test('is not disabled', async ({ page }) => { - await page.goto(componentTestPath); const sliderThumb = page.locator('.tds-slider__thumb-inner'); const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor); expect(sliderCursorStyle).toBe('pointer'); @@ -19,7 +22,6 @@ test.describe.parallel('tds-slider-read-only', () => { }); test('slider can not be clicked on', async ({ page }) => { - await page.goto(componentTestPath); const sliderThumb = page.locator('.tds-slider__thumb-inner'); const sliderThumbStyle = await sliderThumb.evaluate( (style) => getComputedStyle(style).pointerEvents,