feat: support multiple HTML code blocks per fiddle (#112)

* add multiple JS blocks doc to readme

* feat: support multiple html code blocks

* pass null if html fiddles are empty

Author: bahmutov

README.md

@@ -54,6 +54,46 @@ The "html" block is optional.
 
 Note: after extracting the tests, this preprocessor sets [@bahmutov/cypress-fiddle](https://github.com/bahmutov/cypress-fiddle) to run them.
 
+### Multiple JavaScript blocks
+
+You can include multiple JS blocks in each fiddle
+
+    <!-- fiddle Example -->
+    ```js
+    cy.contains('#hello', 'Hello')
+    ```
+
+    Some time later more test code
+
+    ```js
+    cy.wait(2000)
+    ```
+
+    <!-- fiddle.end -->
+
+### Multiple HTML blocks
+
+You can include multiple HTML blocks in each fiddle
+
+    <!-- fiddle Multiple HTML code blocks -->
+
+    ```html
+    <div id="greeting">Hello</div>
+    ```
+
+    Another HTML code block
+
+    ```html
+    <div id="name">World</div>
+    ```
+
+    ```js
+    cy.get('div#greeting').should('have.text', 'Hello')
+    cy.get('div#name').should('have.text', 'World')
+    ```
+
+    <!-- fiddle-end -->
+
 ### Suites
 
 To create suites of tests, use `/` to separate the suite name from the test name. Tests with the same suite name are grouped together automatically.

cypress/integration/multiple-html-blocks.md

@@ -0,0 +1,20 @@
+# Multiple HTML code blocks
+
+<!-- fiddle Multiple HTML code blocks -->
+
+```html
+<div id="greeting">Hello</div>
+```
+
+Another HTML code block
+
+```html
+<div id="name">World</div>
+```
+
+```js
+cy.get('div#greeting').should('have.text', 'Hello')
+cy.get('div#name').should('have.text', 'World')
+```
+
+<!-- fiddle-end -->

package-lock.json

@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/bahmutov/cypress-markdown-preprocessor#readme",
   "dependencies": {
-    "@bahmutov/cypress-fiddle": "2.2.1",
+    "@bahmutov/cypress-fiddle": "2.5.0",
     "@cypress/browserify-preprocessor": "3.0.2",
     "@textlint/markdown-to-ast": "12.2.1",
     "chokidar": "3.5.3",

package.json

@@ -30,10 +30,10 @@ const bundleMdFile = (filePath, outputPath) => {
   }
 
   const specSource = source`
-      const { testExamples } = require('${fiddleModulePath}');
-      const fiddles = ${createTestsText};
-      testExamples(fiddles);
-    `
+    const { testExamples } = require('${fiddleModulePath}');
+    const fiddles = ${createTestsText};
+    testExamples(fiddles);
+  `
   const writtenTempFilename = tempWrite.sync(
     specSource,
     path.basename(filePath) + '.js',

src/index.js

@@ -265,9 +265,18 @@ function extractFiddles(md) {
     const ast = parse(fiddle.fiddle)
     // console.log('markdown fiddle AST')
     // console.log(ast)
-    const htmlCodeBlockMaybe = ast.children.find(
-      (s) => isHtmlCodeBlock(s) && shouldIncludeBlock(s),
-    )
+
+    const htmlMaybe = ast.children
+      .filter(isHtmlCodeBlock)
+      .filter(shouldIncludeBlock)
+      .map((htmlCodeBlock) => {
+        return {
+          source: htmlCodeBlock.value,
+          hide: false,
+        }
+      })
+    // console.log(htmlMaybe)
+
     const htmlLiveBlockMaybe = ast.children.find(
       (s) =>
         isLiveHtml(s) &&
@@ -290,15 +299,18 @@ function extractFiddles(md) {
       // console.log(jsMaybe)
       const testCode = jsMaybe.map((b) => b.value).join('\n')
 
-      const htmlNode = htmlLiveBlockMaybe || htmlCodeBlockMaybe
       const commonHtml = htmlMarkup
         ? extractFiddleMarkup(htmlMarkup.value)
         : null
 
       const testFiddle = formFiddleObject({
         name: fiddle.name,
         test: testCode,
-        html: htmlNode ? htmlNode.value : null,
+        html: htmlLiveBlockMaybe
+          ? htmlLiveBlockMaybe.value
+          : htmlMaybe.length
+          ? htmlMaybe
+          : null,
         commonHtml,
         only: fiddle.only,
         skip: fiddle.skip,