test: Refactor snapshot testing

packages/cli/global.d.ts

@@ -1,12 +1,5 @@
 declare const __webpack_public_path__: string;
 
-declare namespace jest {
-	interface Matchers<R> {
-		toBeCloseInSize(receivedSize: number, expectedSize: number): R;
-		toFindMatchingKey(receivedKey: string): R;
-	}
-}
-
 // Modified from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/shelljs/index.d.ts
 declare module 'shelljs' {
 	const shell: {

packages/cli/package.json

@@ -118,6 +118,7 @@
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/jest": "^24.9.1",
+    "directory-tree": "^3.5.1",
     "html-looks-like": "^1.0.2",
     "jest": "^24.9.0",
     "less": "^4.1.1",

packages/cli/tests/__snapshots__/build.test.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`preact build builds the \`default\` template 1`] = `
+"build
+  assets
+    icons
+      android-chrome-192x192.png: 14058
+      android-chrome-512x512.png: 51484
+      apple-touch-icon.png: 12746
+      favicon-16x16.png: 626
+      favicon-32x32.png: 1487
+      mstile-150x150.png: 9050
+    favicon.ico: 15086
+    preact-logo-inverse.svg: 649
+    preact-logo.svg: 645
+  ssr-build
+    asset-manifest.json: 178
+    ssr-bundle.js: 30158
+    ssr-bundle.js.map: 54671
+    ssr-bundle.82489.css: 2585
+    ssr-bundle.82489.css.map: 3680
+  asset-manifest.json: 1142
+  bundle.c4895.js: 22552
+  bundle.c4895.js.map: 113627
+  bundle.4c6ac.css: 1276
+  favicon.ico: 15086
+  index.html: 4162
+  manifest.json: 455
+  polyfills.1ea90.js: 6426
+  polyfills.1ea90.js.map: 21116
+  preact_prerender_data.json: 11
+  push-manifest.json: 388
+  route-home.chunk.5d28d.js: 1174
+  route-home.chunk.5d28d.js.map: 2028
+  route-home.chunk.9bcab.css: 821
+  route-profile.chunk.4c330.js: 3490
+  route-profile.chunk.4c330.js.map: 15002
+"
+`;
+
+exports[`preact build builds the \`default\` template with esm 1`] = `
+"build
+  assets
+    icons
+      android-chrome-192x192.png: 14058
+      android-chrome-512x512.png: 51484
+      apple-touch-icon.png: 12746
+      favicon-16x16.png: 626
+      favicon-32x32.png: 1487
+      mstile-150x150.png: 9050
+    favicon.ico: 15086
+    preact-logo-inverse.svg: 649
+    preact-logo.svg: 645
+  ssr-build
+    asset-manifest.json: 178
+    ssr-bundle.js: 30158
+    ssr-bundle.js.map: 54671
+    ssr-bundle.82489.css: 2585
+    ssr-bundle.82489.css.map: 3680
+  asset-manifest.json: 1174
+  bundle.c4895.js: 22552
+  bundle.c4895.js.map: 113627
+  bundle.9eeeb.esm.js: 22272
+  bundle.9eeeb.esm.js.map: 113603
+  bundle.4c6ac.css: 1276
+  favicon.ico: 15086
+  index.html: 4256
+  manifest.json: 455
+  polyfills.1ea90.js: 6426
+  polyfills.1ea90.js.map: 21116
+  polyfills.bfe9e.esm.js: 5721
+  polyfills.bfe9e.esm.js.map: 21081
+  preact_prerender_data.json: 11
+  push-manifest.json: 404
+  route-home.chunk.5d28d.js: 1174
+  route-home.chunk.5d28d.js.map: 2028
+  route-home.chunk.f8caa.esm.js: 1152
+  route-home.chunk.f8caa.esm.js.map: 2024
+  route-home.chunk.9bcab.css: 821
+  route-profile.chunk.4c330.js: 3490
+  route-profile.chunk.4c330.js.map: 15002
+  route-profile.chunk.44303.esm.js: 2424
+  route-profile.chunk.44303.esm.js.map: 14942
+"
+`;

packages/cli/tests/__snapshots__/create.test.js.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`preact create scaffolds the \`default\` official template 1`] = `
+"default-template-project
+  .gitignore
+  README.md
+  package.json
+  src
+    assets
+      favicon.ico
+      icons
+        android-chrome-192x192.png
+        android-chrome-512x512.png
+        apple-touch-icon.png
+        favicon-16x16.png
+        favicon-32x32.png
+        mstile-150x150.png
+      preact-logo-inverse.svg
+      preact-logo.svg
+    components
+      app.js
+      header
+        index.js
+        style.css
+    index.js
+    manifest.json
+    routes
+      home
+        index.js
+        style.css
+      profile
+        index.js
+    style
+      index.css
+    sw.js
+    template.html
+  tests
+    __mocks__
+      browserMocks.js
+      fileMocks.js
+      setupTests.js
+    header.test.js
+"
+`;

packages/cli/tests/build.test.js

@@ -3,11 +3,11 @@ const { access, mkdir, readdir, readFile, rename, unlink, writeFile } =
 	require('fs').promises;
 const looksLike = require('html-looks-like');
 const { create, build } = require('./lib/cli');
-const { snapshot } = require('./lib/utils');
+const { snapshotDir } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
-const minimatch = require('minimatch');
 const shell = require('shelljs');
