Skip to content

Commit bc63e19

Browse files
brandyscarneybrandyscarney
committed
test(many): check for click event firing once on input and textarea
1 parent 50e0b02 commit bc63e19

File tree

2 files changed

+150
-4
lines changed

2 files changed

+150
-4
lines changed

‎core/src/components/input/test/item/input.e2e.ts

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ configs().forEach(({ title, screenshot, config }) => {
4949
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
5050
test.describe(title('input: item functionality'), () => {
5151
test('clicking padded space within item should focus the input', async ({ page }) => {
52+
test.info().annotations.push({
53+
type: 'issue',
54+
description: 'https://github.com/ionic-team/ionic-framework/issues/21982',
55+
});
56+
5257
await page.setContent(
5358
`
5459
<ion-item>
@@ -57,11 +62,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
5762
`,
5863
config
5964
);
60-
const itemNative = page.locator('.item-native');
65+
66+
const item = page.locator('ion-item');
6167
const input = page.locator('ion-input input');
6268

6369
// Clicks the padded space within the item
64-
await itemNative.click({
70+
await item.click({
6571
position: {
6672
x: 5,
6773
y: 5,
@@ -70,5 +76,86 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
7076

7177
await expect(input).toBeFocused();
7278
});
79+
80+
test('clicking padded space within item should fire one click event', async ({ page }) => {
81+
test.info().annotations.push({
82+
type: 'issue',
83+
description: 'https://github.com/ionic-team/ionic-framework/issues/29761',
84+
});
85+
86+
await page.setContent(
87+
`
88+
<ion-item>
89+
<ion-input label="Input"></ion-input>
90+
</ion-item>
91+
`,
92+
config
93+
);
94+
95+
const item = page.locator('ion-item');
96+
const onClick = await page.spyOnEvent('click');
97+
98+
// Click the padding area (5px from left edge)
99+
await item.click({
100+
position: {
101+
x: 5,
102+
y: 5,
103+
},
104+
});
105+
106+
expect(onClick).toHaveReceivedEventTimes(1);
107+
108+
// Verify that the event target is the input and not the item
109+
const event = onClick.events[0];
110+
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-input');
111+
});
112+
113+
test('clicking native wrapper should fire one click event', async ({ page }) => {
114+
await page.setContent(
115+
`
116+
<ion-item>
117+
<ion-input label="Input"></ion-input>
118+
</ion-item>
119+
`,
120+
config
121+
);
122+
123+
const nativeWrapper = page.locator('.native-wrapper');
124+
const onClick = await page.spyOnEvent('click');
125+
126+
await nativeWrapper.click({
127+
position: {
128+
x: 5,
129+
y: 5,
130+
},
131+
});
132+
133+
expect(onClick).toHaveReceivedEventTimes(1);
134+
135+
// Verify that the event target is the input and not the native wrapper
136+
const event = onClick.events[0];
137+
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-input');
138+
});
139+
140+
test('clicking native input within item should fire click event with target as ion-input', async ({ page }) => {
141+
await page.setContent(
142+
`
143+
<ion-item>
144+
<ion-input label="Input"></ion-input>
145+
</ion-item>
146+
`,
147+
config
148+
);
149+
150+
const nativeInput = page.locator('.native-input');
151+
const onClick = await page.spyOnEvent('click');
152+
153+
await nativeInput.click();
154+
expect(onClick).toHaveReceivedEventTimes(1);
155+
156+
// Verify that the event target is the ion-input and not the native input
157+
const event = onClick.events[0];
158+
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-input');
159+
});
73160
});
74161
});

‎core/src/components/textarea/test/item/textarea.e2e.ts

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ configs().forEach(({ title, screenshot, config }) => {
4949
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
5050
test.describe(title('textarea: item functionality'), () => {
5151
test('clicking padded space within item should focus the textarea', async ({ page }) => {
52+
test.info().annotations.push({
53+
type: 'issue',
54+
description: 'https://github.com/ionic-team/ionic-framework/issues/21982',
55+
});
56+
5257
await page.setContent(
5358
`
5459
<ion-item>
@@ -57,11 +62,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
5762
`,
5863
config
5964
);
60-
const itemNative = page.locator('.item-native');
65+
const item = page.locator('ion-item');
6166
const textarea = page.locator('ion-textarea textarea');
6267

6368
// Clicks the padded space within the item
64-
await itemNative.click({
69+
await item.click({
6570
position: {
6671
x: 5,
6772
y: 5,
@@ -70,5 +75,59 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
7075

7176
await expect(textarea).toBeFocused();
7277
});
78+
79+
test('clicking padded space within item should fire one click event', async ({ page }) => {
80+
test.info().annotations.push({
81+
type: 'issue',
82+
description: 'https://github.com/ionic-team/ionic-framework/issues/29761',
83+
});
84+
85+
await page.setContent(
86+
`
87+
<ion-item>
88+
<ion-textarea label="Textarea"></ion-textarea>
89+
</ion-item>
90+
`,
91+
config
92+
);
93+
94+
const item = page.locator('ion-item');
95+
const onClick = await page.spyOnEvent('click');
96+
97+
// Click the padding area (5px from left edge)
98+
await item.click({
99+
position: {
100+
x: 5,
101+
y: 5,
102+
},
103+
});
104+
105+
expect(onClick).toHaveReceivedEventTimes(1);
106+
107+
// Verify that the event target is the input and not the item
108+
const event = onClick.events[0];
109+
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-textarea');
110+
});
111+
112+
test('clicking native textarea within item should fire click event with target as ion-textarea', async ({ page }) => {
113+
await page.setContent(
114+
`
115+
<ion-item>
116+
<ion-textarea label="Textarea"></ion-textarea>
117+
</ion-item>
118+
`,
119+
config
120+
);
121+
122+
const nativeTextarea = page.locator('.native-textarea');
123+
const onClick = await page.spyOnEvent('click');
124+
125+
await nativeTextarea.click();
126+
expect(onClick).toHaveReceivedEventTimes(1);
127+
128+
// Verify that the event target is the ion-textarea and not the native textarea
129+
const event = onClick.events[0];
130+
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-textarea');
131+
});
73132
});
74133
});

0 commit comments

Comments
 (0)