javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): update merge conflict in tests

Browse Source
This commit is contained in:
Liam DeBeasi
2023-02-22 10:18:36 -05:00
parent 799871e95d
commit b4c24d250d
6 changed files with 35 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/checkbox/test/basic/checkbox.e2e.ts
View File

@ -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(`
<ion-checkbox checked>Checked</ion-checkbox>
`);
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
});
});

8
core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
View File

@ -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`);
});
});

122
core/src/components/input/test/basic/input.e2e.ts
View File

@ -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(`
<ion-content>
<ion-list>
<ion-item>
<ion-input value="Input disabled" disabled></ion-input>
</ion-item>
</ion-list>
</ion-content>
`);
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(`
<ion-content>
<ion-list>
<ion-item lines="full">
<ion-input placeholder="Full"></ion-input>
</ion-item>
</ion-list>
</ion-content>
`);
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(`
<ion-content>
<ion-list>
<ion-item lines="inset">
<ion-input placeholder="Inset"></ion-input>
</ion-item>
</ion-list>
</ion-content>
`);
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(`
<ion-content>
<ion-list>
<ion-item lines="none">
<ion-input placeholder="None"></ion-input>
</ion-item>
</ion-list>
</ion-content>
`);
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`);
});
});
});

34
core/src/components/range/test/a11y/range.e2e.ts
View File

@ -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 <slot> 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 <slot> 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(
`<ion-app>
<ion-content>
@ -68,6 +71,5 @@ test.describe('range: a11y', () => {
await expect(range).toHaveScreenshot(`range-focus-with-pin-${page.getSnapshotSettings()}.png`);
});
>>>>>>> origin/main
});
});

72
core/src/components/range/test/basic/range.e2e.ts
View File

@ -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(`<ion-range value="20"></ion-range>`);
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(`<ion-range value="20"></ion-range>`);
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' });
});
});

34
core/src/components/textarea/test/autogrow/textarea.e2e.ts
View File

@ -11,20 +11,8 @@ test.describe('textarea: autogrow', () => {
});
test('should grow when typing', async ({ page }) => {
<<<<<<< HEAD
await page.setContent(
`
<ion-app>
<ion-content>
<ion-list>
<ion-textarea auto-grow="true"></ion-textarea>
</ion-list>
</ion-content>
</ion-app>`
);
=======
await page.setContent(`
<ion-textarea auto-grow="true"></ion-textarea>
<ion-textarea aria-label="Textarea" auto-grow="true"></ion-textarea>
`);
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', () => {
`<ion-app>
<ion-content>
<ion-textarea
aria-label="Textarea"
auto-grow="true"
value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
</ion-textarea>