<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50485] trunk/.github/workflows: Build/Test Tools: Generalize the NPM test workflow.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50485">50485</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50485","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>desrosj</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-03-03 19:50:40 +0000 (Wed, 03 Mar 2021)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Build/Test Tools: Generalize the NPM test workflow.

The NPM test GitHub Actions workflow is currently used to verify that `npm install` and `npm run build` will complete successfully on Windows.

This generalizes the workflow and adds testing for Linux and MacOS to confirm that the scripts used to build WordPress also complete successfully in those environments.

Because MacOS workflow runs consume GHA minutes at a 10x rate, it's added in a separate job in order to perform a more strict check.

This also adds steps to verify that using `npm run build:dev` and `npm run grunt clean`/`npm run grunt clean -dev` run successfully 

Props johnbillion.
Fixes <a href="https://core.trac.wordpress.org/ticket/52658">#52658</a>.</pre>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkgithubworkflowstestnpmyml">trunk/.github/workflows/test-npm.yml</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkgithubworkflowsverifynpmonwindowsyml">trunk/.github/workflows/verify-npm-on-windows.yml</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkgithubworkflowstestnpmyml"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.github/workflows/test-npm.yml</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.github/workflows/test-npm.yml                              (rev 0)
+++ trunk/.github/workflows/test-npm.yml        2021-03-03 19:50:40 UTC (rev 50485)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,173 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+name: Test NPM
+
+on:
+  push:
+    branches:
+      - master
+      - trunk
+      - '3.[7-9]'
+      - '[4-9].[0-9]'
+  pull_request:
+    branches:
+      - master
+      - trunk
+      - '3.[7-9]'
+      - '[4-9].[0-9]'
+    paths:
+      # These files configure NPM. Changes could affect the outcome.
+      - 'package*.json'
+      # JavaScript files are built using NPM.
+      - '**.js'
+      # CSS and SCSS files are built using NPM.
+      - '**.scss'
+      - '**.css'
+      # Changes to workflow files should always verify all workflows are successful.
+      - '.github/workflows/**.yml'
+
+env:
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: ${{ true }}
+
+jobs:
+  # Prepares the workflow.
+  #
+  # Performs the following steps:
+  # - Cancels all previous workflow runs for pull requests that have not completed.
+  prepare-workflow:
+    name: Prepare the workflow
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'WordPress/wordpress-develop' || github.event_name == 'pull_request' }}
+
+    steps:
+      - name: Cancel previous runs of this workflow (pull requests only)
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: styfle/cancel-workflow-action@3d86a7cc43670094ac248017207be0295edbc31d
+
+  # Verifies that installing NPM dependencies and building WordPress works as expected.
+  #
+  # Performs the following steps:
+  # - Checks out the repository.
+  # - Logs debug information about the runner container.
+  # - Installs NodeJS 14.
+  # - Sets up caching for NPM.
+  # _ Installs NPM dependencies using install-changed to hash the `package.json` file.
+  # - Builds WordPress to run from the `build` directory.
+  # - Cleans up after building WordPress to the `build` directory.
+  # - Builds WordPress to run from the `src` directory.
+  # - Cleans up after building WordPress to the `src` directory.
+  test-npm:
+    name: Test NPM on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.repository == 'WordPress/wordpress-develop' || github.event_name == 'pull_request' }}
+    needs: prepare-workflow
+    strategy:
+      matrix:
+        os: [ ubuntu-latest, windows-latest ]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Log debug information
+        run: |
+          npm --version
+          node --version
+          curl --version
+          git --version
+          svn --version
+
+      - name: Install NodeJS
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Cache NodeJS modules (Ubuntu & MacOS)
+        uses: actions/cache@v2
+        if: ${{ matrix.os != 'windows-latest' }}
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Get NPM cache directory (Windows only)
+        if: ${{ matrix.os == 'windows-latest' }}
+        id: npm-cache
+        run: echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Cache NodeJS modules (Windows only)
+        uses: actions/cache@v2
+        if: ${{ matrix.os == 'windows-latest' }}
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build WordPress
+        run: npm run build
+
+      - name: Clean after building
+        run: npm run grunt clean
+
+      - name: Build WordPress in /src
+        run: npm run build:dev
+
+      - name: Clean after building in /src
+        run: npm run grunt clean --dev
+
+  # Verifies that installing NPM dependencies and building WordPress works as expected on MacOS.
+  #
+  # This is a separate job in order to that more strict conditions can be used.
+  #
+  # Performs the following steps:
+  # - Checks out the repository.
+  # - Logs debug information about the runner container.
+  # - Installs NodeJS 14.
+  # - Sets up caching for NPM.
+  # _ Installs NPM dependencies using install-changed to hash the `package.json` file.
+  # - Builds WordPress to run from the `build` directory.
+  # - Cleans up after building WordPress to the `build` directory.
+  # - Builds WordPress to run from the `src` directory.
+  # - Cleans up after building WordPress to the `src` directory.
+  test-npm-macos:
+    name: Test NPM on MacOS
+    runs-on: macos-latest
+    if: ${{ github.repository == 'WordPress/wordpress-develop' }}
+    needs: prepare-workflow
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Log debug information
+        run: |
+          npm --version
+          node --version
+          curl --version
+          git --version
+          svn --version
+
+      - name: Install NodeJS
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Cache NodeJS modules
+        uses: actions/cache@v2
+        if: ${{ matrix.os != 'windows-latest' }}
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build WordPress
+        run: npm run build
+
+      - name: Clean after building
+        run: npm run grunt clean
+
+      - name: Build WordPress in /src
+        run: npm run build:dev
+
+      - name: Clean after building in /src
+        run: npm run grunt clean --dev
</ins></span></pre></div>
<a id="trunkgithubworkflowsverifynpmonwindowsyml"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: trunk/.github/workflows/verify-npm-on-windows.yml</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.github/workflows/verify-npm-on-windows.yml 2021-03-03 19:24:44 UTC (rev 50484)
+++ trunk/.github/workflows/verify-npm-on-windows.yml   2021-03-03 19:50:40 UTC (rev 50485)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,83 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-name: Test NPM on Windows
-
-on:
-  push:
-    branches:
-      - master
-      - trunk
-      - '3.[7-9]'
-      - '[4-9].[0-9]'
-  pull_request:
-    branches:
-      - master
-      - trunk
-      - '3.[7-9]'
-      - '[4-9].[0-9]'
-    paths:
-      # These files configure NPM. Changes could affect the outcome.
-      - 'package*.json'
-      # JavaScript files are built using NPM.
-      - '**.js'
-      # CSS and SCSS files are built using NPM.
-      - '**.scss'
-      - '**.css'
-      # Changes to workflow files should always verify all workflows are successful.
-      - '.github/workflows/**.yml'
-
-env:
-  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: ${{ true }}
-
-jobs:
-  # Verifies that installing NPM dependencies and building WordPress works on Windows.
-  #
-  # Performs the following steps:
-  # - Cancels all previous workflow runs for pull requests that have not completed.
-  # - Checks out the repository.
-  # - Logs debug information about the runner container.
-  # - Installs NodeJS 14.
-  # - Sets up caching for NPM.
-  # _ Installs NPM dependencies using install-changed to hash the `package.json` file.
-  # - Builds WordPress to run from the `build` directory.
-  test-npm:
-    name: Tests NPM on Windows
-    runs-on: windows-latest
-    if: ${{ github.repository == 'WordPress/wordpress-develop' || github.event_name == 'pull_request' }}
-
-    steps:
-      - name: Cancel previous runs of this workflow (pull requests only)
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: styfle/cancel-workflow-action@3d86a7cc43670094ac248017207be0295edbc31d
-
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Log debug information
-        run: |
-          npm --version
-          node --version
-          curl --version
-          git --version
-          svn --version
-
-      - name: Install NodeJS
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-
-      - name: Get NPM cache directory
-        id: npm-cache
-        run: echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Cache NodeJS modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Build WordPress
-        run: npm run build
</del></span></pre>
</div>
</div>

</body>
</html>