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

@@ -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;
     }
   }

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'
+  await testFab('basic', '#fab1');
 });
 
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+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);
 });

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">

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);
+}