feat: add context to the allowed options

For #136

Allows 'context' as one of the Svelte options.

Note that most of the changes are due to prettier and husky.

Author: yanick

src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`auto-cleanup-skip second 1`] = `"<div><h1 data-testid=\\"test\\">Hello world!</h1> <button>Button</button></div>"`;
+exports[`auto-cleanup-skip second 1`] = `"<div><h1 data-testid=\\"test\\">Hello world!</h1> <div>we have undefined</div> <button>Button</button></div>"`;

src/__tests__/__snapshots__/render.test.js.snap

@@ -11,6 +11,10 @@ exports[`render should accept svelte component options 1`] = `
       !
     </h1>
      
+    <div>
+      we have context
+    </div>
+     
     <button>
       Button
     </button>

src/__tests__/act.test.js

@@ -32,13 +32,16 @@ describe('act', () => {
   test('findByTestId returns the element', async () => {
     const { findByTestId } = render()
 
-    expect(await findByTestId('test')).toHaveTextContent(`Hello ${props.name}!`)
+    expect(await findByTestId('test')).toHaveTextContent(
+      `Hello ${props.name}!`
+    )
   })
 
   test('accepts async functions', async () => {
-    const sleep = (ms) => new Promise(resolve => {
-      setTimeout(() => resolve(), ms)
-    })
+    const sleep = (ms) =>
+      new Promise((resolve) => {
+        setTimeout(() => resolve(), ms)
+      })
 
     const { getByText } = render()
     const button = getByText('Button')

src/__tests__/fixtures/Comp.html

@@ -1,15 +1,15 @@
 <script>
-  export let name
+  export let name;
 
-  let buttonText = "Button Text"
+  let buttonText = "Button Text";
 
   function handleClick() {
-    buttonText = "Button Clicked"
+    buttonText = "Button Clicked";
   }
 </script>
 
 <style></style>
 
 <h1>Hello {name}!</h1>
 
-<button on:click={handleClick}>{buttonText}</button>
+<button on:click="{handleClick}">{buttonText}</button>

src/__tests__/fixtures/Comp.svelte

@@ -1,8 +1,12 @@
 <script>
+  import { getContext } from 'svelte'
+
   export let name
 
   let buttonText = 'Button'
 
+  const contextName = getContext('name')
+
   function handleClick () {
     buttonText = 'Button Clicked'
   }
@@ -12,4 +16,6 @@
 
 <h1 data-testid="test">Hello {name}!</h1>
 
+<div>we have {contextName}</div>
+
 <button on:click={handleClick}>{buttonText}</button>

src/__tests__/multi-base.test.js

@@ -6,23 +6,31 @@ describe('multi-base', () => {
   const treeB = document.createElement('div')
 
   test('container isolates trees from one another', () => {
-    const { getByText: getByTextInA } = render(Comp, {
-      target: treeA,
-      props: {
-        name: 'Tree A'
+    const { getByText: getByTextInA } = render(
+      Comp,
+      {
+        target: treeA,
+        props: {
+          name: 'Tree A'
+        }
+      },
+      {
+        container: treeA
       }
-    }, {
-      container: treeA
-    })
+    )
 
-    const { getByText: getByTextInB } = render(Comp, {
-      target: treeB,
-      props: {
-        name: 'Tree B'
+    const { getByText: getByTextInB } = render(
+      Comp,
+      {
+        target: treeB,
+        props: {
+          name: 'Tree B'
+        }
+      },
+      {
+        container: treeB
       }
-    }, {
-      container: treeB
-    })
+    )
 
     expect(() => getByTextInA('Hello Tree A!')).not.toThrow()
     expect(() => getByTextInB('Hello Tree A!')).toThrow()

src/__tests__/render.test.js

@@ -1,7 +1,4 @@
-import {
-  act,
-  render as stlRender
-} from '..'
+import { act, render as stlRender } from '..'
 import Comp from './fixtures/Comp'
 import CompDefault from './fixtures/Comp.html'
 
@@ -53,7 +50,8 @@ describe('render', () => {
     const { container } = stlRender(Comp, {
       target,
       anchor: div,
-      props: { name: 'World' }
+      props: { name: 'World' },
+      context: new Map([['name', 'context']])
     })
     expect(container).toMatchSnapshot()
   })
@@ -75,4 +73,15 @@ describe('render', () => {
 
     expect(getByText('Hello World!')).toBeInTheDocument()
   })
+
+  test("accept the 'context' option", () => {
+    const { getByText } = stlRender(Comp, {
+      props: {
+        name: 'Universe'
+      },
+      context: new Map([['name', 'context']])
+    })
+
+    expect(getByText('we have context')).toBeInTheDocument()
+  })
 })

src/__tests__/rerender.test.js

@@ -3,7 +3,9 @@ import Comp from './fixtures/Comp'
 
 describe('rerender', () => {
   test('mounts new component successfully', () => {
-    const { container, rerender } = render(Comp, { props: { name: 'World 1' } })
+    const { container, rerender } = render(Comp, {
+      props: { name: 'World 1' }
+    })
 
     expect(container.firstChild).toHaveTextContent('Hello World 1!')
     rerender({ props: { name: 'World 2' } })
@@ -15,7 +17,9 @@ describe('rerender', () => {
 
     const { rerender, component } = render(Comp, { props: { name: '' } })
 
-    component.$$.on_destroy.push(() => { isDestroyed = true })
+    component.$$.on_destroy.push(() => {
+      isDestroyed = true
+    })
     rerender({ props: { name: '' } })
     expect(isDestroyed).toBeTruthy()
   })

src/pure.js

@@ -1,10 +1,20 @@
-import { fireEvent as dtlFireEvent, getQueriesForElement, prettyDOM } from '@testing-library/dom'
+import {
+  fireEvent as dtlFireEvent,
+  getQueriesForElement,
+  prettyDOM
+} from '@testing-library/dom'
 import { tick } from 'svelte'
 
 const containerCache = new Map()
 const componentCache = new Set()
 
-const svleteComponentOptions = ['anchor', 'props', 'hydrate', 'intro']
+const svelteComponentOptions = [
+  'anchor',
+  'props',
+  'hydrate',
+  'intro',
+  'context'
+]
 
 const render = (
   Component,
@@ -17,19 +27,21 @@ const render = (
   const ComponentConstructor = Component.default || Component
 
   const checkProps = (options) => {
-    const isProps = !Object.keys(options).some(option => svleteComponentOptions.includes(option))
+    const isProps = !Object.keys(options).some((option) =>
+      svelteComponentOptions.includes(option)
+    )
 
     // Check if any props and Svelte options were accidentally mixed.
     if (!isProps) {
-      const unrecognizedOptions = Object
-        .keys(options)
-        .filter(option => !svleteComponentOptions.includes(option))
+      const unrecognizedOptions = Object.keys(options).filter(
+        (option) => !svelteComponentOptions.includes(option)
+      )
 
       if (unrecognizedOptions.length > 0) {
         throw Error(`
