Add full-content tests for parsing + blocks list + serialization (#849)

* Add infrastructure for testing parsing + blocks list + serialization

* Add individual test fixtures for each block in the demo content

* Ensure that there is at least one fixture file for each registered block

* Add readme file describing new tests

blocks/test/fixtures/README.md

@@ -0,0 +1,46 @@
+## Full post content test fixtures
+
+This directory contains sets of fixture files that are used to test the parsing
+and serialization logic.
+
+Each test is made up of three fixture files:
+
+1. `fixture-name.html`: The initial post content.
+2. `fixture-name.json`: The **expected** parsed representation of the block(s)
+   inside the post content, along with their attributes and any nested content.
+   The contents of this file are compared against the **actual** parsed block
+   object(s).
+3. `fixture-name.serialized.html`: The **expected** result of calling
+   `serialize` on the parsed block object(s).  The contents of this file are
+   compared against the **actual** re-serialized post content.  This final step
+   simulates opening and re-saving a post.
+
+Every block is required to have at least one such set of fixture files to test
+the parsing and serialization of that block.  These fixtures must be named like
+`core-blockname{-*,}.{html,json,serialized.html}`.  For example, for the
+`core/image` block, the following three fixture files must exist:
+
+1. `core-image.html` (or `core-image-specific-test-name.html`).  Must contain a
+   `<!-- wp:core/image -->` block.
+2. `core-image.json` (or `core-image-specific-test-name.html`).
+3. `core-image.serialized.html` (or
+   `core-image-specific-test-name.serialized.html`).
+
+Ideally all important attributes and features of the block should be tested
+this way.  New contributions in the form of additional test cases are always
+welcome - this is a great way for us to identify bugs and prevent them from
+recurring in the future.
+
+When adding a new test, it's only necessary to create file (1) above, then
+there is a command you can run to generate (2) and (3):
+
+```sh
+GENERATE_MISSING_FIXTURES=y npm run test-unit -- --grep 'full post content fixture'
+```
+
+However, when using this command, please be sure to manually verify that the
+contents of the `.json` and `.serialized.html` files are as expected.
+
+See the
+[`full-content.js`](../full-content.js)
+test file for the code that runs these tests.

blocks/test/fixtures/core-button-center.html

@@ -0,0 +1,3 @@
+<!-- wp:core/button align="center" -->
+<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg"><span>Help build Gutenberg</span></a></div>
+<!-- /wp:core/button -->

blocks/test/fixtures/core-button-center.json

@@ -0,0 +1,13 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/button",
+        "attributes": {
+            "align": "center",
+            "url": "https://github.com/WordPress/gutenberg",
+            "text": [
+                "Help build Gutenberg"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-button-center.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/button align="center" -->
+<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
+<!-- /wp:core/button -->
+

blocks/test/fixtures/core-embed-youtube-caption.html

@@ -0,0 +1,3 @@
+<!-- wp:core/embed url="https://www.youtube.com/watch?v=Nl6U7UotA-M" -->
+<figure><iframe src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe><figcaption>State of the Word 2016</figcaption></figure>
+<!-- /wp:core/embed -->

blocks/test/fixtures/core-embed-youtube-caption.json

@@ -0,0 +1,12 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/embed",
+        "attributes": {
+            "url": "//www.youtube.com/embed/Nl6U7UotA-M",
+            "caption": [
+                "State of the Word 2016"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-embed-youtube-caption.serialized.html

@@ -0,0 +1,6 @@
+<!-- wp:core/embed -->
+<figure><iframe src="//www.youtube.com/embed/Nl6U7UotA-M"></iframe>
+    <figcaption>State of the Word 2016</figcaption>
+</figure>
+<!-- /wp:core/embed -->
+

blocks/test/fixtures/core-freeform.html

@@ -0,0 +1,6 @@
+<!-- wp:core/freeform -->
+Testing freeform block with some
+<div class="wp-some-class">
+	HTML <span style="color: red;">content</span>
+</div>
+<!-- /wp:core/freeform -->

blocks/test/fixtures/core-freeform.json

@@ -0,0 +1,9 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/freeform",
+        "attributes": {
+            "html": "Testing freeform block with some<div class=\"wp-some-class\">HTML <span style=\"color: red;\">content</span></div>"
+        }
+    }
+]

blocks/test/fixtures/core-freeform.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:core/freeform -->
+Testing freeform block with some
+<div class="wp-some-class">HTML <span style="color: red;">content</span></div>
+<!-- /wp:core/freeform -->
+

blocks/test/fixtures/core-heading-h2-em.html

@@ -0,0 +1,3 @@
+<!-- wp:core/heading -->
+<h2>The <em>Inserter</em> Tool</h2>
+<!-- /wp:core/heading -->

blocks/test/fixtures/core-heading-h2-em.json

@@ -0,0 +1,17 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/heading",
+        "attributes": {
+            "content": [
+                "The ",
+                {
+                    "type": "em",
+                    "children": "Inserter"
+                },
+                " Tool"
+            ],
+            "nodeName": "H2"
+        }
+    }
+]

blocks/test/fixtures/core-heading-h2-em.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/heading -->
+<h2>The <em>Inserter</em> Tool</h2>
+<!-- /wp:core/heading -->
+

blocks/test/fixtures/core-heading-h2.html

@@ -0,0 +1,3 @@
+<!-- wp:core/heading -->
+<h2>A picture is worth a thousand words, or so the saying goes</h2>
+<!-- /wp:core/heading -->

blocks/test/fixtures/core-heading-h2.json

@@ -0,0 +1,12 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/heading",
+        "attributes": {
+            "content": [
+                "A picture is worth a thousand words, or so the saying goes"
+            ],
+            "nodeName": "H2"
+        }
+    }
+]

