fix: upgraded cypress-fiddle (#137)

* feat: hide js block

* fix: bump cypress fiddle

* disable verbose logger

* add cypress-split

* update the workflow

* bump fiddle

Author: bahmutov

.github/workflows/ci.yml

@@ -2,29 +2,19 @@ name: ci
 on: push
 jobs:
   test:
+    # https://github.com/bahmutov/cypress-workflows
+    uses: bahmutov/cypress-workflows/.github/workflows/split.yml@v1
+    with:
+      n: 3
+      command: npm test
+
+  release:
+    needs: 'test'
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout 🛎
         uses: actions/checkout@v3
 
-      # Node > 16
-      # npm > 8
-      - name: Print Node version 🖨
-        run: |
-          node -v
-          npm -v
-
-      - name: Run tests 🧪
-        uses: cypress-io/github-action@v5
-        with:
-          command: npm t
-
-      - name: Test exporting Markdown to JavaScript 🖨
-        run: |
-          node ./bin/export-fiddles cypress/e2e/skip.md
-          cat cypress/e2e/skip.js
-          # TODO: confirm the exported JavaScript file
-
       - name: Semantic Release 🚀
         uses: cycjimmy/semantic-release-action@v3
         if: github.ref == 'refs/heads/main'

README.md

@@ -131,6 +131,28 @@ You can hide the HTML code block from the source view, yet still have it part of
 
     <!-- fiddle-end -->
 
+### Hide JavaScript code block
+
+You can run but hide parts of the JavaScript code
+
+    <!-- fiddle Hide the first JS block -->
+
+    ```html
+    <div id="greeting">Hello</div>
+    ```
+
+    ```js hide
+    // the test code will run but not shown to the user
+    cy.log('this block is hidden')
+    ```
+
+    ```js
+    // this code will be shown to the user
+    cy.get('div#greeting').should('have.text', 'Hello')
+    ```
+
+    <!-- fiddle-end -->
+
 ### CSS block
 
 You can add CSS to be applied to the HTML application. The CSS block is not shown on the output page.

cypress.config.js

@@ -1,4 +1,6 @@
 const { defineConfig } = require('cypress')
+// https://github.com/bahmutov/cypress-split
+const cypressSplit = require('cypress-split')
 
 // in the user project it would be
 // const mdPreprocessor = require('cypress-markdown-preprocessor')
@@ -11,6 +13,7 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      cypressSplit(on, config)
       on('file:preprocessor', mdPreprocessor)
       return config
     },

cypress/e2e/hide-js.md

@@ -11,3 +11,29 @@ cy.get('div#greeting').should('have.text', 'Hello')
 ```
 
 <!-- fiddle-end -->
+
+## Partial code
+
+This test has several JS code blocks, and some of them are hidden
+
+<!-- fiddle only some JavaScript source is shown -->
+
+```html
+<div id="greeting">Hello</div>
+```
+
+```js hide
+cy.log('this block is hidden')
+```
+
+Only this code block should be shown on the page
+
+```js
+cy.get('div#greeting').should('have.text', 'Hello')
+```
+
+```js hide
+cy.log('this block is also hidden')
+```
+
+<!-- fiddle-end -->