Skip to content
Permalink
Browse files

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...
liamdebeasi committed Mar 1, 2019
1 parent f07ea4f commit c475dab00b032c20d507718e40aefde775a5fbc7
@@ -34,7 +34,7 @@ export class Fab implements ComponentInterface {
@Watch('activated')
activatedChanged() {
const activated = this.activated;
const fab = this.el.querySelector('ion-fab-button');
const fab = this.getFab();
if (fab) {
fab.activated = activated;
}
@@ -49,10 +49,17 @@ export class Fab implements ComponentInterface {
}
}

getFab() {
return this.el.querySelector('ion-fab-button');
}

@Listen('click')
onClick() {
const hasList = !!this.el.querySelector('ion-fab-list');
if (hasList) {
const getButton = this.getFab();
const isButtonDisabled = getButton && getButton.disabled;

if (hasList && !isButtonDisabled) {
this.activated = !this.activated;
}
}
@@ -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);
});
@@ -49,7 +49,7 @@
</ion-fab>

<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled>
<ion-icon name="arrow-dropleft"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
@@ -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);
}

0 comments on commit c475dab

Please sign in to comment.
You can’t perform that action at this time.