blocks/test/fixtures/core-heading-h2.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/heading -->
+<h2>A picture is worth a thousand words, or so the saying goes</h2>
+<!-- /wp:core/heading -->
+

blocks/test/fixtures/core-image-center-caption.html

@@ -0,0 +1,3 @@
+<!-- wp:core/image align="center" -->
+<figure><img src="https://cldup.com/YLYhpou2oq.jpg" class="aligncenter"/><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>
+<!-- /wp:core/image -->

blocks/test/fixtures/core-image-center-caption.json

@@ -0,0 +1,13 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/image",
+        "attributes": {
+            "align": "center",
+            "url": "https://cldup.com/YLYhpou2oq.jpg",
+            "caption": [
+                "Give it a try. Press the \"really wide\" button on the image toolbar."
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-image-center-caption.serialized.html

@@ -0,0 +1,6 @@
+<!-- wp:core/image align="center" -->
+<figure><img src="https://cldup.com/YLYhpou2oq.jpg" class="aligncenter" />
+    <figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption>
+</figure>
+<!-- /wp:core/image -->
+

blocks/test/fixtures/core-image.html

@@ -0,0 +1,3 @@
+<!-- wp:core/image -->
+<figure><img src="https://cldup.com/uuUqE_dXzy.jpg" /></figure>
+<!-- /wp:core/image -->

blocks/test/fixtures/core-image.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/image",
+        "attributes": {
+            "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "caption": []
+        }
+    }
+]

blocks/test/fixtures/core-image.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/image -->
+<img src="https://cldup.com/uuUqE_dXzy.jpg" class="alignnone" />
+<!-- /wp:core/image -->
+

blocks/test/fixtures/core-list-ul.html

@@ -0,0 +1,3 @@
+<!-- wp:core/list -->
+<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>
+<!-- /wp:core/list -->

blocks/test/fixtures/core-list-ul.json

