@duetds/components 5.2.3 → 5.3.0

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -71,7 +71,7 @@ export class DuetChoiceGroup {
   async connectedCallback() {
     const el = this.element;
     if (this.value === undefined) {
-      const choice = findCheckedOption(el, "duet-choice");
+      const choice = findCheckedOption(el, ":scope > duet-choice");
       if (choice !== undefined) {
         await choice.componentOnReady();
         if (this.value === undefined) {
@@ -79,7 +79,7 @@ export class DuetChoiceGroup {
         }
       }
     }
-    this.mutationO = watchForOptions(el, "duet-choice", newOption => {
+    this.mutationO = watchForOptions(el, ":scope > duet-choice", newOption => {
       if (newOption !== undefined) {
         newOption.componentOnReady().then(() => {
           this.value = newOption.value;
@@ -108,7 +108,7 @@ export class DuetChoiceGroup {
      * Make sure we get all choices first so values are up to date prior
      * to caching the choice group value
      */
-    const choices = Array.from(this.element.querySelectorAll("duet-choice"));
+    const choices = Array.from(this.element.querySelectorAll(":scope > duet-choice, :scope .duet-choice-group > duet-choice"));
     const { value } = this;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins

package/lib/collection/components/duet-footer/duet-footer.css

@@ -235,6 +235,8 @@ a:hover .duet-footer-arrow {
 
 .duet-footer-menu {
   padding: 20px !important;
+  display: flex;
+  gap: 2rem;
   font-size: 0.875rem;
 }
 @media (min-width: 36em) {
@@ -262,13 +264,43 @@ a:hover .duet-footer-arrow {
   display: inline-block;
   margin: 0 8px;
 }
+.duet-footer-menu .duet-footer-divider-copyright {
+  display: none;
+}
+.duet-footer-menu .duet-footer-menu-links {
+  flex: 1;
+}
+@media (min-width: 62em) {
+  .duet-footer-menu .duet-footer-menu-links {
+    text-align: right;
+  }
+}
 .duet-footer-menu a:last-of-type .duet-footer-divider {
   display: none;
 }
 
 .duet-footer-copyright {
+  display: none;
+  font-size: 0.875rem;
   color: white;
 }
+@media (min-width: 62em) {
+  .duet-footer-copyright {
+    display: inline;
+  }
+}
+.duet-footer-copyright.duet-footer-copyright-mobile {
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 1.25rem;
+  padding-left: 2rem;
+  text-align: left;
+}
+@media (min-width: 62em) {
+  .duet-footer-copyright.duet-footer-copyright-mobile {
+    display: none;
+  }
+}
 
 .duet-footer-simple {
   padding: 0;
@@ -300,6 +332,9 @@ a:hover .duet-footer-arrow {
 .duet-footer-simple .duet-footer-menu {
   padding: 20px 0 !important;
 }
+.duet-footer-simple .duet-footer-copyright-mobile {
+  padding-left: 0;
+}
 .duet-footer-simple.duet-theme-turva {
   color: #171c3a;
   border-color: #e4e4e6;
@@ -309,160 +344,6 @@ a:hover .duet-footer-arrow {
   color: #171c3a;
 }
 
-.duet-footer-multilevel duet-logo {
-  margin-left: 0.5rem !important;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel duet-logo {
-    margin-left: -0.5rem !important;
-  }
-}
-.duet-footer-multilevel .duet-footer-link {
-  padding: 0.5rem 1.25rem !important;
-  border: 0;
-}
-.duet-footer-multilevel .duet-footer-link:first-of-type {
-  margin: 0;
-}
-.duet-footer-multilevel .duet-footer-link .duet-footer-arrow {
-  margin-left: 0.5rem;
-}
-.duet-footer-multilevel .duet-footer-link .duet-footer-arrow duet-icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-link {
-    padding: 0.75rem 0 !important;
-  }
-}
-.duet-footer-multilevel .duet-footer-top {
-  flex-direction: column;
-  gap: 1rem 0;
-  align-items: flex-start;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-}
-.duet-footer-multilevel .multilevel-main-item {
-  margin-top: 1.25rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-main-item {
-    margin-top: 0;
-  }
-}
-.duet-footer-multilevel .multilevel-main-item .duet-footer-link {
-  padding: 0 0.5 1.25rem !important;
-  font-weight: 700;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-main-item .duet-footer-link {
-    padding: 0 0 0.5rem !important;
-  }
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-primary-items {
-    column-gap: 0;
-    width: 100%;
-    columns: 3;
-  }
-  .duet-footer-multilevel .multilevel-primary-items .duet-footer-link {
-    display: inline-flex;
-  }
-}
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link {
-  padding: 0.875rem 1.25rem !important;
-  font-weight: 700;
-}
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
-  padding: 1.25rem 1.25rem 0.875rem !important;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-secondary-items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    width: 100%;
-  }
-  .duet-footer-multilevel .multilevel-secondary-items .duet-footer-link,
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
-    display: inline-flex;
-    padding: 1rem 0 !important;
-  }
-}
-.duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
-  padding-top: 0.875rem !important;
-  font-weight: 700;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-right .duet-footer-link {
-    padding: 0.375rem 0 !important;
-    font-size: 0.875rem;
-    font-weight: 400;
-  }
-  .duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
-    padding-top: 0 !important;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-  .duet-footer-multilevel .multilevel-right .tertiary-main-item .duet-footer-arrow {
-    display: none;
-  }
-}
-.duet-footer-multilevel .duet-footer-menu {
-  padding: 1.25rem !important;
-  line-height: 2.5;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-menu {
-    padding-right: 0 !important;
-    padding-left: 0 !important;
-    text-align: right;
-  }
-}
-.duet-footer-multilevel .duet-footer-copyright {
-  display: none;
-  font-size: 0.875rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-copyright {
-    position: absolute;
-    left: 48px;
-    display: inline;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-footer-multilevel .duet-footer-copyright {
-    left: 0;
-  }
-}
-.duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
-  display: block;
-  padding-top: 0.5rem;
-  padding-bottom: 1.25rem;
-  text-align: center;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
-    display: none;
-  }
-}
-.duet-footer-multilevel.duet-theme-turva .duet-footer-copyright-mobile {
-  padding-left: 1.25rem;
-  text-align: left;
-}
-.duet-footer-multilevel.duet-theme-turva .duet-footer-icon {
-  color: #171c3a;
-  background: white;
-}
-.duet-footer-multilevel.duet-theme-turva a:hover .duet-footer-icon {
-  background: #e6e6e6;
-}
-
 .duet-footer-external {
   display: inline-block;
   margin-left: 4px;

package/lib/collection/components/duet-footer/duet-footer.js

@@ -1,9 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import arrowDownSmallIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import arrowRightIcon from "@duetds/icons/lib/assets/action-arrow-right";
-import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, Fragment, h, Prop, State, Watch } from "@stencil/core";
@@ -16,11 +14,6 @@ const i18n = {
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },
   en: { lahi: "© LocalTapiola", turva: "© Turva" },
 };
-const i18nMultilevel = {
-  fi: { lahi: "© LähiTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-  sv: { lahi: "© LokalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-  en: { lahi: "© LocalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-};
 const createEvent = (ev, data) => ({
   component: "duet-footer",
   data,
@@ -39,9 +32,6 @@ export class DuetFooter {
      */
     this.processedMainItem = null;
     this.processedItems = null;
-    this.processedSecondaryItems = null;
-    this.processedTertiaryMainItem = null;
-    this.processedTertiaryItems = null;
     this.processedMenu = null;
     /**
      * Theme of the navigation.
@@ -116,11 +106,7 @@ export class DuetFooter {
    * Local methods
    */
   async refresh() {
-    this.processedMainItem = parsePossibleJSON(this.mainItem);
     this.processedItems = parsePossibleJSON(this.items);
-    this.processedSecondaryItems = parsePossibleJSON(this.secondaryItems);
-    this.processedTertiaryMainItem = parsePossibleJSON(this.tertiaryMainItem);
-    this.processedTertiaryItems = parsePossibleJSON(this.tertiaryItems);
     this.processedMenu = parsePossibleJSON(this.menu);
   }
   /**
@@ -128,21 +114,19 @@ export class DuetFooter {
    * Always the last one in the class.
    */
   render() {
-    const text = this.variation === "multilevel" ? getLocaleString(i18nMultilevel) : getLocaleString(i18n);
+    const text = getLocaleString(i18n);
     const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
     return (h("footer", { class: {
         "duet-footer": true,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
         "duet-footer-simple": this.variation === "simple",
-        "duet-footer-multilevel": this.variation === "multilevel",
       } },
       h("div", { class: "duet-footer-wrapper" },
         h("div", { class: "duet-footer-top", part: "top" },
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
-            this.variation !== "multilevel" &&
             this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
               h("div", { class: "duet-footer-icon" },
                 h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })),
@@ -150,60 +134,20 @@ export class DuetFooter {
               item.external && h("duet-visually-hidden", null,
                 ", ",
                 this.accessibleLabelExternal),
-              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))),
-          this.processedItems && this.variation === "multilevel" && (h("div", { class: "multilevel" },
-            h("div", { class: "multilevel-left" },
-              h("div", { class: "multilevel-main-item" }, this.processedMainItem && (h("a", { class: "duet-footer-link", href: this.processedMainItem.href, id: this.processedMainItem.id, target: this.processedMainItem.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, this.processedMainItem) },
-                h("span", null, this.processedMainItem.label),
-                this.processedMainItem.external && (h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal)),
-                h("div", { class: "duet-footer-arrow" }, this.processedMainItem.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))),
-              h("div", { class: "multilevel-primary-items" }, this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                h("div", { class: "duet-footer-icon" },
-                  h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor" })),
-                h("span", null, item.label),
-                item.external && h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal),
-                h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))))),
-              h("div", { class: "multilevel-secondary-items" }, this.processedSecondaryItems &&
-                this.processedSecondaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                  h("span", null, item.label),
-                  item.external && (h("duet-visually-hidden", null,
-                    ", ",
-                    this.accessibleLabelExternal)),
-                  h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightSmallIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))))),
-            h("div", { class: "multilevel-right" },
-              this.processedTertiaryMainItem && (h("span", { class: "duet-footer-link tertiary-main-item", id: this.processedTertiaryMainItem.id },
-                h("span", null, this.processedTertiaryMainItem.label),
-                this.processedTertiaryMainItem.external && (h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal)),
-                h("div", { class: "duet-footer-arrow" },
-                  h("duet-icon", { icon: arrowDownSmallIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
-              this.processedTertiaryItems &&
-                this.processedTertiaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                  h("span", null, item.label),
-                  item.external && h("duet-visually-hidden", null,
-                    ", ",
-                    this.accessibleLabelExternal),
-                  h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))))),
+              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" }))))))),
         h("slot", { name: "extra" }),
         h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
-          this.processedMenu && (h(Fragment, null,
-            this.variation !== "multilevel" && (h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")),
-            this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
-              item.label,
-              item.external && (h(Fragment, null,
-                h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal),
-                h("div", { class: "duet-footer-external" },
-                  h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
-              h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))),
-        this.variation === "multilevel" && (h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`)))));
+          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
+            item.label,
+            item.external && (h(Fragment, null,
+              h("duet-visually-hidden", null,
+                ", ",
+                this.accessibleLabelExternal),
+              h("div", { class: "duet-footer-external" },
+                h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
+            h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))),
+        h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
   }
   static get is() { return "duet-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -329,23 +273,6 @@ export class DuetFooter {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
-    "mainItem": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main item of footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "main-item",
-      "reflect": false
-    },
     "items": {
       "type": "any",
       "mutable": false,
@@ -363,57 +290,6 @@ export class DuetFooter {
       "attribute": "items",
       "reflect": false
     },
-    "secondaryItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the secondary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "secondary-items",
-      "reflect": false
-    },
-    "tertiaryMainItem": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main item of tertiary footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "tertiary-main-item",
-      "reflect": false
-    },
-    "tertiaryItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the tertiary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "tertiary-items",
-      "reflect": false
-    },
     "accessibleLabelExternalDefaults": {
       "type": "string",
       "mutable": false,
@@ -482,9 +358,6 @@ export class DuetFooter {
   static get states() { return {
     "processedMainItem": {},
     "processedItems": {},
-    "processedSecondaryItems": {},
-    "processedTertiaryMainItem": {},
-    "processedTertiaryItems": {},
     "processedMenu": {}
   }; }
   static get events() { return [{

package/lib/collection/utils/fixture-utils.js

@@ -1,15 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-require("dotenv").config();
-const port = process.env.KOA_PROXY_PORT ? parseInt(process.env.KOA_PROXY_PORT) : 3334;
 import * as fs from "fs";
 import * as path from "path";
-import { createPage } from "./test-utils";
 /**
  * Get fixtures from directories and parse them for processing
  */
-function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
+export function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
   const component = dirPath.split(path.sep).pop();
   const fullPath = path.join(dirPath, fixPath);
   let files;
@@ -36,77 +33,3 @@ function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
     fixtures,
   };
 }
-/**
- * Generate automatic fixture testing for jest
- */
-const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px", lang = "fi") => {
-  let fontFile = "localtapiola";
-  let className = "";
-  if (theme === "turva") {
-    fontFile = "turva";
-    className = "duet-theme-turva";
-  }
-  return `
-<html class="${className}" lang="${lang}" style="min-height: auto">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visual regression test</title>
-    <style>
-      *,
-      *::after,
-      *::before  {
-      transition-delay: 0s !important;
-      transition-duration: 0s !important;
-      animation-delay: -0.0001s !important;
-      animation-duration: 0s !important;
-      animation-play-state: paused !important;
-      caret-color: transparent !important;
-      color-adjust: exact !important;
-      }
-      *:focus,
-      *:focus::after,
-      *:focus::before {
-        outline: none !important;
-        outline-style: none !important;
-      }
-
-    </style>
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/fonts/lib/${fontFile}.css" />
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/tokens/lib/tokens.custom-properties.css" />
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/css/lib/duet.css" />
-  </head>
-  <body style="min-height: ${minHeight} !important; margin: 8px">
-    ${fixtureHtml}
-  </body>
-</html>
-
-`;
-};
-// getFixturesAndTest returns fixtures object and creates synthetic tests
-export const getFixturesAndTest = (directory, options = {}) => {
-  const { minHeight, skipFixture } = options;
-  const componentFixtures = getAllFixturesFiles(directory, "fixtures", skipFixture);
-  fixtureTests(componentFixtures, minHeight);
-  return componentFixtures;
-};
-export const fixtureTests = (componentFixtures, minHeight) => {
-  if (!process.env.VIZDIF) {
-    return;
-  }
-  describe(`${componentFixtures.component} vizdif`, () => {
-    Object.keys(componentFixtures.fixtures).forEach(fixtureName => {
-      const html = componentFixtures.fixtures[fixtureName];
-      it(`${fixtureName} renders correctly with Turva theme`, async () => {
-        const page = await createPage(htmlFragment(html, "turva", minHeight));
-        await page.find("#fixture");
-        expect(await page.screenshot()).toMatchImageSnapshot();
-      });
-      it(`${fixtureName} renders correctly with Lahitapiola theme`, async () => {
-        const page = await createPage(htmlFragment(html, "default", minHeight));
-        await page.find("#fixture");
-        expect(await page.screenshot()).toMatchImageSnapshot();
-      });
-    });
-  });
-};