mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(textarea): reflect disabled and readonly props (#30910)
Co-authored-by: Maria Hutt <maria.hutt@outsystems.com>
This commit is contained in:
Bengt Weiße
@@ -5,105 +5,126 @@ test.describe('Inputs', () => {
|
||||
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.describe('basic functionality', () => {
|
||||
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();
|
||||
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);
|
||||
});
|
||||
// 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();
|
||||
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);
|
||||
});
|
||||
// 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();
|
||||
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-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').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();
|
||||
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();
|
||||
// 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();
|
||||
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');
|
||||
});
|
||||
// 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');
|
||||
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');
|
||||
// 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('should reflect props when component has a default value', async ({ page }) => {
|
||||
// Disable inputs
|
||||
await page.locator('#disable-button').click();
|
||||
|
||||
// Disabled prop
|
||||
await expect(page.locator('ion-input').first()).toHaveAttribute('disabled', '');
|
||||
await expect(page.locator('ion-input-otp').first()).toHaveAttribute('disabled', '');
|
||||
await expect(page.locator('ion-textarea').first()).toHaveAttribute('disabled', '');
|
||||
|
||||
// Reset disabled state and set readonly state
|
||||
await page.locator('#disable-button').click();
|
||||
await page.locator('#readonly-button').click();
|
||||
|
||||
// Readonly prop
|
||||
await expect(page.locator('ion-input').first()).toHaveAttribute('readonly', '');
|
||||
await expect(page.locator('ion-input-otp').first()).toHaveAttribute('readonly', '');
|
||||
await expect(page.locator('ion-textarea').first()).toHaveAttribute('readonly', '');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('updating text input refs', () => {
|
||||
|
||||
28
packages/angular/test/base/e2e/src/standalone/inputs.spec.ts
Normal file
28
packages/angular/test/base/e2e/src/standalone/inputs.spec.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Inputs', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/standalone/inputs');
|
||||
});
|
||||
|
||||
test.describe('basic functionality', () => {
|
||||
test('should reflect props when component has a default value', async ({ page }) => {
|
||||
// Disable inputs
|
||||
await page.locator('#disable-button').click();
|
||||
|
||||
// Disabled prop
|
||||
await expect(page.locator('ion-input')).toHaveAttribute('disabled', '');
|
||||
await expect(page.locator('ion-input-otp')).toHaveAttribute('disabled', '');
|
||||
await expect(page.locator('ion-textarea')).toHaveAttribute('disabled', '');
|
||||
|
||||
// Reset disabled state and set readonly state
|
||||
await page.locator('#disable-button').click();
|
||||
await page.locator('#readonly-button').click();
|
||||
|
||||
// Readonly prop
|
||||
await expect(page.locator('ion-input')).toHaveAttribute('readonly', '');
|
||||
await expect(page.locator('ion-input-otp')).toHaveAttribute('readonly', '');
|
||||
await expect(page.locator('ion-textarea')).toHaveAttribute('readonly', '');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user