Skip to content

Commit 4579aa8

Browse files
thetaPCthetaPC
committed
test(searchbar): add snapshots for focus ring buttons
1 parent 8cbd786 commit 4579aa8

9 files changed

+57
-3
lines changed

‎core/src/components/searchbar/searchbar.ionic.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,18 @@
103103
position: absolute;
104104
}
105105

106+
// Clear Icon & Cancel Icon
107+
// -----------------------------------------
108+
109+
.searchbar-clear-button:focus-visible,
110+
.searchbar-cancel-button:focus-visible ion-icon {
111+
@include globals.border-radius(globals.$ionic-border-radius-100);
112+
113+
outline: globals.$ionic-border-size-050 globals.$ionic-border-style-solid globals.$ionic-state-focus-1;
114+
115+
opacity: 1;
116+
}
117+
106118
// Searchbar in Toolbar
107119
// -----------------------------------------
108120

‎core/src/components/searchbar/test/basic/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,15 @@
1717
/* Remove the border that is added through the testing styling */
1818
ion-searchbar button {
1919
border: none;
20+
padding: initial;
2021
}
2122
</style>
2223
</head>
2324

2425
<body>
25-
<ion-searchbar show-cancel-button="always" show-clear-button="always"></ion-searchbar>
2626
<ion-app>
27-
2827
<ion-content id="content">
2928
<h5 class="ion-padding-start ion-padding-top">Search - Default</h5>
30-
<ion-searchbar show-cancel-button="always" show-clear-button="always"></ion-searchbar>
3129
<ion-searchbar id="basic" value="test" type="tel" show-cancel-button="focus" debounce="500"> </ion-searchbar>
3230

3331
<h5 class="ion-padding-start ion-padding-top">Search - Always Show Cancel Button</h5>

‎core/src/components/searchbar/test/states/searchbar.e2e.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior is only applicable to the `ionic-md` mode.
6+
* This behavior does not vary across directions.
7+
*/
8+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9+
test.describe(title('searchbar: focused'), () => {
10+
test('should render focus ring on the cancel button', async ({ page, pageUtils }) => {
11+
await page.setContent(
12+
`
13+
<ion-searchbar show-cancel-button="always"></ion-searchbar>
14+
`,
15+
config
16+
);
17+
18+
await pageUtils.pressKeys('Tab'); // Focused on the input
19+
await pageUtils.pressKeys('Tab'); // Focused on the cancel button
20+
21+
const searchbar = page.locator('ion-searchbar');
22+
23+
await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-state-focused-cancel-button`));
24+
});
25+
});
26+
27+
test.describe(title('searchbar: focused'), () => {
28+
test('should render focus ring on the clear button', async ({ page, pageUtils }) => {
29+
await page.setContent(
30+
`
31+
<ion-searchbar show-clear-button="always" value="Filled text"></ion-searchbar>
32+
`,
33+
config
34+
);
35+
36+
await pageUtils.pressKeys('Tab'); // Focused on the input
37+
await pageUtils.pressKeys('Tab'); // Focused on the clear button
38+
39+
const searchbar = page.locator('ion-searchbar');
40+
41+
await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-state-focused-clear-button`));
42+
});
43+
});
44+
});

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.06 KB
Loading

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

2.48 KB
Loading

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.03 KB
Loading

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.27 KB
Loading

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

2.83 KB
Loading

‎core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.4 KB
Loading

0 commit comments

Comments
 (0)