Skip to content

Commit 4659b98

Browse files
author
Tanner Reits
committed
tests tests tests
1 parent 2e3fd91 commit 4659b98

10 files changed

+139
-101
lines changed

‎core/src/components/segment-view/test/basic/index.html‎

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
<style>
1717
ion-segment-view {
1818
height: 100px;
19+
20+
margin-bottom: 20px;
1921
}
2022

2123
ion-segment-content {
@@ -24,15 +26,15 @@
2426
align-items: center;
2527
}
2628

27-
ion-segment-content:nth-of-type(1) {
29+
ion-segment-content:nth-of-type(3n + 1) {
2830
background: lightpink;
2931
}
3032

31-
ion-segment-content:nth-of-type(2) {
33+
ion-segment-content:nth-of-type(3n + 2) {
3234
background: lightblue;
3335
}
3436

35-
ion-segment-content:nth-of-type(3) {
37+
ion-segment-content:nth-of-type(3n + 3) {
3638
background: lightgreen;
3739
}
3840
</style>
@@ -60,24 +62,11 @@
6062
<ion-segment-content id="value">Value</ion-segment-content>
6163
</ion-segment-view>
6264

63-
<ion-segment value="all">
64-
<ion-segment-button content-id="all" value="all">
65-
<ion-label>All</ion-label>
66-
</ion-segment-button>
67-
<ion-segment-button content-id="favorites" value="favorites">
68-
<ion-label>Favorites</ion-label>
69-
</ion-segment-button>
70-
</ion-segment>
71-
<ion-segment-view>
72-
<ion-segment-content id="all">All</ion-segment-content>
73-
<ion-segment-content id="favorites">Favorites</ion-segment-content>
74-
</ion-segment-view>
75-
7665
<ion-segment value="free">
7766
<ion-segment-button content-id="paid" value="paid">
7867
<ion-label>Paid</ion-label>
7968
</ion-segment-button>
80-
<ion-segment-button content-id="free" value="free">
69+
<ion-segment-button style="width: 200px" content-id="free" value="free">
8170
<ion-label>Free</ion-label>
8271
</ion-segment-button>
8372
<ion-segment-button content-id="top" value="top">
@@ -90,6 +79,47 @@
9079
<ion-segment-content id="top">Top</ion-segment-content>
9180
</ion-segment-view>
9281

82+
<ion-segment value="peach" scrollable>
83+
<ion-segment-button content-id="orange" value="orange">
84+
<ion-label>Orange</ion-label>
85+
</ion-segment-button>
86+
<ion-segment-button content-id="banana" value="banana">
87+
<ion-label>Banana</ion-label>
88+
</ion-segment-button>
89+
<ion-segment-button content-id="pear" value="pear">
90+
<ion-label>Pear</ion-label>
91+
</ion-segment-button>
92+
<ion-segment-button content-id="peach" value="peach">
93+
<ion-label>Peach</ion-label>
94+
</ion-segment-button>
95+
<ion-segment-button content-id="grape" value="grape">
96+
<ion-label>Grape</ion-label>
97+
</ion-segment-button>
98+
<ion-segment-button content-id="mango" value="mango">
99+
<ion-label>Mango</ion-label>
100+
</ion-segment-button>
101+
<ion-segment-button content-id="apple" value="apple">
102+
<ion-label>Apple</ion-label>
103+
</ion-segment-button>
104+
<ion-segment-button content-id="strawberry" value="strawberry">
105+
<ion-label>Strawberry</ion-label>
106+
</ion-segment-button>
107+
<ion-segment-button content-id="cherry" value="cherry">
108+
<ion-label>Cherry</ion-label>
109+
</ion-segment-button>
110+
</ion-segment>
111+
<ion-segment-view>
112+
<ion-segment-content id="orange">Orange</ion-segment-content>
113+
<ion-segment-content id="banana">Banana</ion-segment-content>
114+
<ion-segment-content id="pear">Pear</ion-segment-content>
115+
<ion-segment-content id="peach">Peach</ion-segment-content>
116+
<ion-segment-content id="grape">Grape</ion-segment-content>
117+
<ion-segment-content id="mango">Mango</ion-segment-content>
118+
<ion-segment-content id="apple">Apple</ion-segment-content>
119+
<ion-segment-content id="strawberry">Strawberry</ion-segment-content>
120+
<ion-segment-content id="cherry">Cherry</ion-segment-content>
121+
</ion-segment-view>
122+
93123
<button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
94124

95125
<button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
@@ -114,7 +144,7 @@
114144
currentValue = 'value';
115145
}
116146

117-
segmentView.setContent(currentValue);
147+
segment.value = currentValue;
118148
}
119149

120150
async function clearSegmentValue() {

‎core/src/components/segment-view/test/basic/segment-view.e2e.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,85 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
8989
await expect(segmentContent).toBeInViewport();
9090
});
9191
});
92+
93+
test('should set correct segment button as checked when changing the value by scrolling the segment content', async ({
94+
page,
95+
}) => {
96+
await page.setContent(
97+
`
98+
<ion-segment value="free">
99+
<ion-segment-button content-id="paid" value="paid">
100+
<ion-label>Paid</ion-label>
101+
</ion-segment-button>
102+
<ion-segment-button content-id="free" value="free">
103+
<ion-label>Free</ion-label>
104+
</ion-segment-button>
105+
<ion-segment-button content-id="top" value="top">
106+
<ion-label>Top</ion-label>
107+
</ion-segment-button>
108+
</ion-segment>
109+
<ion-segment-view>
110+
<ion-segment-content id="paid">Paid</ion-segment-content>
111+
<ion-segment-content id="free">Free</ion-segment-content>
112+
<ion-segment-content id="top">Top</ion-segment-content>
113+
</ion-segment-view>
114+
`,
115+
config
116+
);
117+
118+
await page
119+
.locator('ion-segment-view')
120+
.evaluate(
121+
(segmentView: HTMLIonSegmentViewElement) => !segmentView.classList.contains('segment-view-scroll-disabled')
122+
);
123+
124+
await page.waitForChanges();
125+
126+
await page.locator('ion-segment-content[id="top"]').scrollIntoViewIfNeeded();
127+
128+
const segmentButton = page.locator('ion-segment-button[value="top"]');
129+
await expect(segmentButton).toHaveClass(/segment-button-checked/);
130+
});
131+
132+
test('should set correct segment button as checked and show correct content when programmatically setting the segment vale', async ({
133+
page,
134+
}) => {
135+
await page.setContent(
136+
`
137+
<ion-segment value="free">
138+
<ion-segment-button content-id="paid" value="paid">
139+
<ion-label>Paid</ion-label>
140+
</ion-segment-button>
141+
<ion-segment-button content-id="free" value="free">
142+
<ion-label>Free</ion-label>
143+
</ion-segment-button>
144+
<ion-segment-button content-id="top" value="top">
145+
<ion-label>Top</ion-label>
146+
</ion-segment-button>
147+
</ion-segment>
148+
<ion-segment-view>
149+
<ion-segment-content id="paid">Paid</ion-segment-content>
150+
<ion-segment-content id="free">Free</ion-segment-content>
151+
<ion-segment-content id="top">Top</ion-segment-content>
152+
</ion-segment-view>
153+
`,
154+
config
155+
);
156+
157+
await page
158+
.locator('ion-segment-view')
159+
.evaluate(
160+
(segmentView: HTMLIonSegmentViewElement) => !segmentView.classList.contains('segment-view-scroll-disabled')
161+
);
162+
163+
await page.waitForChanges();
164+
165+
await page.locator('ion-segment').evaluate((segment: HTMLIonSegmentElement) => (segment.value = 'top'));
166+
167+
const segmentButton = page.locator('ion-segment-button[value="top"]');
168+
await expect(segmentButton).toHaveClass(/segment-button-checked/);
169+
170+
const segmentContent = page.locator('ion-segment-content[id="top"]');
171+
await expect(segmentContent).toBeInViewport();
172+
});
92173
});

