test(searchbar): update searchbar tests to take focused ss (#17318)

- gets focus test working properly
- adds a no cancel button focus test

this should prevent the regression in #17252 in the future
This commit is contained in:
Brandy Carney
2019-02-01 11:01:11 -05:00
committed by GitHub
parent 710a3498a5
commit bdcf1686d8
2 changed files with 28 additions and 9 deletions

View File

@ -7,10 +7,29 @@ test('searchbar: basic', async () => {
await page.waitFor(250);
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const compares = [];
compares.push(await page.compareScreenshot());
const searchbar = await page.find('ion-searchbar');
let searchbar = await page.find('#basic');
await searchbar.callMethod('setFocus');
expect(await page.compareScreenshot('focused')).toMatchScreenshot();
await page.waitFor(250);
searchbar = await page.find('#basic');
expect(searchbar).toHaveClass('searchbar-has-focus');
compares.push(await page.compareScreenshot('focused'));
// No Cancel Button Searchbar
searchbar = await page.find('#noCancel');
await searchbar.callMethod('setFocus');
await page.waitFor(250);
searchbar = await page.find('#noCancel');
expect(searchbar).toHaveClass('searchbar-has-focus');
compares.push(await page.compareScreenshot('no cancel button, focused'));
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});

View File

@ -22,7 +22,11 @@
<ion-content id="content">
<h5 padding-start padding-top> Search - Default </h5>
<ion-searchbar value="test" type="tel" show-cancel-button debounce="500">
<ion-searchbar id="basic" value="test" type="tel" show-cancel-button debounce="500">
</ion-searchbar>
<h5 padding-start padding-top> Search - No Cancel Button </h5>
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
</ion-searchbar>
<h5 padding-start padding-top> Search - Danger </h5>
@ -42,10 +46,6 @@
type="number" placeholder="Filter Schedules">
</ion-searchbar>
<h5 padding-start padding-top> Search - No Cancel Button </h5>
<ion-searchbar value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
</ion-searchbar>
<h5 padding-start padding-top> Search - Custom Cancel Button Danger </h5>
<ion-searchbar show-cancel-button cancel-button-text="Really Long Cancel" color="danger">
</ion-searchbar>