feat: allow skipping JavaScript blocks (#88)

* feat: allow skipping JS blocks

* update readme

* remove console.log

Author: bahmutov

README.md

@@ -1,5 +1,7 @@
 # cypress-markdown-preprocessor
+
 [![ci status][ci image]][ci url] [![badges status][badges image]][badges url] [![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-9.4.1-brightgreen) ![@cypress/fiddle version](https://img.shields.io/badge/@cypress/fiddle-1.19.0-brightgreen)
+
 > Use Markdown files as Cypress specs
 
 Read [Write Cypress Markdown Preprocessor](https://glebbahmutov.com/blog/write-cypress-preprocessor/)
@@ -71,6 +73,16 @@ To create suites of tests, use `/` to separate the suite name from the test name
     ```
     <!-- fiddle-end -->
 
+### Skipping JavaScript blocks
+
+You can skip JS blocks in the fiddle by using `js skip` syntax
+
+````
+    ```js skip
+    // this JavaScript block won't be included in fiddle
+    ```
+````
+
 ## Examples
 
 See the presentation [Using End-to-end Tests as Documentation](https://slides.com/bahmutov/tests-are-docs)

cypress/integration/js-skip.md

@@ -0,0 +1,27 @@
+# Skips JS block
+
+<!-- fiddle Two JS blocks -->
+
+This HTML block is ignored
+
+```html skip
+<div>This HTML does not run</div>
+<script>
+  throw new Error('Should skip HTML block')
+</script>
+```
+
+The first JS block should be ignored
+
+```js skip
+// THIS JavaScript WILL BE SKIPPED
+// and not included in the extracted fiddle
+expect(false).to.be.true
+```
+
+```js
+// this JS block will run
+expect(42).to.equal(42)
+```
+
+<!-- fiddle.end -->

src/markdown-utils.js

@@ -1,15 +1,19 @@
 // @ts-check
 const { parse } = require('@textlint/markdown-to-ast')
 const debug = require('debug')('cypress-markdown-preprocessor')
-const verbose = require('debug')('cypress-markdown-preprocessor:verbose')
+const verbose = require('debug')(
+  'cypress-markdown-preprocessor:verbose',
+)
 
 /**
  * Finds optional fiddle name from the comment line
  * `<!-- fiddle my name -->` returns "my name".
  */
 const findFiddleName = (commentLine) => {
   debug('finding fiddle name from line: "%s"', commentLine)
-  const matches = /fiddle(?:\.only|\.skip|\.export)? (.+)-->/.exec(commentLine)
+  const matches = /fiddle(?:\.only|\.skip|\.export)? (.+)-->/.exec(
+    commentLine,
+  )
   if (matches && matches.length) {
     const testTitle = matches[1].trim()
     debug('test title: "%s"', testTitle)
@@ -21,7 +25,8 @@ const findFiddleName = (commentLine) => {
 
 const isFiddleOnly = (line) => line.startsWith('<!-- fiddle.only ')
 const isFiddleSkip = (line) => line.startsWith('<!-- fiddle.skip ')
-const isFiddleExport = (line) => line.startsWith('<!-- fiddle.export ')
+const isFiddleExport = (line) =>
+  line.startsWith('<!-- fiddle.export ')
 
 const isFiddleMarkup = (s) => s && s.startsWith('<!-- fiddle-markup')
 
@@ -79,7 +84,9 @@ function extractFiddles(md) {
   let startLine
   do {
     debug('start with %d', start)
-    start = lines.findIndex((line, k) => k >= start && isFiddleStartLine(line))
+    start = lines.findIndex(
+      (line, k) => k >= start && isFiddleStartLine(line),
+    )
     if (start === -1) {
       break
     }
@@ -117,28 +124,47 @@ function extractFiddles(md) {
   // list of fiddles converted into JavaScript
   const testFiddles = []
 
-  const isHtmlCodeBlock = (n) => n.type === 'CodeBlock' && n.lang === 'html'
+  const shouldIncludeBlock = (block) => {
+    if (!block.meta) {
+      return true
+    }
+    return !block.meta.includes('skip')
+  }
+
+  const isHtmlCodeBlock = (n) =>
+    n.type === 'CodeBlock' && n.lang === 'html'
   const isLiveHtml = (n) => n.type === 'Html'
   const isJavaScript = (n) =>
-    n.type === 'CodeBlock' && (n.lang === 'js' || n.lang === 'javascript')
+    n.type === 'CodeBlock' &&
+    (n.lang === 'js' || n.lang === 'javascript')
 
   fiddles.forEach((fiddle) => {
     const ast = parse(fiddle.fiddle)
     // console.log('markdown fiddle AST')
     // console.log(ast)
-    const htmlCodeBlockMaybe = ast.children.find((s) => isHtmlCodeBlock(s))
+    const htmlCodeBlockMaybe = ast.children.find(
+      (s) => isHtmlCodeBlock(s) && shouldIncludeBlock(s),
+    )
     const htmlLiveBlockMaybe = ast.children.find(
-      (s) => isLiveHtml(s) && !isFiddleMarkup(s.value),
+      (s) =>
+        isLiveHtml(s) &&
+        !isFiddleMarkup(s.value) &&
+        shouldIncludeBlock(s),
+    )
+    const htmlMarkup = ast.children.find((s) =>
+      isFiddleMarkup(s.value),
     )
-    const htmlMarkup = ast.children.find((s) => isFiddleMarkup(s.value))
 
     // console.log('found html block?', htmlMaybe)
 
     // a single fiddle can have multiple JS blocks
     // we want to find them all and merge into a single test
-    const jsMaybe = ast.children.filter(isJavaScript)
+    const jsMaybe = ast.children
+      .filter(isJavaScript)
+      .filter(shouldIncludeBlock)
 
     if (jsMaybe.length) {
+      // console.log(jsMaybe)
       const testCode = jsMaybe.map((b) => b.value).join('\n')
 
       const htmlNode = htmlLiveBlockMaybe || htmlCodeBlockMaybe