add link to the blog post

Author: bahmutov

README.md

@@ -2,6 +2,8 @@
 [![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-6.6.0-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/)
+
 ## Install
 
 Assuming Cypress is a dev dependency

cypress.json

@@ -1,4 +1,5 @@
 {
   "fixturesFolder": false,
-  "testFiles": "*.md"
+  "testFiles": "*.md",
+  "viewportWidth": 500
 }

cypress/integration/spec.md

@@ -7,6 +7,7 @@
 
 ```js
 cy.contains('#hello', 'Hello')
+cy.get('#hello').should('have.text', 'Hello')
 ```
 <!-- fiddle.end -->
 

src/index.js

@@ -76,10 +76,14 @@ const mdPreprocessor = (file) => {
   if (shouldWatch) {
     debug('watching the file %s', filePath)
 
+    // start bundling the first time
     bundled[filePath] = bundleMdFile(filePath, outputPath)
 
+    // and start watching the input Markdown file
     const watcher = chokidar.watch(filePath)
     watcher.on('change', () => {
+      // if the Markdown file changes, we want to rebundle it
+      // and tell the Test Runner to run the tests again
       debug('file %s has changed', filePath)
       bundled[filePath] = bundleMdFile(filePath, outputPath)
       bundled[filePath].then(() => {
@@ -88,6 +92,7 @@ const mdPreprocessor = (file) => {
       })
     })
 
+    // when the test runner closes this spec
     file.on('close', () => {
       debug('file %s close, removing bundle promise', filePath)
       delete bundled[filePath]
@@ -97,6 +102,7 @@ const mdPreprocessor = (file) => {
     return bundled[filePath]
   }
 
+  // non-interactive mode
   bundled[filePath] = bundleMdFile(filePath, outputPath)
   return bundled[filePath]
 }