@@ -0,0 +1,42 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/list",
+        "attributes": {
+            "nodeName": "UL",
+            "values": [
+                {
+                    "type": "li",
+                    "children": "Text & Headings"
+                },
+                {
+                    "type": "li",
+                    "children": "Images & Videos"
+                },
+                {
+                    "type": "li",
+                    "children": "Galleries"
+                },
+                {
+                    "type": "li",
+                    "children": "Embeds, like YouTube, Tweets, or other WordPress posts."
+                },
+                {
+                    "type": "li",
+                    "children": "Layout blocks, like Buttons, Hero Images, Separators, etc."
+                },
+                {
+                    "type": "li",
+                    "children": [
+                        "And ",
+                        {
+                            "type": "em",
+                            "children": "Lists"
+                        },
+                        " like this one of course :)"
+                    ]
+                }
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-list-ul.serialized.html

@@ -0,0 +1,11 @@
+<!-- wp:core/list -->
+<ul>
+    <li>Text &amp; Headings</li>
+    <li>Images &amp; Videos</li>
+    <li>Galleries</li>
+    <li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
+    <li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>
+    <li>And <em>Lists</em> like this one of course :)</li>
+</ul>
+<!-- /wp:core/list -->
+

blocks/test/fixtures/core-preformatted.html

@@ -0,0 +1,3 @@
+<!-- wp:core/preformatted -->
+<pre>Some <em>preformatted</em> text...<br>And more!</pre>
+<!-- /wp:core/preformatted -->

blocks/test/fixtures/core-preformatted.json

@@ -0,0 +1,20 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/preformatted",
+        "attributes": {
+            "content": [
+                "Some ",
+                {
+                    "type": "em",
+                    "children": "preformatted"
+                },
+                " text...",
+                {
+                    "type": "br"
+                },
+                "And more!"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-preformatted.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/preformatted -->
+<pre>Some <em>preformatted</em> text...<br/>And more!</pre>
+<!-- /wp:core/preformatted -->
+

blocks/test/fixtures/core-pullquote.html

@@ -0,0 +1,5 @@
+<!-- wp:core/pullquote -->
+<blockquote class="blocks-pullquote">
+<p>Testing pullquote block...</p><footer>...with a caption</footer>
+</blockquote>
+<!-- /wp:core/pullquote -->

blocks/test/fixtures/core-pullquote.json

@@ -0,0 +1,16 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/pullquote",
+        "attributes": {
+            "value": [
+                [
+                    "Testing pullquote block..."
+                ]
+            ],
+            "citation": [
+                "...with a caption"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-pullquote.serialized.html

@@ -0,0 +1,7 @@
+<!-- wp:core/pullquote -->
+<blockquote class="blocks-pullquote">
+    <p>Testing pullquote block...</p>
+    <footer>...with a caption</footer>
+</blockquote>
+<!-- /wp:core/pullquote -->
+

blocks/test/fixtures/core-quote-style-1.html

@@ -0,0 +1,3 @@
+<!-- wp:core/quote style="1" -->
+<blockquote class="blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><footer>Matt Mullenweg, 2017</footer></blockquote>
+<!-- /wp:core/quote -->

blocks/test/fixtures/core-quote-style-1.json

@@ -0,0 +1,17 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/quote",
+        "attributes": {
+            "style": "1",
+            "value": [
+                [
+                    "The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery."
+                ]
+            ],
+            "citation": [
+                "Matt Mullenweg, 2017"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-quote-style-1.serialized.html

@@ -0,0 +1,7 @@
+<!-- wp:core/quote style="1" -->
+<blockquote class="blocks-quote-style-1">
+    <p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p>
+    <footer>Matt Mullenweg, 2017</footer>
+</blockquote>
+<!-- /wp:core/quote -->
+

blocks/test/fixtures/core-quote-style-2.html

@@ -0,0 +1,3 @@
+<!-- wp:core/quote style="2" -->
+<blockquote class="blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><footer>Maya Angelou</footer></blockquote>
+<!-- /wp:core/quote -->

blocks/test/fixtures/core-quote-style-2.json

@@ -0,0 +1,17 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/quote",
+        "attributes": {
+            "style": "2",
+            "value": [
+                [
+                    "There is no greater agony than bearing an untold story inside you."
+                ]
+            ],
+            "citation": [
+                "Maya Angelou"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-quote-style-2.serialized.html

@@ -0,0 +1,7 @@
+<!-- wp:core/quote style="2" -->
+<blockquote class="blocks-quote-style-2">
+    <p>There is no greater agony than bearing an untold story inside you.</p>
+    <footer>Maya Angelou</footer>
+</blockquote>
+<!-- /wp:core/quote -->
+

blocks/test/fixtures/core-separator.html

@@ -0,0 +1,3 @@
+<!-- wp:core/separator -->
+<hr/>
+<!-- /wp:core/separator -->