‎core/src/components/segment-view/test/disabled/index.html‎

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@
6464
<ion-segment-content id="favorites">Favorites</ion-segment-content>
6565
</ion-segment-view>
6666

67-
<ion-segment value="paid">
67+
<ion-segment disabled value="paid">
6868
<ion-segment-button content-id="paid" value="paid">
6969
<ion-label>Paid</ion-label>
7070
</ion-segment-button>
71-
<ion-segment-button disabled content-id="free" value="free">
71+
<ion-segment-button content-id="free" value="free">
7272
<ion-label>Free</ion-label>
7373
</ion-segment-button>
7474
<ion-segment-button content-id="top" value="top">
@@ -81,28 +81,7 @@
8181
<ion-segment-content id="top">Top</ion-segment-content>
8282
</ion-segment-view>
8383

84-
<ion-segment value="a">
85-
<ion-segment-button content-id="a" value="a">
86-
<ion-label>a</ion-label>
87-
</ion-segment-button>
88-
<ion-segment-button disabled content-id="b" value="b">
89-
<ion-label>b</ion-label>
90-
</ion-segment-button>
91-
<ion-segment-button disabled content-id="c" value="c">
92-
<ion-label>c</ion-label>
93-
</ion-segment-button>
94-
<ion-segment-button content-id="d" value="d">
95-
<ion-label>d</ion-label>
96-
</ion-segment-button>
97-
</ion-segment>
98-
<ion-segment-view>
99-
<ion-segment-content id="a">a</ion-segment-content>
100-
<ion-segment-content id="b">b</ion-segment-content>
101-
<ion-segment-content id="c">c</ion-segment-content>
102-
<ion-segment-content id="d">d</ion-segment-content>
103-
</ion-segment-view>
104-
105-
<ion-segment disabled value="reading-list">
84+
<ion-segment value="reading-list">
10685
<ion-segment-button content-id="bookmarks" value="bookmarks">
10786
<ion-label>Bookmarks</ion-label>
10887
</ion-segment-button>

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts‎

