10up-toolkit/packages/toolkit/__tests__/build-project-use-block-assets-multiple-blockdirs/test.js at 292c0d58666d7c5c5a5b76f893602404ba3106c9 · 10up/10up-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* eslint-disable import/no-extraneous-dependencies */
import spawn from 'cross-spawn';
import fs from 'fs';
import path from 'path';

describe('build a project (with useBlockAssets and multiple block dirs)', () => {
	beforeAll(() => {
		spawn.sync('node', ['../../scripts/build'], {
			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');
	});

	it('extracts css imported in js files', () => {
		// chunk name for css imported in js matches the js entry point
		expect(fs.existsSync(path.join(__dirname, 'dist', 'css', 'admin.css'))).toBeTruthy();

		// this should not exist since it is not an entry point on its own
		expect(fs.existsSync(path.join(__dirname, 'dist', 'css', 'admin-styles.css'))).toBeFalsy();
	});

	it('builds blocks from multiple block dirs', () => {
		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'block.json')),
		).toBeTruthy();

		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'index.js')),
		).toBeTruthy();

		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'editor-styles.css')),
		).toBeTruthy();

		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example-2', 'block.json')),
		).toBeTruthy();

		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example-2', 'index.js')),
		).toBeTruthy();

		expect(
			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example-2', 'editor-styles.css')),
		).toBeTruthy();
	});

	it('generates version when using style/viewStyle', () => {
		const blockJson = JSON.parse(
			fs
				.readFileSync(path.join(__dirname, 'dist', 'blocks', 'example', 'block.json'))
				.toString(),
		);
		expect(blockJson).toMatchObject({
			version: 'c5b9d82d328781bf3f4a5c8f19dfb700494821c2b514b7e5e724154f1eea10eb',
		});

		const blockJson2 = JSON.parse(
			fs
				.readFileSync(path.join(__dirname, 'dist', 'blocks', 'example-2', 'block.json'))
				.toString(),
		);
		expect(blockJson2).toMatchObject({
			version: 'c5b9d82d328781bf3f4a5c8f19dfb700494821c2b514b7e5e724154f1eea10eb',
		});
	});
});