Issue #303: Add tests for metapackages (#310)

.github/workflows/TestSass.yml → .github/workflows/TestMetapackages.yml

@@ -1,4 +1,4 @@
-name: Test Sass Compilation
+name: Test Sass and JavaScript Compilation
 on:
   push:
     branches:
@@ -51,16 +51,17 @@ jobs:
 
       - name: Setup Test Files
         run: |
-          cp drainpipe/tests/fixtures/sass/Taskfile.yml .
-          cp drainpipe/tests/fixtures/sass/style.scss .
+          cp drainpipe/tests/fixtures/metapackages/Taskfile.yml .
+          cp drainpipe/tests/fixtures/metapackages/style.scss .
+          cp -R drainpipe/tests/fixtures/metapackages/js .
 
       - name: Create Artifact
         run: zip -r /tmp/drainpipe.zip ./
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v3
         with:
-          name: test-sass-build
+          name: test-metapackage-build
           path: /tmp/drainpipe.zip
 
   Test-Sass-NPM:
@@ -69,7 +70,7 @@ jobs:
     steps:
       - uses: actions/download-artifact@v3
         with:
-          name: test-sass-build
+          name: test-metapackage-build
 
       - name: Restore Workspace
         run: |
@@ -92,18 +93,18 @@ jobs:
       - name: Setup Sass
         run: |
           ddev npm init -y
-          ddev npm install @lullabot/drainpipe-sass --save-dev
+          ddev npm install drainpipe/metapackages/sass --save-dev
 
       - name: Compile Sass
-        run: ddev task assets
+        run: ddev task sass
 
-  Test-Yarn-Classic:
+  Test-Sass-Yarn-Classic:
     runs-on: ubuntu-22.04
     needs: Build
     steps:
       - uses: actions/download-artifact@v3
         with:
-          name: test-sass-build
+          name: test-metapackage-build
 
       - name: Restore Workspace
         run: |
@@ -127,18 +128,18 @@ jobs:
         run: |
           ddev yarn set version classic
           ddev yarn init -y
-          ddev yarn add @lullabot/drainpipe-sass --dev
+          ddev yarn add file:./drainpipe/metapackages/sass --dev
 
       - name: Compile Sass
-        run: ddev task assets
+        run: ddev task sass
 
-  Test-Yarn-Berry:
+  Test-Sass-Yarn-Berry:
      runs-on: ubuntu-22.04
      needs: Build
      steps:
        - uses: actions/download-artifact@v3
          with:
-           name: test-sass-build
+           name: test-metapackage-build
 
        - name: Restore Workspace
          run: |
@@ -163,7 +164,115 @@ jobs:
            ddev yarn set version berry
            ddev yarn set version 3
            ddev yarn init -y
-           ddev yarn add @lullabot/drainpipe-sass --dev
+           ddev yarn add ./drainpipe/metapackages/sass --dev
 
        - name: Compile Sass
-         run: ddev task assets
+         run: ddev task sass
+
+  Test-JavaScript-NPM:
+    runs-on: ubuntu-22.04
+    needs: Build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: test-metapackage-build
+
+      - name: Restore Workspace
+        run: |
+          cd ../
+          mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+          unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+          cd ${{ github.workspace }}
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: [email protected]#
+
+      - name: Start DDEV
+        run: ddev start
+
+      - name: Setup Sass
+        run: |
+          ddev npm init -y
+          ddev npm install focus-trap@^6.7.3
+          ddev npm install drainpipe/metapackages/javascript --save-dev
+
+      - name: Compile JavaScript
+        run: ddev task javascript
+
+  Test-JavaScript-Yarn-Classic:
+    runs-on: ubuntu-22.04
+    needs: Build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: test-metapackage-build
+
+      - name: Restore Workspace
+        run: |
+          cd ../
+          mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+          unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+          cd ${{ github.workspace }}
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: [email protected]#
+
+      - name: Start DDEV
+        run: ddev start
+
+      - name: Setup Sass
+        run: |
+          ddev yarn set version classic
+          ddev yarn init -y
+          ddev yarn add focus-trap@^6.7.3
+          ddev yarn add file:./drainpipe/metapackages/javascript --dev
+
+      - name: Compile JavaScript
+        run: ddev task javascript
+
+  Test-JavaScript-Yarn-Berry:
+    runs-on: ubuntu-22.04
+    needs: Build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: test-metapackage-build
+
+      - name: Restore Workspace
+        run: |
+          cd ../
+          mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+          unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+          cd ${{ github.workspace }}
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: [email protected]#
+
+      - name: Start DDEV
+        run: ddev start
+
+      - name: Setup Sass
+        run: |
+          ddev yarn set version berry
+          ddev yarn set version 3
+          ddev yarn init -y
+          ddev yarn add focus-trap@^6.7.3
+          ddev yarn add ./drainpipe/metapackages/javascript --dev
+
+      - name: Compile JavaScript
+        run: ddev task javascript

tasks/javascript.yml

@@ -29,10 +29,11 @@ tasks:
           ARGS="{{- .args -}}"
         fi
         FILES="{{if .DRAINPIPE_JAVASCRIPT}}{{.DRAINPIPE_JAVASCRIPT | catLines | trim}}{{end}}"