Lines changed: 7 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,9 @@ import { configs, test } from '@utils/test/playwright';
77
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
88
test.describe(title('segment-view: disabled'), () => {
99
test('should not have visual regressions', async ({ page }) => {
10-
await page.setContent(
11-
`
12-
<style>
13-
/* Styles are here to show the disabled state */
14-
ion-segment-view {
15-
height: 100px;
16-
background: #3880ff;
17-
}
18-
</style>
19-
20-
<ion-segment-view disabled>
21-
<ion-segment-content id="paid">Paid</ion-segment-content>
22-
<ion-segment-content id="free">Free</ion-segment-content>
23-
<ion-segment-content id="top">Top</ion-segment-content>
24-
</ion-segment-view>
25-
`,
26-
config
27-
);
10+
await page.goto('/src/components/segment-view/test/disabled', config);
2811

29-
const segment = page.locator('ion-segment-view');
30-
31-
await expect(segment).toHaveScreenshot(screenshot(`segment-view-disabled`));
12+
await expect(page).toHaveScreenshot(screenshot(`segment-view-disabled`));
3213
});
3314
});
3415
});
@@ -38,36 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
3819
*/
3920
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
4021
test.describe(title('segment-view: disabled'), () => {
41-
test('should show the second content when first segment content is disabled', async ({ page }) => {
42-
await page.setContent(
43-
`
44-
<ion-segment disabled>
45-
<ion-segment-button content-id="paid" value="paid">
46-
<ion-label>Paid</ion-label>
47-
</ion-segment-button>
48-
<ion-segment-button content-id="free" value="free">
49-
<ion-label>Free</ion-label>
50-
</ion-segment-button>
51-
<ion-segment-button content-id="top" value="top">
52-
<ion-label>Top</ion-label>
53-
</ion-segment-button>
54-
</ion-segment>
55-
<ion-segment-view>
56-
<ion-segment-content disabled id="paid">Paid</ion-segment-content>
57-
<ion-segment-content id="free">Free</ion-segment-content>
58-
<ion-segment-content id="top">Top</ion-segment-content>
59-
</ion-segment-view>
60-
`,
61-
config
62-
);
63-
64-
const segmentContent = page.locator('ion-segment-content[id="free"]');
65-
await expect(segmentContent).toBeInViewport();
66-
});
67-
68-
test('should scroll to the third content and update the segment value when the second segment content is disabled', async ({
69-
page,
70-
}) => {
22+
test('should keep button enabled even when disabled prop is set', async ({ page }) => {
7123
await page.setContent(
7224
`
7325
<ion-segment>
@@ -82,20 +34,16 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
8234
</ion-segment-button>
8335
</ion-segment>
8436
<ion-segment-view>
85-
<ion-segment-content id="paid">Paid</ion-segment-content>
86-
<ion-segment-content disabled id="free">Free</ion-segment-content>
37+
<ion-segment-content disabled id="paid">Paid</ion-segment-content>
38+
<ion-segment-content id="free">Free</ion-segment-content>
8739
<ion-segment-content id="top">Top</ion-segment-content>
8840
</ion-segment-view>
8941
`,
9042
config
9143
);
9244

93-
const segmentContent = page.locator('ion-segment-content[id="top"]');
94-
await segmentContent.scrollIntoViewIfNeeded();
95-
await expect(segmentContent).toBeInViewport();
96-
97-
const segment = page.locator('ion-segment');
98-
expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('top');
45+
const segmentButton = page.locator('ion-segment-button[value="free"]');
46+
await expect(segmentButton).not.toHaveAttribute('disabled');
9947
});
10048
});
10149
});

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Chrome-linux.png‎

15 KB
Loading

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Firefox-linux.png‎

20.7 KB
Loading

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Safari-linux.png‎

14.6 KB
Loading

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-md-ltr-Mobile-Chrome-linux.png‎

14.2 KB
Loading

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-md-ltr-Mobile-Firefox-linux.png‎

21.5 KB
Loading

‎core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-md-ltr-Mobile-Safari-linux.png‎

14.5 KB
Loading

0 commit comments

Comments
 (0)