Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(fab): disabled fab button no longer opens fab list (#17620)
* fix(fab): disabled fab no longer opens, added tests * chore(): change FAB to Fab * update fab name in tests
- Loading branch information
1 parent
f07ea4f
commit c475dab
Showing
4 changed files
with
120 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,17 @@ | ||
import { newE2EPage } from '@stencil/core/testing'; | ||
import { testDisabledFab, testFab } from '../test.utils'; | ||
|
||
test('fab: basic', async () => { | ||
const page = await newE2EPage({ | ||
url: '/src/components/fab/test/basic?ionic:_testing=true' | ||
}); | ||
await testFab('basic', '#fab1'); | ||
}); | ||
|
||
test('fab:rtl: basic', async () => { | ||
await testFab('basic', '#fab1', true); | ||
}); | ||
|
||
test('fab: disabled', async () => { | ||
await testDisabledFab('basic', '#fab2'); | ||
}); | ||
|
||
const compare = await page.compareScreenshot(); | ||
expect(compare).toMatchScreenshot(); | ||
test('fab:rtl: disabled', async () => { | ||
await testDisabledFab('basic', '#fab2', true); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import { newE2EPage } from '@stencil/core/testing'; | ||
|
||
import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils'; | ||
|
||
export async function testFab( | ||
type: string, | ||
selector: string, | ||
rtl = false, | ||
screenshotName: string = cleanScreenshotName(selector) | ||
) { | ||
try { | ||
const pageUrl = generateE2EUrl('fab', type, rtl); | ||
if (rtl) { | ||
screenshotName = `${screenshotName} rtl`; | ||
} | ||
|
||
const page = await newE2EPage({ | ||
url: pageUrl | ||
}); | ||
|
||
const screenshotCompares = []; | ||
screenshotCompares.push(await page.compareScreenshot(`${screenshotName}`)); | ||
|
||
const fab = await getFabComponent(page, selector); | ||
await fab.click(); | ||
|
||
await ensureFabState(fab, 'active'); | ||
|
||
screenshotCompares.push(await page.compareScreenshot(`${screenshotName} open`)); | ||
|
||
const fabButton = await getFabButton(fab); | ||
await fabButton.click(); | ||
|
||
await ensureFabState(fab, 'inactive'); | ||
|
||
screenshotCompares.push(await page.compareScreenshot(`${screenshotName} close`)); | ||
|
||
for (const screenShotCompare of screenshotCompares) { | ||
expect(screenShotCompare).toMatchScreenshot(); | ||
} | ||
} catch (err) { | ||
throw err; | ||
} | ||
} | ||
|
||
export async function testDisabledFab( | ||
type: string, | ||
selector: string, | ||
rtl = false, | ||
screenshotName: string = cleanScreenshotName(selector) | ||
) { | ||
try { | ||
const pageUrl = generateE2EUrl('fab', type, rtl); | ||
if (rtl) { | ||
screenshotName = `${screenshotName} rtl`; | ||
} | ||
|
||
const page = await newE2EPage({ | ||
url: pageUrl | ||
}); | ||
|
||
const screenshotCompares = []; | ||
screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName}`)); | ||
|
||
const fab = await getFabComponent(page, selector); | ||
await fab.click(); | ||
|
||
await ensureFabState(fab, 'inactive'); | ||
|
||
screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName} attempt open`)); | ||
|
||
for (const screenShotCompare of screenshotCompares) { | ||
expect(screenShotCompare).toMatchScreenshot(); | ||
} | ||
} catch (err) { | ||
throw err; | ||
} | ||
} | ||
|
||
async function getFabComponent(page: any, selector: string) { | ||
return page.find(selector); | ||
} | ||
|
||
async function getFabButton(fabComponent: any) { | ||
return fabComponent.find('ion-fab-button'); | ||
} | ||
|
||
async function getFabList(fabComponent: any) { | ||
return fabComponent.find('ion-fab-list'); | ||
} | ||
|
||
async function ensureFabState(fab: any, state: string) { | ||
const active = (state === 'active') ? true : false; | ||
|
||
const fabList = await getFabList(fab); | ||
expect(fabList.classList.contains('fab-list-active')).toBe(active); | ||
} |