+const dirTree = require('directory-tree');
 
 const prerenderUrlFiles = [
 	'prerender-urls.json',
@@ -35,18 +35,6 @@ function getRegExpFromMarkup(markup) {
 	return new RegExp(minifiedMarkup);
 }
 
-function testMatch(received, expected) {
-	let receivedKeys = Object.keys(received);
-	let expectedKeys = Object.keys(expected);
-	expect(receivedKeys).toHaveLength(expectedKeys.length);
-	for (let key in expected) {
-		const receivedKey = receivedKeys.find(k => minimatch(k, key));
-		expect(key).toFindMatchingKey(receivedKey);
-
-		expect(receivedKey).toBeCloseInSize(received[receivedKey], expected[key]);
-	}
-}
-
 /**
  * Get build output file as utf-8 string
  * @param {string} dir
@@ -67,17 +55,17 @@ describe('preact build', () => {
 
 		await build(dir);
 
-		let output = await snapshot(join(dir, 'build'));
-		testMatch(output, images.default);
+		const directoryTree = dirTree(join(dir, 'build'), { attributes: ['size'] });
+		expect(await snapshotDir([directoryTree])).toMatchSnapshot();
 	});
 
 	it('builds the `default` template with esm', async () => {
 		let dir = await create('default');
 
 		await build(dir, { esm: true });
 
-		let output = await snapshot(join(dir, 'build'));
-		testMatch(output, images['default-esm']);
+		const directoryTree = dirTree(join(dir, 'build'), { attributes: ['size'] });
+		expect(await snapshotDir([directoryTree])).toMatchSnapshot();
 	});
 
 	it('builds the `typescript` template', async () => {

packages/cli/tests/create.test.js

@@ -1,19 +1,22 @@
 const { access, readFile } = require('fs').promises;
-const { join, relative } = require('path');
+const { join } = require('path');
 const { create } = require('./lib/cli');
-const { expand } = require('./lib/utils');
-const snapshots = require('./images/create');
+const { snapshotDir } = require('./lib/utils');
 const shell = require('shelljs');
+const dirTree = require('directory-tree');
 
 describe('preact create', () => {
 	it('scaffolds the `default` official template', async () => {
 		let dir = await create('default');
 
-		let output = await expand(dir).then(arr => {
-			return arr.map(x => relative(dir, x));
+		const directoryTree = dirTree(dir, {
+			exclude: /node_modules|package-lock|yarn.lock/,
 		});
 
-		expect(output.sort()).toEqual(snapshots.default);
+		// Creating a stable name, as the test directory is normally a randomized string
+		directoryTree.name = 'default-template-project';
+
+		expect(await snapshotDir([directoryTree], false)).toMatchSnapshot();
 	});
 
 	it('should use template.html from the github repo', async () => {

packages/cli/tests/images/build.js

@@ -1,52 +1,3 @@
-const common = {
-	'polyfills.1ea90.js': 6426,
-	'polyfills.1ea90.js.map': 21668,
-};
-
-exports.default = Object.assign({}, common, {
-	'assets/icons/android-chrome-192x192.png': 14058,
-	'assets/icons/android-chrome-512x512.png': 51484,
-	'assets/icons/apple-touch-icon.png': 12746,
-	'assets/icons/favicon-16x16.png': 626,
-	'assets/icons/favicon-32x32.png': 1487,
-	'assets/icons/mstile-150x150.png': 9050,
-	'assets/preact-logo.svg': 645,
-	'assets/preact-logo-inverse.svg': 649,
-	'assets/favicon.ico': 15086,
-	'ssr-build/ssr-bundle.82489.css': 2601,
-	'ssr-build/ssr-bundle.82489.css.map': 3708,
-	'ssr-build/ssr-bundle.js': 28830,
-	'ssr-build/ssr-bundle.js.map': 52686,
-	'ssr-build/asset-manifest.json': 178,
-	'bundle.4c6ac.css': 1276,
-	'bundle.c4895.js': 22529,
-	'bundle.c4895.js.map': 111801,
-	'favicon.ico': 15086,
-	'index.html': 4127,
-	'manifest.json': 455,
-	'preact_prerender_data.json': 11,
-	'push-manifest.json': 388,
-	'asset-manifest.json': 1142,
-	'route-home.chunk.9bcab.css': 834,
-	'route-home.chunk.5d28d.js': 1149,
-	'route-home.chunk.5d28d.js.map': 1961,
-	'route-profile.chunk.4c330.js': 3490,
-	'route-profile.chunk.4c330.js.map': 15002,
-});
-exports['default-esm'] = Object.assign({}, exports.default, {
-	'bundle.*.esm.js': 22249,
-	'bundle.*.esm.js.map': 113538,
-	'polyfills.*.esm.js': 5721,
-	'polyfills.*.esm.js.map': 21633,
-	'route-home.chunk.*.esm.js': 1127,
-	'route-home.chunk.*.esm.js.map': 1957,
-	'route-profile.chunk.*.esm.js': 2424,
-	'route-profile.chunk.*.esm.js.map': 14942,
-	'index.html': 4221,
-	'push-manifest.json': 404,
-	'asset-manifest.json': 1174,
-});
-
 exports.sass = `
 <body>
 	<div class="background__2mKGE">