feat: component options, svg example, global style (#41)

Author: bahmutov

README.md

@@ -22,6 +22,35 @@ npm install --save-dev @cypress/webpack-preprocessor
 
 This component adaptor is meant for [Svelte v3](https://svelte.dev/blog/svelte-3-rethinking-reactivity). If you need Svelte v2 support, check out branch [svelte-v2](https://github.com/bahmutov/cypress-svelte-unit-test/tree/svelte-v2)
 
+## Use
+
+Import your Svelte component and mount using the provided function. Pass [component options](https://svelte.dev/docs#Creating_a_component) and global document options (like a global CSS)
+
+```js
+/// <reference types="cypress" />
+import App from '../components/ChainedBalls.svelte'
+import mount from 'cypress-svelte-unit-test'
+
+describe('SVG animation', () => {
+  it('shows chained balls', () => {
+    cy.viewport(960, 500)
+    const style = `
+      line {
+        stroke: gray;
+        stroke-width: 2px;
+      }
+    `
+    mount(App, {
+      props: {
+        width: 960,
+        height: 500
+      }
+    }, { style })
+    cy.get('circle').should('have.length', 50)
+  })
+})
+```
+
 ## Examples
 
 Svelte components copied from [https://svelte.dev/examples](https://svelte.dev/examples)
@@ -35,6 +64,7 @@ Component | spec
 [ReactiveAssignments.svelte](cypress/components/ReactiveAssignments.svelte) | [reactive-assignments-spec.js](cypress/integration/reactive-assignments-spec.js)
 [ReactiveDeclarations.svelte](cypress/components/ReactiveDeclarations.svelte) | [reactive-declarations-spec.js](cypress/integration/reactive-declarations-spec.js)
 [ReactiveStatements.svelte](cypress/components/ReactiveStatements.svelte) | [reactive-statements-spec.js](cypress/integration/reactive-statements-spec.js)
+[ChainedBalls.svelte](cypress/components/ChainedBalls.svelte) | [chained-balls-spec.js](cypress/integration/chained-balls-spec.js)
 
 ## Details
 

cypress/components/ChainedBalls.svelte

@@ -0,0 +1,52 @@
+<!-- Example copied from
+- https://bl.ocks.org/curran/71dfa9cf182473fd2cb2f2d027f3828e
+- https://twitter.com/currankelleher/status/1120794510508740609 -->
+
+<style>
+  h1 {
+    color: purple;
+  }
+</style>
+
+<script>
+  // don't forget to pass "width" and "height" as props
+  export let width;
+  export let height;
+  export let n = 50;
+
+  let numbers = [];
+
+  const f = (x, t) => Math.sin(x * t + t) * 200;
+
+  const setNumbers = () => {
+    for (let i = 0; i < n; i++) {
+      const x = i / n;
+      const t = Date.now() / 1000;
+      numbers[i] = f(x, t);
+    }
+  };
+
+  const animate = () => {
+    setNumbers();
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
+
+<svg width={width} height={height}>
+  {#each numbers as y, i}
+    <circle
+      cx={i / n * width}
+      cy={y + height / 2}
+      r="10"
+    />
+    {#if i < n - 1}
+      <line
+        x1={i / n * width}
+        y1={y + height / 2}
+        x2={(i + 1) / n * width}
+        y2={numbers[i + 1] + height / 2}
+      />
+    {/if}
+  {/each}
+</svg>

cypress/integration/chained-balls-spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+import App from '../components/ChainedBalls.svelte'
+import mount from '../../src'
+
+/* eslint-env mocha */
+describe('SVG animation', () => {
+  it('shows chained balls', () => {
+    cy.viewport(960, 500)
+    const style = `
+      body {
+        margin: 0;
+      }
+      line {
+        stroke: gray;
+        stroke-width: 2px;
+      }
+    `
+    mount(
+      App,
+      {
+        props: {
+          width: 960,
+          height: 500
+        }
+      },
+      {
+        style
+      }
+    )
+    cy.get('circle').should('have.length', 50)
+  })
+})

src/index.js

@@ -11,7 +11,7 @@ function setAlert (w) {
   return w
 }
 
-export default function mount (Component, data, slots, store) {
+export default function mount (Component, options = {}, docOptions = {}) {
   const html = `
     <div id="app"></div>
     `
@@ -26,20 +26,43 @@ export default function mount (Component, data, slots, store) {
 
   cy.get('#app', { log: false }).should('exist')
   return cy.document({ log: false }).then(doc => {
-    Cypress.component = new Component({
-      target: doc.getElementById('app'),
-      data,
-      slots,
-      store
+    const allOptions = Object.assign({}, options, {
+      target: doc.getElementById('app')
     })
+    Cypress.component = new Component(allOptions)
     copyStyles(Component)
+
+    if (docOptions.style) {
+      addGlobalStyle(docOptions.style)
+    }
   })
 }
 
+/**
+ * Adds global CSS style.
+ */
+function addGlobalStyle (css) {
+  const style = document.createElement('style')
+  style.type = 'text/css'
+  style.appendChild(document.createTextNode(css))
+
+  const appIframe = getAppIframe()
+  const head = appIframe.contentDocument.querySelector('head')
+  head.appendChild(style)
+}
+
 // having weak reference to styles prevents garbage collection
 // and "losing" styles when the next test starts
 const stylesCache = new Map()
 
+function getAppIframe () {
+  const parentDocument = window.parent.document
+  const projectName = Cypress.config('projectName')
+  const appIframeId = `Your App: '${projectName}'`
+  const appIframe = parentDocument.getElementById(appIframeId)
+  return appIframe
+}
+
 function copyStyles (component) {
   const hash = component
 
@@ -60,10 +83,7 @@ function copyStyles (component) {
     return
   }
 
-  const parentDocument = window.parent.document
-  const projectName = Cypress.config('projectName')
-  const appIframeId = `Your App: '${projectName}'`
-  const appIframe = parentDocument.getElementById(appIframeId)
+  const appIframe = getAppIframe()
   const head = appIframe.contentDocument.querySelector('head')
   styles.forEach(style => {
     head.appendChild(style)