-          Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed 
-          passing in props with Svelte options into the render function. Valid Svelte options 
-          are [${svleteComponentOptions}]. You can either change the prop names, or pass in your 
+          Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed
+          passing in props with Svelte options into the render function. Valid Svelte options
+          are [${svelteComponentOptions}]. You can either change the prop names, or pass in your
           props for that component via the \`props\` option.\n\n
           Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
         `)
@@ -49,7 +61,9 @@ const render = (
   containerCache.set(container, { target, component })
   componentCache.add(component)
 
-  component.$$.on_destroy.push(() => { componentCache.delete(component) })
+  component.$$.on_destroy.push(() => {
+    componentCache.delete(component)
+  })
 
   return {
     container,
@@ -67,7 +81,9 @@ const render = (
       containerCache.set(container, { target, newComponent })
       componentCache.add(newComponent)
 
-      newComponent.$$.on_destroy.push(() => { componentCache.delete(newComponent) })
+      newComponent.$$.on_destroy.push(() => {
+        componentCache.delete(newComponent)
+      })
     },
     unmount: () => {
       if (componentCache.has(component)) component.$destroy()
@@ -76,12 +92,14 @@ const render = (
   }
 }
 
-const cleanupAtContainer = container => {
+const cleanupAtContainer = (container) => {
   const { target, component } = containerCache.get(container)
 
   if (componentCache.has(component)) component.$destroy()
 
-  if (target.parentNode === document.body) { document.body.removeChild(target) }
+  if (target.parentNode === document.body) {
+    document.body.removeChild(target)
+  }
 
   containerCache.delete(container)
 }
@@ -116,6 +134,4 @@ Object.keys(dtlFireEvent).forEach((key) => {
 
 export * from '@testing-library/dom'
 
-export {
-  render, cleanup, fireEvent, act
-}
+export { render, cleanup, fireEvent, act }