From b4c24d250d86c3f14363ff2b1473813da4a8d243 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 22 Feb 2023 10:18:36 -0500 Subject: [PATCH] chore(): update merge conflict in tests --- .../checkbox/test/basic/checkbox.e2e.ts | 14 +- .../test/indeterminate/checkbox.e2e.ts | 8 +- .../components/input/test/basic/input.e2e.ts | 122 +----------------- .../components/range/test/a11y/range.e2e.ts | 34 ++--- .../components/range/test/basic/range.e2e.ts | 72 +---------- .../textarea/test/autogrow/textarea.e2e.ts | 34 +---- 6 files changed, 35 insertions(+), 249 deletions(-) diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts index e6d48ee2f5..f030656d7c 100644 --- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts @@ -8,17 +8,16 @@ test.describe('checkbox: basic visual tests', () => { `); const checkbox = page.locator('ion-checkbox'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-unchecked-${page.getSnapshotSettings()}.png`); + await expect(checkbox).toHaveScreenshot(`checkbox-unchecked-${page.getSnapshotSettings()}.png`); }); -<<<<<<< HEAD test('should render checked checkbox correctly', async ({ page }) => { await page.setContent(` Checked `); const checkbox = page.locator('ion-checkbox'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-checked-${page.getSnapshotSettings()}.png`); + await expect(checkbox).toHaveScreenshot(`checkbox-checked-${page.getSnapshotSettings()}.png`); }); test('should render disabled checkbox correctly', async ({ page }) => { @@ -27,7 +26,7 @@ test.describe('checkbox: basic visual tests', () => { `); const checkbox = page.locator('ion-checkbox'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-disabled-${page.getSnapshotSettings()}.png`); + await expect(checkbox).toHaveScreenshot(`checkbox-disabled-${page.getSnapshotSettings()}.png`); }); test('should render custom checkmark-width correctly', async ({ page }) => { @@ -36,7 +35,7 @@ test.describe('checkbox: basic visual tests', () => { `); const checkbox = page.locator('ion-checkbox'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-checkmark-width-${page.getSnapshotSettings()}.png`); + await expect(checkbox).toHaveScreenshot(`checkbox-checkmark-width-${page.getSnapshotSettings()}.png`); }); test('should render custom size correctly', async ({ page }) => { @@ -45,7 +44,7 @@ test.describe('checkbox: basic visual tests', () => { `); const checkbox = page.locator('ion-checkbox'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-size-${page.getSnapshotSettings()}.png`); + await expect(checkbox).toHaveScreenshot(`checkbox-size-${page.getSnapshotSettings()}.png`); }); }); @@ -97,8 +96,5 @@ test.describe('checkbox: ionChange', () => { await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true)); expect(ionChange).not.toHaveReceivedEvent(); -======= - await expect(page).toHaveScreenshot(`checkbox-basic-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main }); }); diff --git a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts index 96f93dec88..9d7fb1d820 100644 --- a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts @@ -7,13 +7,7 @@ test.describe('checkbox: indeterminate', () => { await page.goto(`/src/components/checkbox/test/indeterminate`); -<<<<<<< HEAD const checkbox = page.locator('ion-checkbox:first-child'); - expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`); -======= - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main + await expect(checkbox).toHaveScreenshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`); }); }); diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts index dc4aa20c67..973c91e1bc 100644 --- a/core/src/components/input/test/basic/input.e2e.ts +++ b/core/src/components/input/test/basic/input.e2e.ts @@ -9,11 +9,7 @@ test.describe('input: basic', () => { `); const input = page.locator('ion-input'); // Validates the display of an input where text extends off the edge of the component. -<<<<<<< HEAD - expect(await input.screenshot()).toMatchSnapshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`); -======= - await expect(item).toHaveScreenshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main + await expect(input).toHaveScreenshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`); }); }); test.describe('input with placeholder', () => { @@ -23,111 +19,7 @@ test.describe('input: basic', () => { `); const input = page.locator('ion-input'); // Validates the display of an input with a placeholder. -<<<<<<< HEAD - expect(await input.screenshot()).toMatchSnapshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`); -======= - await expect(item).toHaveScreenshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`); - }); - }); - - test.describe('input disabled', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - - - - - `); - const item = page.locator('ion-item'); - // Validates the display of an input in a disabled state. - await expect(item).toHaveScreenshot(`input-disabled-${page.getSnapshotSettings()}.png`); - }); - }); - - test.describe('input with lines="full"', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - - - - - `); - const item = page.locator('ion-item'); - const input = page.locator('ion-input'); - // Validates the display of an input with an ion-item using lines="full". - await expect(item).toHaveScreenshot(`input-with-lines-full-${page.getSnapshotSettings()}.png`); - - await input.click(); - - // Verifies that the parent item receives .item-has-focus when the input is focused. - await expect(item).toHaveClass(/item-has-focus/); - // Validates the display of an input with an ion-item using lines="full" when focused. - await expect(item).toHaveScreenshot(`input-with-lines-full-focused-${page.getSnapshotSettings()}.png`, { - animations: 'disabled', - }); - }); - }); - - test.describe('input with lines="inset"', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - - - - - `); - const item = page.locator('ion-item'); - const input = page.locator('ion-input'); - // Validates the display of an input with an ion-item using lines="inset". - await expect(item).toHaveScreenshot(`input-with-lines-inset-${page.getSnapshotSettings()}.png`); - - await input.click(); - - // Verifies that the parent item receives .item-has-focus when the input is focused. - await expect(item).toHaveClass(/item-has-focus/); - - // Validates the display of an input with an ion-item using lines="inset" when focused. - await expect(item).toHaveScreenshot(`input-with-lines-inset-focused-${page.getSnapshotSettings()}.png`, { - animations: 'disabled', - }); - }); - }); - - test.describe('input with lines="none"', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - - - - - `); - const item = page.locator('ion-item'); - const input = page.locator('ion-input'); - // Validates the display of an input with an ion-item using lines="none". - await expect(item).toHaveScreenshot(`input-with-lines-none-${page.getSnapshotSettings()}.png`); - - await input.click(); - - // Verifies that the parent item receives .item-has-focus when the input is focused. - await expect(item).toHaveClass(/item-has-focus/); - - // Validates the display of an input with an ion-item using lines="none" when focused. - await expect(item).toHaveScreenshot(`input-with-lines-none-focused-${page.getSnapshotSettings()}.png`, { - animations: 'disabled', - }); ->>>>>>> origin/main + await expect(input).toHaveScreenshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`); }); }); @@ -142,8 +34,7 @@ test.describe('input: basic', () => { `); const input = page.locator('ion-input'); // Validates the display of an input with a clear button. -<<<<<<< HEAD - expect(await input.screenshot()).toMatchSnapshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`); + await expect(input).toHaveScreenshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`); }); test('should not have visual regressions with stacked label', async ({ page }) => { await page.setContent(` @@ -156,12 +47,7 @@ test.describe('input: basic', () => { `); const input = page.locator('ion-input'); // Validates the display of an input with a clear button. - expect(await input.screenshot()).toMatchSnapshot( - `input-with-clear-button-stacked-${page.getSnapshotSettings()}.png` - ); -======= - await expect(item).toHaveScreenshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main + await expect(input).toHaveScreenshot(`input-with-clear-button-stacked-${page.getSnapshotSettings()}.png`); }); }); }); diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts index f4288dd2cf..444f8b590d 100644 --- a/core/src/components/range/test/a11y/range.e2e.ts +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -3,11 +3,23 @@ import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; test.describe('range: a11y', () => { - test.beforeEach(async ({ skip }) => { + test('should not have accessibility violations', async ({ page, skip }) => { skip.rtl(); -<<<<<<< HEAD skip.mode('md'); -======= + + await page.goto(`/src/components/range/test/a11y`); + + /** + * Axe does not take elements into account + * when checking color-contrast. As a result, it will + * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329 + */ + const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze(); + expect(results.violations).toEqual([]); + }); + + test('should not have visual regressions', async ({ page, skip }) => { + skip.rtl(); skip.mode('ios', 'iOS mode does not display hover/active/focus styles.'); await page.setContent( @@ -36,21 +48,12 @@ test.describe('range: a11y', () => { await page.waitForChanges(); await expect(range).toHaveScreenshot(`range-active-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main }); - test('should not have accessibility violations', async ({ page }) => { - await page.goto(`/src/components/range/test/a11y`); + test.describe('with pin', () => { + test('should not have visual regressions', async ({ page, skip }) => { + skip.rtl(); -<<<<<<< HEAD - /** - * Axe does not take elements into account - * when checking color-contrast. As a result, it will - * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329 - */ - const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze(); - expect(results.violations).toEqual([]); -======= await page.setContent( ` @@ -68,6 +71,5 @@ test.describe('range: a11y', () => { await expect(range).toHaveScreenshot(`range-focus-with-pin-${page.getSnapshotSettings()}.png`); }); ->>>>>>> origin/main }); }); diff --git a/core/src/components/range/test/basic/range.e2e.ts b/core/src/components/range/test/basic/range.e2e.ts index c7bbf9b69d..33157daaf3 100644 --- a/core/src/components/range/test/basic/range.e2e.ts +++ b/core/src/components/range/test/basic/range.e2e.ts @@ -2,84 +2,22 @@ import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; test.describe('range: basic', () => { -<<<<<<< HEAD test.beforeEach(async ({ skip, page }) => { -======= - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/range/test/basic`); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(`range-diff-${page.getSnapshotSettings()}.png`); - }); - - /** - * The mouse events are flaky on CI - * TODO FW-2873 - */ - test.fixme('should emit start/end events', async ({ page }, testInfo) => { - await page.setContent(``); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - - const rangeEl = page.locator('ion-range'); - - await dragElementBy(rangeEl, page, testInfo.project.metadata.rtl ? -300 : 300, 0); - await page.waitForChanges(); - - /** - * dragElementBy defaults to starting the drag from the middle of the el, - * so the start value should jump to 50 despite the range defaulting to 20. - */ - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 100 }); - - /** - * Verify both events fire if range is clicked without dragging. - */ - await dragElementBy(rangeEl, page, 0, 0); - await page.waitForChanges(); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 50 }); - }); - - test('should emit start/end events, keyboard', async ({ page }) => { - await page.setContent(``); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - - await page.keyboard.press('Tab'); // focus first range - await page.keyboard.press('ArrowRight'); - - await rangeStart.next(); - await rangeEnd.next(); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 20 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 }); - }); - - // TODO FW-2873 - test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => { - skip.browser('webkit', 'mouse.wheel is not available in WebKit'); ->>>>>>> origin/main skip.rtl(); await page.goto('/src/components/range/test/basic'); }); test('should render default range', async ({ page }) => { const range = page.locator('ion-range.default'); - expect(await range.screenshot()).toMatchSnapshot(`range-default-${page.getSnapshotSettings()}.png`); + await expect(range).toHaveScreenshot(`range-default-${page.getSnapshotSettings()}.png`); }); test('should render dual knob range', async ({ page }) => { const range = page.locator('ion-range.dual-knobs'); - expect(await range.screenshot()).toMatchSnapshot(`range-dual-knobs-${page.getSnapshotSettings()}.png`); + await expect(range).toHaveScreenshot(`range-dual-knobs-${page.getSnapshotSettings()}.png`); }); test('should render range with ticks', async ({ page }) => { const range = page.locator('ion-range.ticks'); - expect(await range.screenshot()).toMatchSnapshot(`range-ticks-${page.getSnapshotSettings()}.png`); + await expect(range).toHaveScreenshot(`range-ticks-${page.getSnapshotSettings()}.png`); }); test('should render pin', async ({ page }) => { const range = page.locator('ion-range.pin'); @@ -88,8 +26,6 @@ test.describe('range: basic', () => { // Force the pin to show await knob.evaluate((el: HTMLElement) => el.classList.add('ion-focused')); - expect(await range.screenshot({ animations: 'disabled' })).toMatchSnapshot( - `range-pin-${page.getSnapshotSettings()}.png` - ); + await expect(range).toHaveScreenshot(`range-pin-${page.getSnapshotSettings()}.png`, { animations: 'disabled' }); }); }); diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/autogrow/textarea.e2e.ts index b8ac697701..36a6955179 100644 --- a/core/src/components/textarea/test/autogrow/textarea.e2e.ts +++ b/core/src/components/textarea/test/autogrow/textarea.e2e.ts @@ -11,20 +11,8 @@ test.describe('textarea: autogrow', () => { }); test('should grow when typing', async ({ page }) => { -<<<<<<< HEAD - await page.setContent( - ` - - - - - - - ` - ); -======= await page.setContent(` - + `); const ionTextarea = page.locator('ion-textarea'); @@ -33,21 +21,8 @@ test.describe('textarea: autogrow', () => { await nativeTextarea.type('Now, this is a story all about how'); await expect(ionTextarea).toHaveScreenshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main - const textarea = await page.waitForSelector('ion-textarea'); - - await textarea.click(); - - await page.waitForChanges(); - - await textarea.type('Now, this is a story all about how'); - - await page.setIonViewport(); - - expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`); - - await textarea.type( + await nativeTextarea.type( [ `\nMy life got flipped-turned upside down`, `And I'd like to take a minute`, @@ -56,11 +31,7 @@ test.describe('textarea: autogrow', () => { ].join('\n') ); -<<<<<<< HEAD - expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`); -======= await expect(ionTextarea).toHaveScreenshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`); ->>>>>>> origin/main }); test('should break long lines without white space', async ({ page }) => { @@ -73,6 +44,7 @@ test.describe('textarea: autogrow', () => { `