javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(reorder): migrate to generators (#27371)

Browse Source 
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Reorder tests are using legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reorder tests are using generator syntax

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
2023-05-04 08:45:31 -04:00
committed by GitHub
parent f402d8e052
commit 4db9e7d091
8 changed files with 164 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/src/components/reorder-group/test/basic/reorder-group.e2e-legacy.ts
View File

@@ -1,33 +0,0 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('reorder group: basic', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
skip.mode('ios', 'Reorder group does not have per-mode styles');
});
test('should render the handle when reorder group is enabled', async ({ page }) => {
await page.setContent(`
<ion-reorder-group disabled="false">
<ion-item>
<ion-label>Item</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
`);
const reorder = page.locator('ion-reorder');
await expect(reorder).toBeVisible();
});
test('should not render the handle when reorder group is disabled', async ({ page }) => {
await page.setContent(`
<ion-reorder-group disabled="true">
<ion-item>
<ion-label>Item</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
`);
const reorder = page.locator('ion-reorder');
await expect(reorder).toBeHidden();
});
});

40
core/src/components/reorder-group/test/basic/reorder-group.e2e.ts Normal file
View File

@@ -0,0 +1,40 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
/**
* Reorder group does not have per-mode styles
*/
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('reorder group: basic'), () => {
test('should render the handle when reorder group is enabled', async ({ page }) => {
await page.setContent(
`
<ion-reorder-group disabled="false">
<ion-item>
<ion-label>Item</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
`,
config
);
const reorder = page.locator('ion-reorder');
await expect(reorder).toBeVisible();
});
test('should not render the handle when reorder group is disabled', async ({ page }) => {
await page.setContent(
`
<ion-reorder-group disabled="true">
<ion-item>
<ion-label>Item</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
`,
config
);
const reorder = page.locator('ion-reorder');
await expect(reorder).toBeHidden();
});
});
});

41
core/src/components/reorder-group/test/interactive/reorder-group.e2e-legacy.ts
View File

@@ -1,41 +0,0 @@
import { expect } from '@playwright/test';
import { test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
test.describe.skip('reorder group: interactive', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
skip.mode('ios', 'Reorder group does not have per-mode styles');
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/interactive`);
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/interactive`);
const reorderHandle = page.locator('ion-reorder');
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});

42
core/src/components/reorder-group/test/interactive/reorder-group.e2e.ts Normal file
View File

@@ -0,0 +1,42 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
/**
* Reorder group does not have per-mode styles
*/
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe.skip(title('reorder group: interactive'), () => {
test.beforeEach(async ({ skip }) => {
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
await page.goto(`/src/components/reorder-group/test/interactive`, config);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
const reorderHandle = page.locator('ion-reorder');
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});
});

41
core/src/components/reorder-group/test/nested/reorder-group.e2e-legacy.ts
View File

@@ -1,41 +0,0 @@
import { expect } from '@playwright/test';
import { test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
test.describe.skip('reorder group: nested', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
skip.mode('ios', 'Reorder group does not have per-mode styles');
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/nested`);
const items = page.locator('app-reorder');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/nested`);
const reorderHandle = page.locator('app-reorder ion-reorder');
const items = page.locator('app-reorder');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});

41
core/src/components/reorder-group/test/nested/reorder-group.e2e.ts Normal file
View File

@@ -0,0 +1,41 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
/**
* Reorder group does not have per-mode styles
*/
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe.skip(title('reorder group: nested'), () => {
test.beforeEach(async ({ skip }) => {
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
await page.goto(`/src/components/reorder-group/test/nested`, config);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
const items = page.locator('app-reorder');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
const reorderHandle = page.locator('app-reorder ion-reorder');
const items = page.locator('app-reorder');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});
});

41
core/src/components/reorder-group/test/scroll-target/reorder-group.e2e-legacy.ts
View File

@@ -1,41 +0,0 @@
import { expect } from '@playwright/test';
import { test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
test.describe.skip('reorder group: scroll-target', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
skip.mode('ios', 'Reorder group does not have per-mode styles');
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/scroll-target`);
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
await page.goto(`/src/components/reorder-group/test/scroll-target`);
const reorderHandle = page.locator('ion-reorder');
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});

41
core/src/components/reorder-group/test/scroll-target/reorder-group.e2e.ts Normal file
View File

@@ -0,0 +1,41 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
// TODO FW-3079
/**
* Reorder group does not have per-mode styles
*/
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe.skip(title('reorder group: scroll-target'), () => {
test.beforeEach(async ({ skip }) => {
skip.browser(
(browserName: string) => browserName !== 'chromium',
'dragElementBy is flaky outside of Chrome browsers.'
);
await page.goto(`/src/components/reorder-group/test/scroll-target`, config);
});
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(items.nth(1), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
});
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
const reorderHandle = page.locator('ion-reorder');
const items = page.locator('ion-item');
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
await ionItemReorderComplete.next();
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
});
});
});