-        COMMAND="./node_modules/.bin/drainpipe-javascript"
-        if [ -f "yarn.lock" ]; then
+        COMMAND="node ./node_modules/.bin/drainpipe-javascript"
+        if [ -f "yarn.lock" ] && [ ! -d "node_modules" ]; then
           COMMAND="yarn drainpipe-javascript"
         fi
+        echo "$COMMAND drainpipe-javascript --files=\"$FILES\" $ARGS"
         $COMMAND drainpipe-javascript --files="$FILES" $ARGS
   watch:
     desc: As compile, but continues running and watching for changes

tests/fixtures/sass/Taskfile.yml → tests/fixtures/metapackages/Taskfile.yml

@@ -4,17 +4,24 @@ dotenv: ['.env', '.env.defaults']
 
 includes:
   sass: ./vendor/lullabot/drainpipe/tasks/sass.yml
+  javascript: ./vendor/lullabot/drainpipe/tasks/javascript.yml
 
 output: prefixed
 silent: true
 
 vars:
   DRAINPIPE_SASS: |
     style.scss:style.css
+  DRAINPIPE_JAVASCRIPT: |
+    js/script.js:js/script.min.js
 
 tasks:
-  assets:
+  sass:
     desc: "Builds assets such as CSS & JS"
     cmds:
-      - if [ -f "yarn.lock" ]; then yarn; else npm install; fi
       - task: sass:compile
+
+  javascript:
+    desc: "Builds assets such as CSS & JS"
+    cmds:
+      - task: javascript:compile

tests/fixtures/metapackages/js/mobile-nav.js

@@ -0,0 +1,96 @@
+/**
+ * @file
+ * Sets up show/hide interactions for mobile menu including focus trap.
+ */
+
+import { createFocusTrap } from "focus-trap";
+
+export default (Drupal, once) => {
+  let mainMenu;
+  let mainMenuCaret;
+  let mobileNavButton;
+  let mobileNavButtonState;
+  let header;
+  let headerFocusTrap;
+  let searchButton;
+
+  /**
+   * Functionality of mobile menu.
+   */
+  function mobileMenuControl(e) {
+    e.stopImmediatePropagation();
+
+    // Check if search button is in DOM, if so, make sure it
+    // closes before menu opens.
+    searchButton = header.querySelector(".utility-menu__link--search button");
+    if (searchButton) {
+      searchButton.setAttribute("aria-expanded", false);
+      header
+        .querySelector(".aba-header__search-dropdown")
+        .classList.remove("is-visible");
+    }
+
+    mobileNavButtonState = mobileNavButton.getAttribute("aria-expanded");
+    // If mobile nav btn is closed, open it.
+    // Else, close it.
+    if (mobileNavButtonState == "false") {
+      headerFocusTrap.activate();
+      mainMenu.style.setProperty("--header-height", header.clientHeight + "px");
+      mobileNavButton.setAttribute("aria-expanded", true);
+      mainMenu.classList.add("is-visible");
+      mainMenuCaret.classList.add("is-visible");
+      document.body.classList.add("is-fixed");
+      document.addEventListener("click", clickOutside);
+    } else {
+      headerFocusTrap.deactivate();
+      mobileNavButton.setAttribute("aria-expanded", false);
+      mainMenu.classList.remove("is-visible");
+      mainMenuCaret.classList.remove("is-visible");
+      document.body.classList.remove("is-fixed");
+      document.removeEventListener("click", clickOutside);
+    }
+  }
+
+  /**
+   * Ensure mobile menu closes if click outside.
+   */
+  function clickOutside(event) {
+    if (!event.target.closest(".main-menu")) {
+      mobileNavButton.setAttribute("aria-expanded", false);
+      mainMenu.classList.remove("is-visible");
+      mainMenuCaret.classList.remove("is-visible");
+      document.body.classList.remove("is-fixed");
+      document.removeEventListener("click", clickOutside);
+    }
+  }
+
+  /**
+   * Initialize event listeners and focus trap.
+   */
+  function init(el) {
+    header = el;
+    mobileNavButton = header.querySelector(".mobile-nav-button__button");
+    mainMenu = header.querySelector(".main-menu");
+    mainMenuCaret = header.querySelector(".main-menu__caret");
+    headerFocusTrap = createFocusTrap([".mobile-nav-button", ".main-menu"], {
+      clickOutsideDeactivates: true,
+    });
+    mobileNavButton.addEventListener("click", mobileMenuControl);
+    document.addEventListener("keyup", (e) => {
+      if (e.key === "Escape") {
+        headerFocusTrap.deactivate();
+        mobileNavButton.setAttribute("aria-expanded", false);
+        mainMenu.classList.remove("is-visible");
+        mainMenuCaret.classList.remove("is-visible");
+        document.body.classList.remove("is-fixed");
+        document.removeEventListener("click", clickOutside);
+      }
+    });
+  }
+
+  Drupal.behaviors.mainMenu = {
+    attach(context) {
+      once("mobileHeader", ".aba-header--wrapper", context).forEach(init);
+    },
+  };
+};

tests/fixtures/metapackages/js/script.js

@@ -0,0 +1,4 @@
+import mobileNav from "./mobile-nav";
+// Ensures correct colors are shown for :active state of buttons on iOS.
+document.addEventListener("touchstart", function () {}, false);
+mobileNav(Drupal, once);