diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 0000000..1d2127c --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1,2 @@ +semi: false +singleQuote: true diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 333a6ca..3fc6d2f 100644 --- a/src/__tests__/render.test.js +++ b/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() diff --git a/src/pure.js b/src/pure.js index f2f6040..3198b43 100644 --- a/src/pure.js +++ b/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 }