ionic-framework/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts at main · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { test, expect } from '@playwright/test';

test.describe('Inputs', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/lazy/inputs');
  });

  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();

      // 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('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', () => {
    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');
    });
  });
});