test(fab): migrate to Playwright (#25986)

core/src/components/fab/test/basic/e2e.ts

@@ -1,17 +0,0 @@
-import { testDisabledFab, testFab } from '../test.utils';
-
-test('fab: basic', async () => {
-  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);
-});

core/src/components/fab/test/basic/fab.e2e.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('fab: basic (visual checks)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/fab/test/basic`);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`fab-basic-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should not have visual regressions when open', async ({ page }) => {
+    // this fab has multiple buttons on each side, so it covers all the bases
+    const fab = page.locator('#fab5');
+
+    await fab.click();
+    await page.waitForChanges();
+
+    /**
+     * fab.screenshot doesn't work since ion-fab's bounding box only covers the
+     * central button. This viewport size crops extra white space while also
+     * containing all the buttons in the open fab.
+     */
+    await page.setViewportSize({
+      width: 320,
+      height: 415,
+    });
+
+    expect(await page.screenshot()).toMatchSnapshot(`fab-open-${page.getSnapshotSettings()}.png`);
+  });
+});
+
+test.describe('fab: basic (functionality checks)', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.goto(`/src/components/fab/test/basic`);
+  });
+
+  test('should toggle active state when clicked', async ({ page }) => {
+    const fab = page.locator('#fab1');
+    const fabList = fab.locator('ion-fab-list');
+
+    expect(fabList).not.toHaveClass(/fab-list-active/);
+
+    // open fab
+    await fab.click();
+    await page.waitForChanges();
+    expect(fabList).toHaveClass(/fab-list-active/);
+
+    // close fab
+    await fab.click();
+    await page.waitForChanges();
+    expect(fabList).not.toHaveClass(/fab-list-active/);
+  });
+
+  test('should not open when disabled', async ({ page }) => {
+    const fab = page.locator('#fab2');
+    const fabList = fab.locator('ion-fab-list');
+
+    expect(fabList).not.toHaveClass(/fab-list-active/);
+
+    // attempt to open fab
+    await fab.click();
+    await page.waitForChanges();
+    expect(fabList).not.toHaveClass(/fab-list-active/);
+  });
+});

core/src/components/fab/test/basic/index.html

@@ -26,117 +26,108 @@
         <f></f>
         <f></f>
 
-        <pre id="log" style="right: 10px; bottom: 50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24)" slot="fixed">log</pre>
         <ion-button>Test</ion-button>
         <ion-fab-button disabled href="#path" onclick="throw 'no clickable'">FAB</ion-fab-button>
 
         <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
-          <ion-fab-button onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight">
+          <ion-fab-button size="small" class="e2eFabTopRight">
             <ion-icon name="add"></ion-icon>
           </ion-fab-button>
           <ion-fab-list>
-            <ion-fab-button onclick="openSocial('facebook', 'fab1')">
+            <ion-fab-button>
               <ion-icon name="logo-facebook"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('twitter', 'fab1')">
+            <ion-fab-button>
               <ion-icon name="logo-twitter"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('vimeo', 'fab1')">
+            <ion-fab-button>
               <ion-icon name="logo-vimeo"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('instagram', 'fab1')">
+            <ion-fab-button>
               <ion-icon name="logo-instagram"></ion-icon>
             </ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
-          <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled>
-            <ion-icon name="arrow-back-circle"></ion-icon>
+        <ion-fab vertical="bottom" horizontal="start" edge id="fab2" slot="fixed">
+          <ion-fab-button color="dark" class="e2eFabBottomRight" disabled>
+            <ion-icon name="arrow-up-circle"></ion-icon>
           </ion-fab-button>
           <ion-fab-list side="start">
-            <ion-fab-button onclick="openSocial('facebook', 'fab2')">
+            <ion-fab-button>
               <ion-icon name="logo-facebook"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('twitter', 'fab2')">
+            <ion-fab-button>
               <ion-icon name="logo-twitter"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('vimeo', 'fab2')">
+            <ion-fab-button>
               <ion-icon name="logo-vimeo"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('instagram', 'fab2')">
+            <ion-fab-button>
               <ion-icon name="logo-instagram"></ion-icon>
             </ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
-          <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft">
+          <ion-fab-button color="secondary" class="e2eFabTopLeft">
             <ion-icon name="arrow-forward-circle"></ion-icon>
           </ion-fab-button>
           <ion-fab-list side="end">
