refactor(elements/ino-fab): migrate stencil e2e tests to spec test

packages/elements/src/components/ino-fab-set/ino-fab-set.scss

@@ -24,15 +24,31 @@ $dialFlexByDirection: (
   right: row,
 );
 
-:host {
+ino-fab-set {
   position: fixed;
   display: flex;
   width: auto;
 
+  &.ino-top-bottom-location-top {
+    top: 20px;
+  }
+
+  &.ino-top-bottom-location-bottom {
+    bottom: 20px;
+  }
+
+  &.ino-left-right-location-left {
+    left: 20px;
+  }
+
+  &.ino-left-right-location-right {
+    right: 20px;
+  }
+
   .ino-fab-set-wrapper {
     display: flex;
 
-    ::slotted(*) {
+    ino-fab {
       padding: $fab-set-padding;
 
       .mdc-fab .mdc-fab__icon {
@@ -50,48 +66,23 @@ $dialFlexByDirection: (
       align-self: center;
     }
 
-    ::slotted([slot='icon-opened']),
-    .ino-fab-set-icon--opened {
+    div[slot='icon-leading'] {
+      display: contents;
+    }
+
+    .ino-fab-set-icon--opened,
+    [slot='icon-opened'] {
       display: none;
     }
 
-    ::slotted([slot='icon-closed']),
-    .ino-fab-set-icon--closed {
+    .ino-fab-set-icon--closed,
+    [slot='icon-closed'] {
       display: block;
     }
   }
-}
-
-:host(.ino-fab-set--open-dial) {
-  .ino-speed-dial {
-    display: flex;
-  }
-
-  #{$primary-fab-icon-selector} {
-    transition-duration: 100ms;
-  }
-}
 
-:host(.ino-top-bottom-location-top) {
-  top: 20px;
-}
-
-:host(.ino-top-bottom-location-bottom) {
-  bottom: 20px;
-}
-
-:host(.ino-left-right-location-left) {
-  left: 20px;
-}
-
-:host(.ino-left-right-location-right) {
-  right: 20px;
-}
-
-$directions: 'top', 'bottom', 'left', 'right';
-
-@each $direction in $directions {
-  :host {
+  $directions: 'top', 'bottom', 'left', 'right';
+  @each $direction in $directions {
     .ino-direction-#{$direction} {
       .ino-fab-set-icon {
         transform: map-get($transformByDirection, $direction);
@@ -107,15 +98,24 @@ $directions: 'top', 'bottom', 'left', 'right';
     }
   }
 
-  :host(.ino-fab-set--open-dial) {
-    ::slotted([slot='icon-closed']),
-    .ino-fab-set-icon--closed {
-      display: none;
+  &.ino-fab-set--open-dial {
+    .ino-fab-set-wrapper {
+      .ino-fab-set-icon--opened,
+      [slot='icon-opened'] {
+        display: block;
+      }
+      .ino-fab-set-icon--closed,
+      [slot='icon-closed'] {
+        display: none;
+      }
     }
 
-    ::slotted([slot='icon-opened']),
-    .ino-fab-set-icon--opened {
-      display: block;
+    .ino-speed-dial {
+      display: flex;
+    }
+
+    #{$primary-fab-icon-selector} {
+      transition-duration: 100ms;
     }
   }
 }

packages/elements/src/components/ino-fab-set/ino-fab-set.spec.ts

@@ -0,0 +1,24 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { FabSet } from './ino-fab-set';
+import { Fab } from '../ino-fab/ino-fab';
+import { listenForEvent } from '../../util/test-utils';
+
+describe('InoFabButton', () => {
+  let page: SpecPage;
+  let inoFabSet: HTMLInoFabSetElement;
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [FabSet, Fab],
+      html: `<ino-fab-set><ino-fab></ino-fab><ino-fab></ino-fab></ino-fab-set>`,
+    });
+    inoFabSet = page.body.querySelector('ino-fab-set');
+  });
+
+  it('should be clickable by default', async () => {
+    const { eventSpy } = listenForEvent(page, 'click');
+    const inoPrimaryFab: HTMLElement = inoFabSet.querySelector('#primary-fab');
+    inoPrimaryFab.click();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+});

packages/elements/src/components/ino-fab-set/ino-fab-set.tsx

@@ -31,7 +31,7 @@ import { HorizontalLocation, Locations, VerticalLocation } from '../types';
 @Component({
   tag: 'ino-fab-set',
   styleUrl: 'ino-fab-set.scss',
-  shadow: true,
+  shadow: false,
 })
 export class FabSet implements ComponentInterface {
   @Element() el!: HTMLInoFabSetElement;
@@ -94,7 +94,9 @@ export class FabSet implements ComponentInterface {
             tooltip-placement="none"
           >
             {hasClosedIcon ? (
-              <slot slot="icon-leading" name="icon-closed" />
+              <div slot="icon-leading">
+                <slot name="icon-closed" />
+              </div>
             ) : (
               <ino-icon
                 class="ino-fab-set-icon ino-fab-set-icon--closed"
@@ -104,7 +106,9 @@ export class FabSet implements ComponentInterface {
             )}
 
             {hasOpenedIcon ? (
-              <slot slot="icon-leading" name="icon-opened" />
+              <div slot="icon-leading">
+                <slot name="icon-opened" />
+              </div>
             ) : (
               <ino-icon
                 class="ino-fab-set-icon ino-fab-set-icon--opened"

packages/elements/src/components/ino-fab/ino-fab.scss

@@ -44,7 +44,7 @@ $extended-edged-borders: (
   }
 }
 
-:host {
+ino-fab {
   /**
    * @prop --ino-fab-color: Text color
    * @prop --fab-background-color: Background color
@@ -75,59 +75,41 @@ $extended-edged-borders: (
     --ino-fab-icon-color-disabled,
     #{theme.$white}
   );
-}
-
-/*** colors ***/
-:host .mdc-fab {
-  @include setEdgedBorders(top-left);
-
-  @include fab.ink-color(var(--fab-color));
-  @include fab.container-color(var(--fab-background-color));
 
-  &:hover {
-    @include fab.container-color(var(--fab-background-color-hover));
-  }
+  display: inline-block;
 
-  &:active,
-  &:after {
-    @include fab.container-color(var(--fab-background-color-active));
-  }
+  // colors
+  .mdc-fab {
+    @include setEdgedBorders(top-left);
 
-  &:disabled {
-    @include fab.ink-color(var(--fab-color-disabled));
-    @include fab.container-color(var(--fab-background-color-disabled));
-    pointer-events: none;
+    @include fab.ink-color(var(--fab-color));
+    @include fab.container-color(var(--fab-background-color));
 
-    ::slotted(ino-icon),
-    ino-icon {
-      --icon-color: var(--fab-icon-color-disabled);
+    &:hover {
+      @include fab.container-color(var(--fab-background-color-hover));
     }
-  }
 
-  ::slotted(ino-icon),
-  ino-icon {
-    --icon-color: var(--fab-icon-color);
-  }
-}
+    &:active,
+    &:after {
+      @include fab.container-color(var(--fab-background-color-active));
+    }
 
-// Generate ino-edge-position classes
-@each $position in $edge-positions {
-  :host(.ino-fab--edge-position-#{$position}) .mdc-fab {
-    @include setEdgedBorders($position);
-  }
-}
+    &:disabled {
+      @include fab.ink-color(var(--fab-color-disabled));
+      @include fab.container-color(var(--fab-background-color-disabled));
+      pointer-events: none;
 
-:host {
-  display: inline-block;
+      ino-icon {
+        --icon-color: var(--fab-icon-color-disabled);
+      }
+    }
 
-  .mdc-fab {
-    ::slotted(ino-icon),
     ino-icon {
+      --icon-color: var(--fab-icon-color);
       --icon-width: 30px;
       --icon-height: 30px;
     }
 
-    &.mdc-fab--mini ::slotted(ino-icon),
     &.mdc-fab--mini ino-icon {
       --icon-width: 25px;
       --icon-height: 25px;
@@ -144,4 +126,11 @@ $extended-edged-borders: (
         0 16px 32px 0 rgba(61, 214, 245, 0.14);
     }
   }
+
+  // Generate ino-edge-position classes
+  @each $position in $edge-positions {
+    &.ino-fab--edge-position-#{$position} .mdc-fab {
+      @include setEdgedBorders($position);
+    }
+  }
 }