CI test npm publishing simulation (#3045)

* CI test npm publishing simulation

Fixes #3044

* debugging

* debugging

* don't forget to prepare

* got to install to be able to build

* debugging

* debugging

* ready

* clone the real mdn/content repo instead

* only build 1 page

* use the jest developing testing

* port

* correct URL

* use working-directory

* be clever about DEV_BASE_URL

* feedbacked

* better code comment?

* lump build and install

* DEVELOPING_SKIP_DEV_URL

.github/workflows/developing.yml

@@ -62,7 +62,7 @@ jobs:
       - name: Wait for servers
         run: |
           # Just a slight delay to wait until the dev server is ready.
-          sleep 5
+          sleep 3
 
           curl --retry-connrefused --retry 5 http://localhost:5000 > /dev/null
           curl --retry-connrefused --retry 5 --silent http://localhost:3000 > /dev/null

.github/workflows/npm-published-simulation.yml

@@ -0,0 +1,112 @@
+# Instead of waiting for Yari to be published to npmjs.com and be upgraded
+# inside mdn/content by Dependabot, we do all those steps here using `npm pack`.
+
+name: NPM Publish simulation
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/checkout@v2
+        with:
+          repository: mdn/content
+          path: mdn/content
+
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:
+          node-version: "12"
+
+      - name: Cache node_modules
+        uses: actions/[email protected]
+        id: cached-node_modules
+        with:
+          path: |
+            node_modules
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install all yarn packages
+        if: steps.cached-node_modules.outputs.cache-hit != 'true'
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+        run: yarn --frozen-lockfile
+
+      - name: Setup kernel for react native, increase watchers
+        run: |
+          # When running Yari on Linux, you might get the
+          # "Error: ENOSPC: System limit for number of file watchers reached" error.
+          # This, resolves that.
+          # Source https://github.com/expo/expo-github-action/issues/20#issuecomment-541676895
+          echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+      - name: Prepare to build
+        env:
+          # The following env vars is what we do in npm-publish.yml
+          # Each variable set is documented there.
+
+          REACT_APP_CRUD_MODE: true
+          REACT_APP_DISABLE_AUTH: true
+          CONTENT_ROOT: testing/content/files
+        run: |
+          yarn prepare-build
+
+      - name: Build and install tarball
+        run: |
+          npm pack
+          TARBALL=`ls mdn-yari-*.tgz`
+          echo $TARBALL
+          ls -lh $TARBALL
+          mv $TARBALL mdn/content/
+          cd mdn/content
+          yarn add file:$TARBALL
+
+      - name: Start Yari from mock content repo
+        working-directory: mdn/content
+        run: |
+          yarn start > /tmp/stdout.log 2> /tmp/stderr.log &
+
+      - name: View some URLs on localhost:5000
+        run: |
+          curl --retry-connrefused --retry 5 -I http://localhost:5000
+
+          # Basically, test if it 200 OKs. If not, this'll exit non-zero.
+          curl http://localhost:5000/en-US/ > /dev/null
+          curl http://localhost:5000/en-US/docs/MDN/Kitchensink > /dev/null
+
+      - name: Test viewing the dev server
+        env:
+          # This will make sure the tests in `testing/tests/*.test.js` only run
+          # if the development server is up and ready to be tested.
+          TESTING_DEVELOPING: true
+          # Use local chrome installs since we skip downloading it as part
+          # of the yarn installs above
+          PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome
+          # When running Yari from within mdn/content it only starts 1 server;
+          # the one on localhost:5000. No React dev server; the one
+          # on localhost:3000.
+          # Testing that dev server is not relevant or important in this context.
+          DEVELOPING_SKIP_DEV_URL: true
+        run: |
+          yarn test:testing developing
+
+      - name: Debug server's stdout and stderr if tests failed
+        if: failure()
+        run: |
+          echo "STDOUT..................................................."
+          cat /tmp/stdout.log
+          echo ""
+          echo "STDERR..................................................."
+          cat /tmp/stderr.log
+
+      - name: SSR build a page
+        working-directory: mdn/content
+        run: |
+          yarn build files/en-us/mdn/kitchensink/index.html

testing/tests/developing.test.js

@@ -6,14 +6,21 @@ const { setDefaultOptions } = require("expect-puppeteer");
 // and then the server building of the page can be pretty heavy.
 setDefaultOptions({ timeout: 5000 });
 
+const DEV_BASE_URL =
+  process.env.DEVELOPING_DEV_BASE_URL || "http://localhost:3000";
+
 function devURL(pathname = "/") {
-  return `http://localhost:3000${pathname}`;
+  return `${DEV_BASE_URL}${pathname}`;
 }
 
+const SERVER_BASE_URL =
+  process.env.DEVELOPING_SERVER_BASE_URL || "http://localhost:5000";
 function serverURL(pathname = "/") {
-  return `http://localhost:5000${pathname}`;
+  return `${SERVER_BASE_URL}${pathname}`;
 }
 
+const SKIP_DEV_URL = JSON.parse(process.env.DEVELOPING_SKIP_DEV_URL || "false");
+
 // This "trick" is to force every test to be skipped if the environment
 // variable hasn't been set. This way, when you run `jest ...`, and it finds
 // all `**/*.test.js` it doesn't actually run these tests unless explicitly
@@ -25,9 +32,17 @@ const withDeveloping = JSON.parse(process.env.TESTING_DEVELOPING || "false")
 
 describe("Testing the kitchensink page", () => {
   withDeveloping("open the page", async () => {
-    await page.goto(devURL("/en-US/docs/MDN/Kitchensink"));
-    await expect(page).toMatch("The MDN Content Kitchensink");
-    await expect(page).toMatch("No known flaws at the moment");
+    // If the test suite runs in a way that there's no separate dev server,
+    // don't bother using the `DEV_BASE_URL`.
+    // For example, when it tests the `npm pack` tarball, it's starting only
+    // the one server (on `localhost:5000`) that suite will set the `DEV_BASE_URL`
+    // to be the same as `SAME_BASE_URL`.
+    // In conclusion, if there's only 1 base URL to test again; don't test both.
+    if (!SKIP_DEV_URL) {
+      await page.goto(devURL("/en-US/docs/MDN/Kitchensink"));
+      await expect(page).toMatch("The MDN Content Kitchensink");
+      await expect(page).toMatch("No known flaws at the moment");
+    }
   });
 
   withDeveloping("server-side render HTML", async () => {