Add basic E2E test for blocks. (#174)

* Add e2e utils package.

* Adds .eslintrc

* Add e2e to CI

* Add tests for first 5 blocks.

* Add remaining tests and snapshot data.

* Fix syntax error.

* Use correct script name.

* Remove import approach to test for timeout.

* Add e2e workflow.

* Spaces.

* Use inline snapshots and increase test timeout.

* Move all tests into /tests in  corresponding block directory and rename them basis.spec.js.

* Change timeout to 30 seconds to match changes in scripts package.

* Remove tests from the first three blocks to reduce ramp up.

* Remove timeout change.

* Update packages.

* Revert "Update packages."

This reverts commit 22c30d3.

* Update packages.

* Remove test directory. The tests don't work and have to real use.

* Move basic block e2e tests into corresponding directory.

* Ignore the e2e folders when linting js.

* Add build to e2e workflow.

* Spaces, not tabs 🤦

* Update .github/workflows/e2e-tests.yml

Co-authored-by: Stephen Edgar <[email protected]>

* Update .github/workflows/e2e-tests.yml

Co-authored-by: Stephen Edgar <[email protected]>

* Add changes to the build process per code review.

* Whitespace issues.

* Update .github/workflows/e2e-tests.yml

Co-authored-by: Greg Ziółkowski <[email protected]>

---------

Co-authored-by: Stephen Edgar <[email protected]>
Co-authored-by: Greg Ziółkowski <[email protected]>

.eslintrc

@@ -1,3 +1,13 @@
 {
-    "extends":  [ "plugin:@wordpress/eslint-plugin/recommended" ]
+    "extends":  [ "plugin:@wordpress/eslint-plugin/recommended" ],
+	"overrides": [
+		{
+			"files": [
+				"**/e2e/*spec.js"
+			],
+			"extends": [
+				"plugin:@wordpress/eslint-plugin/test-e2e"
+			  ]
+		}
+	]
 }

.github/workflows/e2e-tests.yml

@@ -0,0 +1,27 @@
+name: E2E Tests
+
+on:
+    pull_request:
+    push:
+        branches:
+            - trunk
+jobs:
+    e2e:
+      runs-on: ubuntu-latest
+      strategy:
+            matrix:
+                node-version: [16.x, 18.x]
+      steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, start env, and run e2e tests
+        run: |
+          npm ci
+          npm run build:all
+          npm run env:start
+          npm run test:e2e
+        env:
+          CI: true

.gitignore

@@ -11,4 +11,4 @@ vendor
 .vscode
 
 /vendor/
-build
+artifacts

blocks-jsx/03-editable-esnext/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-03-editable-esnext -->
+		<p class=\\"wp-block-gutenberg-examples-example-03-editable-esnext\\"></p>
+		<!-- /wp:gutenberg-examples/example-03-editable-esnext -->"
+	` );
+} );

blocks-jsx/04-controls-esnext/e2e/basic.spec.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+// This test seems to need more time to run.
+jest.setTimeout( 100000 );
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-04-controls-esnext -->
+		<p class=\\"wp-block-gutenberg-examples-example-04-controls-esnext gutenberg-examples-align-none\\"></p>
+		<!-- /wp:gutenberg-examples/example-04-controls-esnext -->"
+	` );
+} );

blocks-jsx/05-recipe-card-esnext/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-05-recipe-card-esnext -->
+		<div class=\\"wp-block-gutenberg-examples-example-05-recipe-card-esnext\\"><h2></h2><h3>Ingredients</h3><ul class=\\"ingredients\\"></ul><h3>Instructions</h3><div class=\\"steps\\"></div></div>
+		<!-- /wp:gutenberg-examples/example-05-recipe-card-esnext -->"
+	` );
+} );

blocks-jsx/06-inner-blocks-esnext/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-06-esnext -->
+		<div class=\\"wp-block-gutenberg-examples-example-06-esnext\\"></div>
+		<!-- /wp:gutenberg-examples/example-06-esnext -->"
+	` );
+} );

blocks-non-jsx/03-editable/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-03-editable -->
+		<p class=\\"wp-block-gutenberg-examples-example-03-editable\\"></p>
+		<!-- /wp:gutenberg-examples/example-03-editable -->"
+	` );
+} );

blocks-non-jsx/04-controls/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-04-controls -->
+		<p class=\\"wp-block-gutenberg-examples-example-04-controls gutenberg-examples-align-none\\"></p>
+		<!-- /wp:gutenberg-examples/example-04-controls -->"
+	` );
+} );

blocks-non-jsx/05-recipe-card/e2e/basic.spec.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-05-recipe-card -->
+		<div class=\\"wp-block-gutenberg-examples-example-05-recipe-card\\"><h2></h2><h3>Ingredients</h3><ul class=\\"ingredients\\"></ul><h3>Instructions</h3><div class=\\"steps\\"></div></div>
+		<!-- /wp:gutenberg-examples/example-05-recipe-card -->"
+	` );
+} );

blocks-non-jsx/06-inner-blocks/e2e/basic.spec.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	insertBlock,
+	createNewPost,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+const { title, name } = json;
+
+// Increase the timeout limit for this test.
+jest.setTimeout( 30000 );
+
+it( `${ title } block should be available`, async () => {
+	await createNewPost();
+	await insertBlock( title );
+
+	// Check if block was inserted
+	expect( await page.$( `[data-type="${ name }"]` ) ).not.toBeNull();
+
+	expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:gutenberg-examples/example-06 -->
+		<div class=\\"wp-block-gutenberg-examples-example-06\\"></div>
+		<!-- /wp:gutenberg-examples/example-06 -->"
+	` );
+} );