update snapshots and add tests

packages/toolkit/__tests__/build-project-use-build-modules/.gitignore

@@ -0,0 +1 @@
+./dist

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/assets/css/admin-styles.css

@@ -0,0 +1 @@
+.admin-class { color: blue; }

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/assets/css/frontend.css

@@ -0,0 +1 @@
+.test { color: red; }

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/assets/js/admin.js

@@ -0,0 +1,3 @@
+import '../css/admin-styles.css';
+
+export const admin = () => {};

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/assets/js/frontend.js

@@ -0,0 +1,14 @@
+/* eslint-disable*/
+import '../css/frontend.css';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { useState } from 'react';
+
+const App = () => {
+	const [state] = useState(1);
+
+	return <p>This is a react app {state}</p>;
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/block.json

@@ -0,0 +1,45 @@
+{
+	"title": "Example Block",
+	"description": "An Example Block",
+	"textdomain": "tenup-scaffold",
+	"name": "tenup/example",
+	"icon": "feedback",
+	"category": "tenup-scaffold-blocks",
+	"attributes": {
+		"title": {
+			"type": "string"
+		}
+	},
+	"example": {
+		"attributes": {
+			"title": "Example Block"
+		}
+	},
+	"supports": {
+		"align": false,
+		"alignWide": false,
+		"anchor": false,
+		"color": {
+			"gradients": false,
+			"background": false,
+			"text": false
+		},
+		"customClassName": false,
+		"defaultStylePicker": false,
+		"typography": {
+			"fontSize": false,
+			"lineHeight": true
+		},
+		"html": false,
+		"inserter": true,
+		"multiple": true,
+		"reusable": false,
+		"spacing": {
+			"padding": false
+		},
+		"interactivity": true
+	},
+	"editorScript": "file:./index.js",
+	"viewScriptModule": "file:./view-module.js",
+	"script": "file:./script.js"
+}

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/edit.js

@@ -0,0 +1,4 @@
+// import './editor-styles.css';
+
+const ExampleBlockEdit = () => {};
+export default ExampleBlockEdit;

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/editor-styles.css

@@ -0,0 +1 @@
+/* Editor specific styles */

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import { registerBlockType } from '@wordpress/blocks';
+
+import edit from './edit';
+import save from './save';
+import block from './block.json';
+
+registerBlockType(block, {
+	edit,
+	save,
+});

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/save.js

@@ -0,0 +1,8 @@
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @returns {null} Dynamic blocks do not save the HTML.
+ */
+const ExampleBlockSave = () => null;
+
+export default ExampleBlockSave;

packages/toolkit/__tests__/build-project-use-build-modules/__fixtures__/includes/blocks/example/view-module.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line
+import { store } from '@wordpress/interactivity';
+
+store('example', {
+	actions: {
+		toggle: () => {
+			// eslint-disable-next-line no-console
+			console.log('Toggle Action');
+		},
+	},
+});
+
+// eslint-disable-next-line no-console
+console.log('View Module Loaded');

packages/toolkit/__tests__/build-project-use-build-modules/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "test-build-project-modules",
+	"10up-toolkit": {
+		"entry": {
+			"admin": "./__fixtures__/assets/js/admin.js",
+			"frontend": "./__fixtures__/assets/js/frontend.js"
+		},
+		"paths": {
+			"blocksDir": "./__fixtures__/includes/blocks"
+		}
+	}
+}

packages/toolkit/__tests__/build-project-use-build-modules/test.js

@@ -0,0 +1,61 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import spawn from 'cross-spawn';
+import fs from 'fs';
+import path from 'path';
+
+describe('build a project (withb block-modules)', () => {
+	beforeAll(() => {
+		spawn.sync('node', ['../../scripts/build', '--block-modules'], {
+			cwd: __dirname,
+		});
+	});
+
+	it('builds and compiles js and css', async () => {
+		expect(fs.existsSync(path.join(__dirname, 'dist', 'js', 'admin.js'))).toBeTruthy();
+		expect(fs.existsSync(path.join(__dirname, 'dist', 'js', 'admin.asset.php'))).toBeTruthy();
+		expect(fs.existsSync(path.join(__dirname, 'dist', 'js', 'frontend.js'))).toBeTruthy();
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'js', 'frontend.asset.php')),
+		).toBeTruthy();
+		expect(fs.existsSync(path.join(__dirname, 'dist', 'css', 'frontend.css'))).toBeTruthy();
+	});
+
+	it('adds react dependencies to .asset.php files', () => {
+		const frontendAssetPHP = fs
+			.readFileSync(path.join(__dirname, 'dist', 'js', 'frontend.asset.php'))
+			.toString();
+
+		expect(frontendAssetPHP).toMatch('wp-element');
+		expect(frontendAssetPHP).toMatch('react-dom');
+		expect(frontendAssetPHP).toMatch('react');
+
+		const viewModuleAsset = fs
+			.readFileSync(
+				path.join(__dirname, 'dist', 'blocks', 'example', 'view-module.asset.php'),
+			)
+			.toString();
+
+		expect(viewModuleAsset).toMatch('@wordpress/interactivity');
+		expect(viewModuleAsset).toMatch("'type' => 'module'");
+	});
+
+	it('builds blocks with modules for vieewScriptModule', () => {
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'block.json')),
+		).toBeTruthy();
+
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'index.js')),
+		).toBeTruthy();
+
+		const viewModuleFile = path.join(__dirname, 'dist', 'blocks', 'example', 'view-module.js');
+
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'view-module.js')),
+		).toBeTruthy();
+
+		const viewModuleFileContents = fs.readFileSync(viewModuleFile).toString();
+
+		expect(viewModuleFileContents).toMatch(/import \* as .* from "@wordpress\/interactivity";/);
+	});
+});