mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00
05026c5a48
- Migrates Angular test app tests from Cypress to Playwright - Resolves test TODOs with Angular 18 - Resolves nav TODO by adding in standalone components - Updates browserslist to remove warnings --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
130 lines
6.7 KiB
TypeScript
130 lines
6.7 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Inputs', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/lazy/inputs');
|
|
});
|
|
|
|
test('should have default values', async ({ page }) => {
|
|
// Check primary elements for default values
|
|
await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
|
|
await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
|
|
await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
|
|
await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
|
|
await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
|
|
await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
|
|
await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
|
|
await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
|
|
});
|
|
|
|
test('should reset values', async ({ page }) => {
|
|
await page.locator('#reset-button').click();
|
|
|
|
// Check primary elements after reset
|
|
await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
|
|
await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
|
|
await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
|
|
/**
|
|
* The `value` property gets set to undefined
|
|
* for these components, so we need to check
|
|
* that the value property is undefined.
|
|
*/
|
|
await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
|
|
await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
|
|
await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
|
|
await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
|
|
await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
|
|
});
|
|
|
|
test('should set values', async ({ page }) => {
|
|
await page.locator('#reset-button').click();
|
|
await page.locator('#set-button').click();
|
|
|
|
// Check primary elements after setting values
|
|
await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
|
|
await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
|
|
await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
|
|
await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
|
|
await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
|
|
await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
|
|
await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
|
|
await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
|
|
});
|
|
|
|
test('should update angular when values change', async ({ page }) => {
|
|
await page.locator('#reset-button').click();
|
|
|
|
await page.locator('ion-checkbox#first-checkbox').click();
|
|
await page.locator('ion-radio').first().click();
|
|
await page.locator('ion-toggle').first().click();
|
|
|
|
await page.locator('ion-input').nth(0).locator('input').fill('hola');
|
|
await page.locator('ion-input').nth(0).locator('input').blur();
|
|
|
|
await page.locator('ion-input-otp input').nth(0).fill('1');
|
|
await page.locator('ion-input-otp input').nth(1).fill('2');
|
|
await page.locator('ion-input-otp input').nth(2).fill('3');
|
|
await page.locator('ion-input-otp input').nth(3).fill('4');
|
|
await page.locator('ion-input-otp input').nth(3).blur();
|
|
|
|
// Set date to 1994-03-14
|
|
await page.locator('ion-datetime').first().click();
|
|
await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
|
|
|
|
await page.locator('ion-select#game-console').click();
|
|
await expect(page.locator('ion-alert')).toBeVisible();
|
|
// Playstation option
|
|
await page.locator('ion-alert .alert-radio-button').nth(3).click();
|
|
// Click confirm button
|
|
await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
|
|
|
|
// Check note text (Angular binding updates)
|
|
await expect(page.locator('#checkbox-note')).toHaveText('true');
|
|
await expect(page.locator('#radio-note')).toHaveText('nes');
|
|
await expect(page.locator('#toggle-note')).toHaveText('true');
|
|
await expect(page.locator('#input-note')).toHaveText('hola');
|
|
await expect(page.locator('#input-otp-note')).toHaveText('1234');
|
|
await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
|
|
await expect(page.locator('#select-note')).toHaveText('ps');
|
|
});
|
|
|
|
test('should update values when erasing input', async ({ page }) => {
|
|
// Focus the input and press backspace to remove last character
|
|
await page.locator('ion-input').nth(0).locator('input').click();
|
|
await page.locator('ion-input').nth(0).locator('input').press('Backspace');
|
|
// Check mirror element reflects the change
|
|
await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
|
|
// Check note text (Angular binding)
|
|
await expect(page.locator('#input-note')).toHaveText('some tex');
|
|
|
|
// Focus the last OTP input and press backspace
|
|
await page.locator('ion-input-otp input').last().click();
|
|
await page.locator('ion-input-otp input').last().press('Backspace');
|
|
// Check mirror element reflects the change
|
|
await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
|
|
// Check note text (Angular binding)
|
|
await expect(page.locator('#input-otp-note')).toHaveText('123');
|
|
});
|
|
|
|
test.describe('updating text input refs', () => {
|
|
test('typing into input should update ref', async ({ page }) => {
|
|
await page.locator('ion-input').first().locator('input').fill('Hello Input');
|
|
// Check mirror element reflects the change
|
|
await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'Hello Input');
|
|
// Check note text (Angular binding)
|
|
await expect(page.locator('#input-note')).toHaveText('Hello Input');
|
|
});
|
|
|
|
test('typing into input-otp should update ref', async ({ page }) => {
|
|
await page.locator('ion-input-otp input').nth(0).fill('1');
|
|
await page.locator('ion-input-otp input').nth(1).fill('2');
|
|
await page.locator('ion-input-otp input').nth(2).fill('3');
|
|
await page.locator('ion-input-otp input').nth(3).fill('4');
|
|
// Check mirror element reflects the change
|
|
await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '1234');
|
|
// Check note text (Angular binding)
|
|
await expect(page.locator('#input-otp-note')).toHaveText('1234');
|
|
});
|
|
});
|
|
});
|