feat: switch the new fiddle (#94)

* feat: add export Markdown to JavaScript bin

* show the exported JS file

* adding more markdown specs

* feat: switch to using my fiddle

Author: bahmutov

cypress/integration/add-list-item.md

@@ -0,0 +1,48 @@
+# Add list item
+
+In this example, we do not know how many items are in the list initially. After clicking a button we want to confirm that the list has increased by one item.
+
+<!-- fiddle "Adds an item" -->
+
+```html
+<ol id="list">
+  <li>first</li>
+  <li>second</li>
+</ol>
+<button id="add">Add an item</button>
+<script>
+  let list = document.getElementById('list')
+  document.getElementById('add').addEventListener('click', () => {
+    const li = document.createElement('li')
+    li.textContent = 'added'
+    list.appendChild(li)
+  })
+</script>
+```
+
+```js
+// we do not know how many items are in the list
+// so first we need to find out and store this information
+let N = 0
+cy.get('#list li')
+  .its('length')
+  .then((n) => {
+    N = n
+    // we can even confirm there are a few items if needed
+    expect(N).to.be.gt(0)
+  })
+// now add an item
+cy.get('#add')
+  .click()
+  .then(() => {
+    // by the time this callback runs the N value is set
+    // and we can use it directly in the assertion
+    cy.get('#list li').should('have.length', N + 1)
+  })
+```
+
+```js skip
+throw new Error('This code block should be ignored')
+```
+
+<!-- fiddle-end -->

cypress/integration/contains-example.md

@@ -0,0 +1,58 @@
+## cy.contains example
+
+Trying to check [https://twitter.com/Kmaschta/status/1189120060054540289](https://twitter.com/Kmaschta/status/1189120060054540289)
+
+To run this fiddle in this repo:
+
+```
+npm run cy:md
+```
+
+Then click on "contains-example.md" spec file.
+
+<!-- fiddle cy.contains one -->
+```html
+<div id="app">nothing here</div>
+<script>
+setTimeout(() => {
+  document.getElementById('app').innerText = 'something'
+}, 2000)
+</script>
+```
+
+Here is a test
+
+```js
+cy.contains('#app', 'something')
+// this command will only run AFTER cy.contains finishes
+cy.get('#app').should('be.visible')
+```
+
+<!-- fiddle-end -->
+
+<!-- fiddle split fiddle -->
+This fiddle has common HTML code
+
+```html
+<div id="app">nothing here</div>
+<script>
+setTimeout(() => {
+  document.getElementById('app').innerText = 'something'
+}, 2000)
+</script>
+```
+
+Then first assertion
+
+```js
+cy.contains('#app', 'something')
+```
+
+Then more test code here
+
+```js
+// this command will only run AFTER cy.contains finishes
+cy.get('#app').should('be.visible')
+```
+
+<!-- fiddle-end -->

cypress/integration/css-example.md

@@ -0,0 +1,20 @@
+Getting the full CSS class list for [issue 8592](https://github.com/cypress-io/cypress/issues/8592)
+
+<!-- fiddle -->
+
+```html
+<div class="profiler__header">
+  <div class="c-accordion c-accordion-active collapsed" id="accordion">
+    things inside
+  </div>
+</div>
+```
+
+```js
+cy.get('#accordion').then($el => {
+  console.log($el)
+  console.log('class name "%s"', $el[0].className)
+})
+```
+
+<!-- fiddle-end -->

cypress/integration/does-invoke-retry.md

@@ -0,0 +1,21 @@
+Does [`cy.invoke`](https://on.cypress.io/invoke) retry?
+
+<!-- fiddle -->
+
+```js
+let g = 'hello'
+const o = {
+  greeting () {
+    return g
+  }
+}
+setTimeout(() => {
+  g = 'bye'
+}, 1000)
+
+// initially the o.greeting() should return "hello"
+// and after 1 second should return "bye" the assertion expects
+cy.wrap(o).invoke('greeting').should('equal', 'bye')
+```
+
+<!-- fiddle-end -->

cypress/integration/dynamic-select.md

@@ -0,0 +1,28 @@
+Example where a `<select>` element gets dynamic list
+
+<!-- fiddle Dynamic select -->
+
+```html
+<select id="my-select"></select>
+
+<script>
+  // populate the select element dynamically
+  const s = document.getElementById('my-select')
+  const addOption = (x) => () => {
+    s.innerHTML += `
+      <option value=${x.toLowerCase()}>${x}</option>
+    `
+  }
+  setTimeout(addOption('Alpha'), 500)
+  setTimeout(addOption('Beta'), 1000)
+  setTimeout(addOption('Gamma'), 1500)
+</script>
+```
+
+```js
+cy.get('#my-select option').should('have.length', 3)
+// now that the select has 3 options, let's pick "Beta"
+cy.get('#my-select').select('beta')
+```
+
+<!-- fiddle-end -->

cypress/integration/each-example.md

@@ -0,0 +1,36 @@
+Stop `cy.each` iteration https://github.com/cypress-io/cypress/issues/8652
+
+<!-- fiddle -->
+
+Let's say we have a list of items
+
+```html
+<ul>
+  <li>Apples</li>
+  <li>Bananas</li>
+  <li>Grapes</li>
+</ul>
+```
+
+```js
+// iterate through all fruits
+cy.spy(console, 'log').as('console')
+cy.get('li').each(($el) => {
+  console.log($el.text())
+  // prints "Apples", "Bananas", "Grapes"
+})
+cy.get('@console').should('have.been.calledThrice').invoke('resetHistory')
+
+// iterate over fruits, but stop when reach Bananas
+cy.get('li').each(($el) => {
+  if ($el.text() === 'Bananas') {
+    // stop iteration
+    return false
+  }
+  console.log($el.text())
+  // prints "Apples"
+})
+cy.get('@console').should('have.been.calledOnce').invoke('resetHistory')
+```
+
+<!-- fiddle-end -->

cypress/integration/hidden-fiddle.md

@@ -0,0 +1,18 @@
+# Hidden fiddle
+
+Imagine this is a "normal" Markdown page. Can we embed a Cypress test _inside the Markdown_ that is hidden by default? Sure we can - using GitHub-flavored Markdown `<details>` section.
+
+<details>
+<summary>Cypress test for the current page</summary>
+<!--
+  make sure to have a blank line before the code block,
+  otherwise code block is not properly rendered
+-->
+<!-- fiddle -->
+
+```js
+expect('foo').to.equal('foo')
+```
+
+<!-- fiddle-end -->
+</details>

cypress/integration/live-html.md

@@ -0,0 +1,34 @@
+# Live HTML
+
+<!-- fiddle includes live html -->
+
+<div id="live-block">Live Block</div>
+
+```js
+cy.contains('#live-block', 'Live Block').should('be.visible')
+```
+<!-- fiddle-end -->
+
+<!-- fiddle includes html block -->
+```html
+<div id="my-block">Block</div>
+```
+```js
+cy.contains('#my-block', 'Block').should('be.visible')
+```
+<!-- fiddle-end -->
+
+<!-- fiddle includes both live and html block -->
+```html
+<div id="my-block">Block</div>
+```
+
+<div id="live-block">Live Block</div>
+
+```js
+// when including both live HTML block and
+// html code block, the live HTML block wins
+cy.contains('#live-block', 'Live Block').should('be.visible')
+cy.contains('#my-block', 'Block').should('not.exist')
+```
+<!-- fiddle-end -->

cypress/integration/merging._md

@@ -0,0 +1,28 @@
+<!--
+  this fiddle should create (inside top level describe "nested fiddles")
+
+  describe("parent suite", () => {
+    it("test A", () => {})
+    it("test B", () => {})
+  })
+-->
+
+<!-- fiddle parent suite / test A -->
+```js
+expect('test A').to.equal('test A')
+// check the current test
+expect(this.test.title, 'test title').to.equal('test A')
+expect(this.test.parent.title, 'parent title').to.equal('parent suite')
+expect(this.test.parent.tests.length, 'parent suite has 2 tests').to.equal(2)
+```
+<!-- fiddle-end -->
+
+<!-- fiddle parent suite / test B -->
+```js
+expect('test B').to.equal('test B')
+// check the current test
+expect(this.test.title, 'test title').to.equal('test B')
+expect(this.test.parent.title, 'parent title').to.equal('parent suite')
+expect(this.test.parent.tests.length, 'parent suite has 2 tests').to.equal(2)
+```
+<!-- fiddle-end -->

cypress/integration/nested-fiddles._md

@@ -0,0 +1,29 @@
+# nested fiddles
+
+<!--
+  this fiddle should create (inside top level describe "nested fiddles")
+
+  describe("parent suite", () => {
+    context("child suite", () => {
+      it("test itself", () => {}
+    })
+  })
+-->
+
+<!-- fiddle parent suite / child suite / test itself -->
+
+```js
+expect('fiddle').to.equal('fiddle')
+// check the current test
+expect(this.test.title, 'test title').to.equal('test itself')
+expect(this.test.parent.title, 'child suite').to.equal('child suite')
+expect(this.test.parent.parent.title, 'parent suite').to.equal(
+  'parent suite',
+)
+expect(
+  this.test.parent.parent.parent.title,
+  'top level suite',
+).to.equal('nested fiddles')
+```
+
+<!-- fiddle-end -->