-            <ion-fab-button onclick="openSocial('facebook', 'fab3')">
+            <ion-fab-button>
               <ion-icon name="logo-facebook"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('twitter', 'fab3')">
+            <ion-fab-button>
               <ion-icon name="logo-twitter"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('vimeo', 'fab3')">
+            <ion-fab-button>
               <ion-icon name="logo-vimeo"></ion-icon>
             </ion-fab-button>
-            <ion-fab-button onclick="openSocial('instagram', 'fab3')">
-              <ion-icon name="logo-instagram"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-
-        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
-          <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft">
-            <ion-icon name="arrow-up-circle"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="top">
-            <ion-fab-button onclick="openSocial('facebook', 'fab4')">
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button onclick="openSocial('twitter', 'fab4')">
-              <ion-icon name="logo-twitter"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button onclick="openSocial('vimeo', 'fab4')">
-              <ion-icon name="logo-vimeo"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button onclick="openSocial('instagram', 'fab4')">
+            <ion-fab-button>
               <ion-icon name="logo-instagram"></ion-icon>
             </ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
-          <ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter">
+          <ion-fab-button class="e2eFabCenter">
             <ion-icon name="share"></ion-icon>
           </ion-fab-button>
           <ion-fab-list side="top">
-            <ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary">
+            <ion-fab-button color="primary">
               <ion-icon name="logo-vimeo"></ion-icon>
             </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="bottom">
-            <ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary">
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="start">
-            <ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
+            <ion-fab-button color="light">
               <ion-icon name="logo-instagram"></ion-icon>
             </ion-fab-button>
           </ion-fab-list>
-          <ion-fab-list side="end">
-            <ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark">
+          <ion-fab-list side="bottom">
+            <ion-fab-button color="secondary">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="dark">
               <ion-icon name="logo-twitter"></ion-icon>
             </ion-fab-button>
           </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button color="light">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="primary">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button color="dark">
+              <ion-icon name="logo-twitter"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button color="secondary">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
         </ion-fab>
 
-        <ion-fab horizontal="end" vertical="center" slot="fixed">
+        <ion-fab horizontal="end" vertical="bottom" slot="fixed">
           <ion-fab-button color="danger" onclick="add()">
             <ion-icon name="add"></ion-icon>
           </ion-fab-button>
@@ -157,28 +148,10 @@
           referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
         }
 
