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: migrate prefer-wheel tests

Browse Source
This commit is contained in:
Liam DeBeasi
2023-12-04 13:24:32 -05:00
parent cab56466a2
commit 59113bb4cd
1 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
View File

@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(27);
});
test('should respect the max bounds', async ({ page }) => {
@@ -95,7 +95,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(1);
});
test('should respect isDateEnabled preference', async ({ page }) => {
@@ -118,9 +118,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const disabledMonths = page.locator('.month-column .picker-item[disabled]');
const disabledYears = page.locator('.year-column .picker-item[disabled]');
const disabledDays = page.locator('.day-column .picker-item[disabled]');
const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled');
const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled');
const disabledDays = page.locator('.day-column ion-picker-column-option.option-disabled');
expect(await disabledMonths.count()).toBe(0);
expect(await disabledYears.count()).toBe(0);
@@ -143,9 +143,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
const monthValues = page.locator('.month-column ion-picker-column-option');
const yearValues = page.locator('.year-column ion-picker-column-option');
const dayValues = page.locator('.day-column ion-picker-column-option');
expect(await monthValues.count()).toBe(2);
expect(await yearValues.count()).toBe(3);
@@ -178,7 +178,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const ionChange = await page.spyOnEvent('ionChange');
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
const monthValues = page.locator('.month-column ion-picker-column-option');
// Change month value
await monthValues.nth(0).click();
@@ -212,7 +212,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const ionChange = await page.spyOnEvent('ionChange');
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.day-column ion-picker-column-option');
// Change day value
await dayValues.nth(0).click();
@@ -233,7 +233,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const ionChange = await page.spyOnEvent('ionChange');
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
const yearValues = page.locator('.year-column ion-picker-column-option');
/**
* Change year value
@@ -259,9 +259,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
await page.waitForChanges();
const selectedMonth = datetime.locator('.month-column .picker-item-active');
const selectedDay = datetime.locator('.day-column .picker-item-active');
const selectedYear = datetime.locator('.year-column .picker-item-active');
const selectedMonth = datetime.locator('.month-column ion-picker-column-option.option-active');
const selectedDay = datetime.locator('.day-column ion-picker-column-option.option-active');
const selectedYear = datetime.locator('.year-column ion-picker-column-option.option-active');
await expect(selectedMonth).toHaveText(/May/);
await expect(selectedDay).toHaveText(/25/);
@@ -287,9 +287,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
const monthValues = page.locator('.month-column ion-picker-column-option');
const dayValues = page.locator('.day-column ion-picker-column-option');
await expect(monthValues).toHaveText(['1月', '2月', '3月']);
await expect(dayValues).toHaveText(['1日', '2日', '3日']);
});
@@ -348,7 +347,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(57);
});
test('should respect the max bounds', async ({ page }) => {
@@ -361,7 +360,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(41);
});
test('should respect isDateEnabled preference', async ({ page }) => {
@@ -384,7 +383,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const disabledDates = page.locator('.date-column .picker-item[disabled]');
const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
expect(await disabledDates.count()).toBe(44);
});
@@ -405,7 +404,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dateValues = page.locator('.date-column ion-picker-column-option');
expect(await dateValues.count()).toBe(5);
});
@@ -426,8 +425,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dateValues = page.locator('.date-column ion-picker-column-option');
await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
});
test('should respect min and max bounds even across years', async ({ page }) => {
@@ -447,18 +445,18 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateColumn = page.locator('.date-column');
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
const dateValues = dateColumn.locator('ion-picker-column-option');
expect(await dateValues.count()).toBe(90);
/**
* Select 1st item to change the dates rendered
*/
await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
await page.waitForChanges();
await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
});
test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
await page.setContent(
@@ -476,7 +474,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.date-column ion-picker-column-option');
expect(await dayValues.count()).toBe(92);
});
@@ -496,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.date-column ion-picker-column-option');
expect(await dayValues.count()).toBe(15);
});
@@ -514,7 +512,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const ionChange = await page.spyOnEvent('ionChange');
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.date-column ion-picker-column-option');
// Change day/month value
await dayValues.nth(0).click();
@@ -533,7 +531,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(57);
});
test('should respect the max bounds', async ({ page }) => {
@@ -546,7 +544,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
expect(await dayValues.count()).toEqual(41);
});
test('should respect isDateEnabled preference', async ({ page }) => {
@@ -569,7 +567,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const disabledDates = page.locator('.date-column .picker-item[disabled]');
const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
expect(await disabledDates.count()).toBe(44);
});
@@ -590,7 +588,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dateValues = page.locator('.date-column ion-picker-column-option');
expect(await dateValues.count()).toBe(5);
});
@@ -611,7 +609,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dateValues = page.locator('.date-column ion-picker-column-option');
await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
});
@@ -632,18 +630,18 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dateColumn = page.locator('.date-column');
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
const dateValues = dateColumn.locator('ion-picker-column-option');
expect(await dateValues.count()).toBe(90);
/**
* Select 1st item to change the dates rendered
*/
await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
await page.waitForChanges();
await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
});
test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
await page.setContent(
@@ -661,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.date-column ion-picker-column-option');
expect(await dayValues.count()).toBe(92);
});
@@ -681,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await page.waitForSelector('.datetime-ready');
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
const dayValues = page.locator('.date-column ion-picker-column-option');
expect(await dayValues.count()).toBe(15);
});