working

Author: bahmutov

cypress.json

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

cypress/README.md

@@ -0,0 +1,21 @@
+# Cypress.io end-to-end tests
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold end-to-end tests and supporting files for the Cypress Test Runner.
+
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](http://on.cypress.io/intro)

cypress/integration/spec.md

@@ -0,0 +1,23 @@
+# Cypress Markdown spec
+
+<!-- fiddle Example -->
+```html
+<div id="parent">
+  <div id="first">A new div will appear in 2 seconds</div>
+</div>
+<script>
+  setTimeout(() => {
+    const div = document.getElementById('parent')
+    const newDiv = document.createElement('second')
+    newDiv.textContent = 'second div'
+    newDiv.id = 'second'
+    div.appendChild(newDiv)
+  }, 2000)
+</script>
+```
+
+```js
+cy.get('#first').should('be.visible')
+cy.get('#second').should('have.text', 'second div')
+```
+<!-- fiddle.end -->

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// in the user project it would be
+// const mdPreprocessor = require('cypress-markdown-preprocessor')
+const mdPreprocessor = require('../..')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  on('file:preprocessor', mdPreprocessor)
+}

cypress/support/index.js

@@ -0,0 +1,14 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************

package.json

@@ -2,8 +2,9 @@
   "name": "cypress-markdown-preprocessor",
   "version": "1.0.0",
   "description": "Use Markdown files as Cypress specs",
-  "main": "index.js",
+  "main": "src/index.js",
   "scripts": {
+    "cy:open": "cypress open",
     "test": "cypress run"
   },
   "repository": {

src/index.js

@@ -6,8 +6,11 @@ const tempWrite = require('temp-write')
 const cyBrowserify = require('@cypress/browserify-preprocessor')()
 const debug = require('debug')('cypress-markdown-preprocessor')
 const mdUtils = require('./markdown-utils')
-const testExamplesPath = require('@cypress/fiddle')
 
+// when a temporary file is written, it is placed outside the current folder
+// thus finding the "@cypress/fiddle" module using the regular Node module resolution
+// is impossible. Just resolve the path once and require it directly later.
+const fiddleModulePath = require.resolve('@cypress/fiddle')
 /**
   Parses Markdown file looking for special fiddle comments. If found,
   creates separate tests from them. If processing ".js" or ".coffee" files just
@@ -37,9 +40,9 @@ const mdPreprocessor = (file) => {
   }
 
   const specSource = source`
+      const { testExamples } = require('${fiddleModulePath}');
       const fiddles = ${createTestsText};
-      import { testExamples } from '${testExamplesPath}'
-      testExamples(fiddles)
+      testExamples(fiddles);
     `
   // console.log(specSource)
   const writtenTempFilename = tempWrite.sync(