test: snowpack dev (#1171)

FredKSchott · Oct 9, 2020 · 65b1193 · 65b1193 · vercel · Oct 9, 2020
1 parent f7472c8
commit 65b1193
Show file tree

Hide file tree

Showing 13 changed files with 1,705 additions and 2 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,10 +19,18 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: build and test
+      - name: build
         run: |
           yarn --ignore-engines
           yarn build
-          yarn test
+        env:
+          CI: true
+      - name: test
+        run: npm test
+        env:
+          CI: true
+      - name: dev test
+        run: npm run test:dev
+        if: matrix.os == 'ubuntu-latest'
         env:
           CI: true
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -53,6 +53,7 @@ From the repository's root folder, run
 ```bash
 yarn build
 yarn test
+yarn test:dev # might fail on windows, see #1171
 ```
 
 ### Snapshot tests

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "publish": "npm run build && lerna publish --no-private",
     "format": "prettier --write '{snowpack,esinstall}/src/**/*.{ts,js}' '{test,plugins}/**/*.{ts,js}' '*.{js,json,md}' '**/*.{json,md}' '.github/**/*.{md,yml}' '!**/{_dist_,build,packages,pkg,TEST_BUILD_OUT,web_modules}/**' !test/create-snowpack-app/test-install",
     "test": "jest /test/ --test-timeout=30000",
+    "test:dev": "jest /test-dev/ --test-timeout=30000",
     "test:docs": "cd www && yarn && yarn build && jest /__test__/"
   },
   "workspaces": [
@@ -36,6 +37,7 @@
     "@types/ws": "^7.2.4",
     "cross-env": "^7.0.2",
     "execa": "^4.0.3",
+    "httpie": "^1.1.2",
     "jest": "^26.2.2",
     "lerna": "^3.22.1",
     "prettier": "^2.0.5",

diff --git a/test-dev/README.md b/test-dev/README.md
@@ -0,0 +1,5 @@
+# Tests for `snowpack dev`
+
+We moved the tests out of the common `test/` folder because of problems with Windows. This way, we can run the dev tests using a separate command, which we can run on CI on Ubuntu only.
+
+We would love to figure out the problem. If you develop on a Windows machine, we would appreciate your help. See [#1171](https://github.com/pikapkg/snowpack/pull/1171) for more information.
diff --git a/test-dev/__snapshots__/dev.test.ts.snap b/test-dev/__snapshots__/dev.test.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snowpack dev smoke: html 1`] = `
+"<!DOCTYPE html>
+<html lang=\\"en\\">
+  <head>
+    <meta charset=\\"utf-8\\" />
+    <link rel=\\"icon\\" href=\\"/favicon.ico\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
+    <meta name=\\"description\\" content=\\"Web site created using create-snowpack-app\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/index.css\\" />
+    <title>Snowpack App</title>
+  <script type=\\"module\\" src=\\"/__snowpack__/hmr-client.js\\"></script><script type=\\"module\\" src=\\"/__snowpack__/hmr-error-overlay.js\\"></script></head>
+  <body>
+    <img id=\\"img\\" src=\\"/logo.svg\\" />
+    <canvas id=\\"canvas\\"></canvas>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type=\\"module\\" src=\\"/_dist_/index.js\\"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run \`npm start\` or \`yarn start\`.
+      To create a production bundle, use \`npm run build\` or \`yarn build\`.
+    -->
+  </body>
+</html>
+"
+`;
+
+exports[`snowpack dev smoke: js 1`] = `
+"/**
+ * This file is just a silly example to show everything working in the browser.
+ * When you're ready to start on your site, clear the file. Happy hacking!
+ **/
+
+import confetti from '/web_modules/canvas-confetti.js';
+
+confetti.create(document.getElementById('canvas'), {
+  resize: true,
+  useWorker: true,
+})({particleCount: 200, spread: 200});
+"
+`;
diff --git a/test-dev/dev.test.ts b/test-dev/dev.test.ts
@@ -0,0 +1,69 @@
+const path = require('path');
+
+const execa = require('execa');
+const {readdirSync, readFileSync, statSync, existsSync} = require('fs');
+const glob = require('glob');
+const os = require('os');
+const {get} = require('httpie');
+
+describe('snowpack dev', () => {
+  let snowpackProcess;
+  afterEach(async () => {
+    snowpackProcess.cancel();
+    snowpackProcess.kill('SIGTERM', {
+      forceKillAfterTimeout: 2000,
+    });
+
+    try {
+      await snowpackProcess;
+    } catch (error) {
+      expect(error.killed).toEqual(true);
+    }
+  });
+
+  it('smoke', async () => {
+    expect.assertions(3);
+
+    const cwd = path.join(__dirname, 'smoke');
+
+    // start the server
+    // NOTE: we tried spawning `yarn` here, but the process was not cleaned up
+    //       correctly on CI and the action got stuck. npx does not cause that problem.
+    snowpackProcess = execa(
+      path.resolve('node_modules', '.bin', 'snowpack'),
+      ['dev', '--verbose'],
+      {cwd},
+    );
+
+    snowpackProcess.stdout.pipe(process.stdout);
+    snowpackProcess.stderr.pipe(process.stderr);
+
+    // await server to be ready and set a timeout in case something goes wrong
+    await new Promise((resolve, reject) => {
+      // start timeout in case something goes wrong.
+      const timeout = setTimeout(() => {
+        snowpackProcess.cancel();
+        console.error(output.join(''));
+        reject(new Error('Timeout: snowpack did not start server within 3 seconds.'));
+      }, 3000);
+
+      const output = [];
+      snowpackProcess.stdout.on('data', (buffer) => {
+        const line = buffer.toString();
+        output.push(line);
+        if (/Server started in/.test(line)) {
+          resolve();
+          clearTimeout(timeout);
+        }
+      });
+    });
+
+    // get HTML
+    const {data: htmlBody} = await get('http://localhost:8080');
+    expect(htmlBody).toMatchSnapshot('html');
+
+    // get built JS
+    const {data: jsBody} = await get('http://localhost:8080/_dist_/index.js');
+    expect(jsBody).toMatchSnapshot('js');
+  });
+});
diff --git a/test-dev/smoke/package.json b/test-dev/smoke/package.json
@@ -0,0 +1,15 @@
+{
+  "snowpack": {
+    "devOptions": {
+      "open": "none"
+    },
+    "mount": {
+      "public": "/",
+      "src": "/_dist_"
+    }
+  },
+  "dependencies": {
+    "canvas-confetti": "^1.2.0",
+    "snowpack": "^2.12.1"
+  }
+}
diff --git a/test-dev/smoke/public/favicon.ico b/test-dev/smoke/public/favicon.ico
diff --git a/test-dev/smoke/public/index.css b/test-dev/smoke/public/index.css
@@ -0,0 +1,14 @@
+#img {
+  display: block;
+  margin: auto;
+  height: 128px;
+  width: 128px;
+  padding: 2rem;
+}
+
+#canvas {
+  display: block;
+  margin: 2rem auto;
+  width: 540px;
+  height: 540px;
+}
diff --git a/test-dev/smoke/public/index.html b/test-dev/smoke/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Web site created using create-snowpack-app" />
+    <link rel="stylesheet" type="text/css" href="/index.css" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <img id="img" src="/logo.svg" />
+    <canvas id="canvas"></canvas>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/_dist_/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/test-dev/smoke/public/logo.svg b/test-dev/smoke/public/logo.svg
diff --git a/test-dev/smoke/src/index.js b/test-dev/smoke/src/index.js
@@ -0,0 +1,11 @@
+/**
+ * This file is just a silly example to show everything working in the browser.
+ * When you're ready to start on your site, clear the file. Happy hacking!
+ **/
+
+import confetti from 'canvas-confetti';
+
+confetti.create(document.getElementById('canvas'), {
+  resize: true,
+  useWorker: true,
+})({particleCount: 200, spread: 200});