feature: add 'accessors' option

Author: yanick

src/__tests__/render.test.js

@@ -1,23 +1,21 @@
-import {
-  act,
-  render as stlRender
-} from '..'
+import { act, render as stlRender } from '..'
 import Comp from './fixtures/Comp'
 import CompDefault from './fixtures/Comp.html'
 
 describe('render', () => {
   let props
 
-  const render = () => {
+  const render = (additional = {}) => {
     return stlRender(Comp, {
       target: document.body,
-      props
+      props,
+      ...additional,
     })
   }
 
   beforeEach(() => {
     props = {
-      name: 'World'
+      name: 'World',
     }
   })
 
@@ -40,6 +38,20 @@ describe('render', () => {
     expect(getByText('Hello Worlds!')).toBeInTheDocument()
   })
 
+  test('change props with accessors', async () => {
+    const { component, getByText } = render({ accessors: true })
+
+    expect(getByText('Hello World!')).toBeInTheDocument()
+
+    expect(component.name).toBe('World')
+
+    await act(() => {
+      component.value = 'Planet'
+    })
+
+    expect(getByText('Hello World!')).toBeInTheDocument()
+  })
+
   test('should accept props directly', () => {
     const { getByText } = stlRender(Comp, { name: 'World' })
     expect(getByText('Hello World!')).toBeInTheDocument()
@@ -54,7 +66,7 @@ describe('render', () => {
       target,
       anchor: div,
       props: { name: 'World' },
-      context: new Map([['name', 'context']])
+      context: new Map([['name', 'context']]),
     })
     expect(container).toMatchSnapshot()
   })
@@ -80,9 +92,9 @@ describe('render', () => {
   test("accept the 'context' option", () => {
     const { getByText } = stlRender(Comp, {
       props: {
-        name: 'Universe'
+        name: 'Universe',
       },
-      context: new Map([['name', 'context']])
+      context: new Map([['name', 'context']]),
     })
 
     expect(getByText('we have context')).toBeInTheDocument()

src/pure.js

@@ -1,15 +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 svelteComponentOptions = [
+  'accessors',
   'anchor',
   'props',
   'hydrate',
   'intro',
-  'context'
+  'context',
 ]
 
 const render = (
@@ -51,13 +56,15 @@ const render = (
 
   let component = new ComponentConstructor({
     target,
-    ...checkProps(options)
+    ...checkProps(options),
   })
 
   containerCache.set(container, { target, component })
   componentCache.add(component)
 
-  component.$$.on_destroy.push(() => { componentCache.delete(component) })
+  component.$$.on_destroy.push(() => {
+    componentCache.delete(component)
+  })
 
   return {
     container,
@@ -69,18 +76,20 @@ const render = (
       // eslint-disable-next-line no-new
       component = new ComponentConstructor({
         target,
-        ...checkProps(options)
+        ...checkProps(options),
       })
 
       containerCache.set(container, { target, component })
       componentCache.add(component)
 
-      component.$$.on_destroy.push(() => { componentCache.delete(component) })
+      component.$$.on_destroy.push(() => {
+        componentCache.delete(component)
+      })
     },
     unmount: () => {
       if (componentCache.has(component)) component.$destroy()
     },
-    ...getQueriesForElement(container, queries)
+    ...getQueriesForElement(container, queries),
   }
 }
 
@@ -89,7 +98,9 @@ const cleanupAtContainer = (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)
 }
@@ -124,6 +135,4 @@ Object.keys(dtlFireEvent).forEach((key) => {
 
 export * from '@testing-library/dom'
 
-export {
-  render, cleanup, fireEvent, act
-}
+export { render, cleanup, fireEvent, act }