From c475dab00b032c20d507718e40aefde775a5fbc7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 1 Mar 2019 11:26:59 -0500
Subject: [PATCH] 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
---
 core/src/components/fab/fab.tsx               | 11 ++-
 core/src/components/fab/test/basic/e2e.ts     | 21 ++--
 core/src/components/fab/test/basic/index.html |  2 +-
 core/src/components/fab/test/test.utils.ts    | 97 +++++++++++++++++++
 4 files changed, 121 insertions(+), 10 deletions(-)
 create mode 100644 core/src/components/fab/test/test.utils.ts

diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index 8c7da470bc..1cd86807fd 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -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;
     }
   }
diff --git a/core/src/components/fab/test/basic/e2e.ts b/core/src/components/fab/test/basic/e2e.ts
index b8e6efa525..520cf1fc4c 100644
--- a/core/src/components/fab/test/basic/e2e.ts
+++ b/core/src/components/fab/test/basic/e2e.ts
@@ -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'
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testFab('basic', '#fab1');
+});
+
+test('fab:rtl: basic', async () => {
+  await testFab('basic', '#fab1', true);
+});
+
+test('fab: disabled', async () => {
+  await testDisabledFab('basic', '#fab2');
+});
+
+test('fab:rtl: disabled', async () => {
+  await testDisabledFab('basic', '#fab2', true);
 });
diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html
index 5cf34a19df..85a8bdb090 100644
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -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">
diff --git a/core/src/components/fab/test/test.utils.ts b/core/src/components/fab/test/test.utils.ts
new file mode 100644
index 0000000000..52a599a8cb
--- /dev/null
+++ b/core/src/components/fab/test/test.utils.ts
@@ -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);
+}