Skip to content

Commit 72205f7

Browse files
brandyscarneybrandyscarney
committed
test(segment): add layout test
1 parent bdb38be commit 72205f7

File tree

2 files changed

+205
-0
lines changed

2 files changed

+205
-0
lines changed

‎core/src/components/segment/test/layout/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Segment - Layout</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
ion-content {
18+
--background: #f8f8f8;
19+
}
20+
21+
ion-segment {
22+
margin: 10px 0;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<ion-app>
29+
<ion-header>
30+
<ion-toolbar>
31+
<ion-title>Segment - Layout</ion-title>
32+
</ion-toolbar>
33+
</ion-header>
34+
35+
<ion-content>
36+
<ion-segment value="a">
37+
<ion-segment-button value="a">
38+
<ion-label>Tab</ion-label>
39+
</ion-segment-button>
40+
<ion-segment-button value="b">
41+
<ion-label>Tab</ion-label>
42+
</ion-segment-button>
43+
<ion-segment-button value="c">
44+
<ion-label>Tab</ion-label>
45+
</ion-segment-button>
46+
</ion-segment>
47+
48+
<ion-segment value="a">
49+
<ion-segment-button value="a">
50+
<ion-icon name="triangle-outline"></ion-icon>
51+
<ion-label>Tab</ion-label>
52+
</ion-segment-button>
53+
<ion-segment-button value="b">
54+
<ion-icon name="triangle-outline"></ion-icon>
55+
<ion-label>Tab</ion-label>
56+
</ion-segment-button>
57+
<ion-segment-button value="c">
58+
<ion-icon name="triangle-outline"></ion-icon>
59+
<ion-label>Tab</ion-label>
60+
</ion-segment-button>
61+
</ion-segment>
62+
63+
<ion-segment value="a">
64+
<ion-segment-button value="a" layout="icon-bottom">
65+
<ion-icon name="triangle-outline"></ion-icon>
66+
<ion-label>Tab</ion-label>
67+
</ion-segment-button>
68+
<ion-segment-button value="b" layout="icon-bottom">
69+
<ion-icon name="triangle-outline"></ion-icon>
70+
<ion-label>Tab</ion-label>
71+
</ion-segment-button>
72+
<ion-segment-button value="c" layout="icon-bottom">
73+
<ion-icon name="triangle-outline"></ion-icon>
74+
<ion-label>Tab</ion-label>
75+
</ion-segment-button>
76+
</ion-segment>
77+
78+
<ion-segment value="a">
79+
<ion-segment-button value="a" layout="icon-start">
80+
<ion-icon name="triangle-outline"></ion-icon>
81+
<ion-label>Tab</ion-label>
82+
</ion-segment-button>
83+
<ion-segment-button value="b" layout="icon-start">
84+
<ion-icon name="triangle-outline"></ion-icon>
85+
<ion-label>Tab</ion-label>
86+
</ion-segment-button>
87+
<ion-segment-button value="c" layout="icon-start">
88+
<ion-icon name="triangle-outline"></ion-icon>
89+
<ion-label>Tab</ion-label>
90+
</ion-segment-button>
91+
</ion-segment>
92+
93+
<ion-segment value="a">
94+
<ion-segment-button value="a" layout="icon-end">
95+
<ion-icon name="triangle-outline"></ion-icon>
96+
<ion-label>Tab</ion-label>
97+
</ion-segment-button>
98+
<ion-segment-button value="b" layout="icon-end">
99+
<ion-icon name="triangle-outline"></ion-icon>
100+
<ion-label>Tab</ion-label>
101+
</ion-segment-button>
102+
<ion-segment-button value="c" layout="icon-end">
103+
<ion-icon name="triangle-outline"></ion-icon>
104+
<ion-label>Tab</ion-label>
105+
</ion-segment-button>
106+
</ion-segment>
107+
108+
<ion-segment value="a">
109+
<ion-segment-button value="a" layout="icon-end">
110+
<ion-icon name="triangle-outline"></ion-icon>
111+
</ion-segment-button>
112+
<ion-segment-button value="b" layout="icon-end">
113+
<ion-icon name="triangle-outline"></ion-icon>
114+
</ion-segment-button>
115+
<ion-segment-button value="c" layout="icon-end">
116+
<ion-icon name="triangle-outline"></ion-icon>
117+
</ion-segment-button>
118+
</ion-segment>
119+
</ion-content>
120+
</ion-app>
121+
</body>
122+
</html>

‎core/src/components/segment/test/layout/segment.e2e.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across directions.
6+
*/
7+
configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
8+
test.describe(title('segment: layout'), () => {
9+
['icon-top', 'icon-bottom', 'icon-start', 'icon-end'].forEach((layout) => {
10+
test(`${layout} - should not have visual regressions`, async ({ page }) => {
11+
await page.setContent(
12+
`
13+
<ion-segment value="a">
14+
<ion-segment-button layout="${layout}" value="a">
15+
<ion-icon name="triangle-outline"></ion-icon>
16+
<ion-label>Tab</ion-label>
17+
</ion-segment-button>
18+
<ion-segment-button layout="${layout}" value="b">
19+
<ion-icon name="triangle-outline"></ion-icon>
20+
<ion-label>Tab</ion-label>
21+
</ion-segment-button>
22+
<ion-segment-button layout="${layout}" value="c">
23+
<ion-icon name="triangle-outline"></ion-icon>
24+
<ion-label>Tab</ion-label>
25+
</ion-segment-button>
26+
</ion-segment>
27+
`,
28+
config
29+
);
30+
31+
const segment = page.locator('ion-segment');
32+
33+
await expect(segment).toHaveScreenshot(screenshot(`segment-layout-${layout}`));
34+
});
35+
});
36+
37+
test('should not have visual regressions with icon only layout', async ({ page }) => {
38+
await page.setContent(
39+
`
40+
<ion-segment value="a">
41+
<ion-segment-button value="a">
42+
<ion-icon name="triangle-outline"></ion-icon>
43+
</ion-segment-button>
44+
<ion-segment-button value="b">
45+
<ion-icon name="triangle-outline"></ion-icon>
46+
</ion-segment-button>
47+
<ion-segment-button value="c">
48+
<ion-icon name="triangle-outline"></ion-icon>
49+
</ion-segment-button>
50+
</ion-segment>
51+
`,
52+
config
53+
);
54+
55+
const segment = page.locator('ion-segment');
56+
57+
await expect(segment).toHaveScreenshot(screenshot(`segment-layout-icon-only`));
58+
});
59+
60+
test('should not have visual regressions with label only layout', async ({ page }) => {
61+
await page.setContent(
62+
`
63+
<ion-segment value="a">
64+
<ion-segment-button value="a">
65+
<ion-label>Tab</ion-label>
66+
</ion-segment-button>
67+
<ion-segment-button value="b">
68+
<ion-label>Tab</ion-label>
69+
</ion-segment-button>
70+
<ion-segment-button value="c">
71+
<ion-label>Tab</ion-label>
72+
</ion-segment-button>
73+
</ion-segment>
74+
`,
75+
config
76+
);
77+
78+
const segment = page.locator('ion-segment');
79+
80+
await expect(segment).toHaveScreenshot(screenshot(`segment-layout-label-only`));
81+
});
82+
});
83+
});

0 commit comments

Comments
 (0)