-        function insertLog(message) {
-          console.log(message);
-          var el = document.querySelector('#log');
-          const oldHTML = el.innerHTML;
-          el.innerHTML = oldHTML + '\n' + message;
-        }
-
         function add() {
           var newEle = document.createElement('f');
           var ref = document.querySelector('f');
           insertAfter(newEle, ref);
-          insertLog('add');
-        }
-
-        function clickMainFAB(container) {
-          let message = 'Clicked open social menu';
-          insertLog(message);
-        }
-
-        function openSocial(network, container) {
-          let message = 'Share in ' + network;
-          insertLog(message);
         }
 
         function closeLists() {

core/src/components/fab/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('fab: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/fab/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/fab/test/standalone/index.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Floating Action Button - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-fab-button href="https://ionicframework.com">
-      <ion-icon name="logo-ionitron"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button href="https://ionicframework.com" target="_blank">
-      <ion-icon name="logo-ionitron"></ion-icon>
-    </ion-fab-button>
-
-    <ion-button href="https://ionicframework.com" target="_blank">
-      <ion-icon name="logo-ionitron"></ion-icon>
-    </ion-button>
-
-    <script>
-      function insertAfter(el, referenceNode) {
-        referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
-      }
-
-      function add() {
-        var newEle = document.createElement('f');
-        var ref = document.querySelector('f');
-        insertAfter(newEle, ref);
-        console.log('add');
-      }
-
-      function clickMainFAB(container) {
-        let message = 'Clicked open social menu';
-        console.log(message);
-
-        openLists(container);
-      }
-
-      function openSocial(network, container) {
-        let message = 'Share in ' + network;
-        console.log(message);
-
-        openLists(container);
-      }
-
-      function openLists(container) {
-        var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
-
-        for (var i = 0; i < fabLists.length; i++) {
-          fabLists[i].activated = true;
-        }
-      }
-    </script>
-
-    <style>
-      f {
-        display: block;
-        margin: 15px auto;
-        max-width: 150px;
-        height: 150px;
-        background: blue;
-      }
-
-      f:last-of-type {
-        background: yellow;
-      }
-    </style>
-  </body>
-</html>

core/src/components/fab/test/states/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('fab: states', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/fab/test/states?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/fab/test/states/fab.e2e.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test('should not have visual regressions', async ({ page, skip }) => {
+  skip.rtl();
+  await page.goto(`/src/components/fab/test/states`);
+
+  await page.setIonViewport();
+
+  expect(await page.screenshot()).toMatchSnapshot(`fab-states-${page.getSnapshotSettings()}.png`);
+});

core/src/components/fab/test/states/index.html

@@ -17,26 +17,6 @@
   <body>
     <ion-app>
       <ion-content>
-        <ion-fab slot="fixed" horizontal="end">
-          <ion-fab-button>
-            <ion-icon name="share-social"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button>
-              <ion-icon name="logo-vimeo"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-instagram"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-twitter"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-
         <h3>Default</h3>
         <p>
           <ion-fab-button>
@@ -169,18 +149,6 @@
       </ion-content>
     </ion-app>
 
-    <script>
-      var buttons = document.querySelectorAll('ion-fab-button');
-
-      for (var i = 0; i < buttons.length; i++) {
-        buttons[i].addEventListener('click', (event) => onClick(event));
-      }
-
-      function onClick(ev) {
-        console.log('clicked the button', ev.target.innerText);
-      }
-    </script>
-
     <style>
       h3 {
         padding-left: 16px;

core/src/components/fab/test/test.utils.ts

@@ -1,84 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { generateE2EUrl } from '@utils/test';
-
-export const testFab = async (type: string, selector: string, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('fab', type, rtl);
-
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
-
-    const screenshotCompares = [];
-    screenshotCompares.push(await page.compareScreenshot());
-
-    const fab = await getFabComponent(page, selector);
-    await fab.click();
-
-    await page.waitForTimeout(250);
-
-    await ensureFabState(fab, 'active');
-
-    screenshotCompares.push(await page.compareScreenshot('open'));
-
-    const fabButton = await getFabButton(fab);
-    await fabButton.click();
-
-    await page.waitForTimeout(250);
-
-    await ensureFabState(fab, 'inactive');
-
-    screenshotCompares.push(await page.compareScreenshot('close'));
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
-  }
-};
-
-export const testDisabledFab = async (type: string, selector: string, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('fab', type, rtl);
-
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
-
-    const screenshotCompares = [];
-    screenshotCompares.push(await page.compareScreenshot('disabled'));
-
-    const fab = await getFabComponent(page, selector);
-    await fab.click();
-
-    await ensureFabState(fab, 'inactive');
-
-    screenshotCompares.push(await page.compareScreenshot('disabled, attempt open'));
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
-  }
-};
-
-const getFabComponent = async (page: any, selector: string) => {
-  return page.find(selector);
-};
-
-const getFabButton = async (fabComponent: any) => {
-  return fabComponent.find('ion-fab-button');
-};
-
-const getFabList = async (fabComponent: any) => {
-  return fabComponent.find('ion-fab-list');
-};
-
-const ensureFabState = async (fab: any, state: string) => {
-  const active = state === 'active' ? true : false;
-
-  const fabList = await getFabList(fab);
-  expect(fabList.classList.contains('fab-list-active')).toBe(active);
-};

core/src/components/fab/test/translucent/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('fab: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/fab/test/translucent?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/fab/test/translucent/fab.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test('should not have visual regressions', async ({ page, skip }) => {
+  skip.rtl();
+  skip.mode('md', 'Translucency is only available on ios mode');
+  await page.goto(`/src/components/fab/test/translucent`);
+
+  const fab = page.locator('#fab5');
+  await fab.click();
+  await page.waitForChanges();
+
+  /**
+   * fab.screenshot doesn't work since ion-fab's bounding box only covers the
+   * central button. This viewport size crops extra white space while also
+   * containing all the buttons in the open fab.
+   */
+  await page.setViewportSize({
+    width: 235,
+    height: 310,
+  });
+
+  expect(await page.screenshot()).toMatchSnapshot(`fab-translucent-${page.getSnapshotSettings()}.png`);
+});

core/src/components/fab/test/translucent/index.html

@@ -36,118 +36,69 @@
           </ion-row>
         </ion-grid>
 
-        <pre id="log" style="right: 10px; bottom: 50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24)" slot="fixed">log</pre>
-        <ion-button>Test</ion-button>
-
         <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight"
-            ><ion-icon name="add"></ion-icon
-          ></ion-fab-button>
+          <ion-fab-button translucent size="small" class="e2eFabTopRight">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
           <ion-fab-list>
-            <ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"
-              ><ion-icon name="logo-facebook"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('twitter', 'fab1')"
-              ><ion-icon name="logo-twitter"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab1')"
-              ><ion-icon name="logo-vimeo"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('instagram', 'fab1')"
-              ><ion-icon name="logo-instagram"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"
+          <ion-fab-button translucent color="dark" class="e2eFabBottomRight"
             ><ion-icon name="arrow-back-circle"></ion-icon
           ></ion-fab-button>
           <ion-fab-list side="start">
-            <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"
-              ><ion-icon name="logo-facebook"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"
-              ><ion-icon name="logo-twitter"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab2')"
-              ><ion-icon name="logo-vimeo"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('instagram', 'fab2')"
-              ><ion-icon name="logo-instagram"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"
+          <ion-fab-button translucent color="secondary" class="e2eFabTopLeft"
             ><ion-icon name="arrow-forward-circle"></ion-icon
           ></ion-fab-button>
           <ion-fab-list side="end">
-            <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"
-              ><ion-icon name="logo-facebook"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"
-              ><ion-icon name="logo-twitter"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab3')"
-              ><ion-icon name="logo-vimeo"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('instagram', 'fab3')"
-              ><ion-icon name="logo-instagram"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"
+          <ion-fab-button translucent color="light" class="e2eFabBottomLeft"
             ><ion-icon name="arrow-up-circle"></ion-icon
           ></ion-fab-button>
           <ion-fab-list side="top">
-            <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"
-              ><ion-icon name="logo-facebook"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"
-              ><ion-icon name="logo-twitter"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab4')"
-              ><ion-icon name="logo-vimeo"></ion-icon
-            ></ion-fab-button>
-            <ion-fab-button translucent onclick="openSocial('instagram', 'fab4')"
-              ><ion-icon name="logo-instagram"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
           </ion-fab-list>
         </ion-fab>
 
         <ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"
-            ><ion-icon name="share"></ion-icon
-          ></ion-fab-button>
+          <ion-fab-button translucent class="e2eFabCenter"><ion-icon name="share"></ion-icon></ion-fab-button>
           <ion-fab-list side="top">
-            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"
-              ><ion-icon name="logo-vimeo"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
           </ion-fab-list>
           <ion-fab-list side="bottom">
-            <ion-fab-button translucent onclick="openSocial('facebook', 'fab5')" color="secondary"
-              ><ion-icon name="logo-facebook"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
           </ion-fab-list>
           <ion-fab-list side="start">
-            <ion-fab-button translucent onclick="openSocial('instagram', 'fab5')" color="light"
-              ><ion-icon name="logo-instagram"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
           </ion-fab-list>
           <ion-fab-list side="end">
-            <ion-fab-button translucent onclick="openSocial('twitter', 'fab5')" color="dark"
-              ><ion-icon name="logo-twitter"></ion-icon
-            ></ion-fab-button>
+            <ion-fab-button translucent><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
           </ion-fab-list>
         </ion-fab>
-
-        <ion-fab horizontal="end" vertical="center" slot="fixed">
-          <ion-fab-button translucent color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
-        </ion-fab>
       </ion-content>
 
       <ion-footer>
@@ -156,48 +107,6 @@
         </ion-toolbar>
       </ion-footer>
 
-      <script>
-        function insertAfter(el, referenceNode) {
-          referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
-        }
-
-        function insertLog(message) {
-          console.log(message);
-          var el = document.querySelector('#log');
-          const oldHTML = el.innerHTML;
-          el.innerHTML = oldHTML + '\n' + message;
-        }
-
-        function add() {
-          var newEle = document.createElement('f');
-          var ref = document.querySelector('f');
-          insertAfter(newEle, ref);
-          insertLog('add');
-        }
-
-        function clickMainFAB(container) {
-          let message = 'Clicked open social menu';
-          insertLog(message);
-
-          openLists(container);
-        }
-
-        function openSocial(network, container) {
-          let message = 'Share in ' + network;
-          insertLog(message);
-
-          openLists(container);
-        }
-
-        function openLists(container) {
-          var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
-
-          for (var i = 0; i < fabLists.length; i++) {
-            fabLists[i].activated = true;
-          }
-        }
-      </script>
-
       <style>
         f {
           display: block;