Merge pull request #62 from mihar-22/issue-59

mihar-22 · web-flow · commit 60c5c6990c59 · 2019-12-06T12:18:56.000+11:00
feat: allow easier passing in of props
diff --git a/package.json b/package.json
@@ -76,12 +76,11 @@
     "eslint-plugin-svelte3": "^2.7.3",
     "husky": "^3.0.8",
     "jest": "^24.7.1",
-    "jest-transform-svelte": "^2.1.0",
     "lint-staged": "^9.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
     "svelte": "^3.0.0",
-    "svelte-test": "^0.4.0"
+    "svelte-jester": "^1.0.3"
   },
   "husky": {
     "hooks": {
@@ -122,8 +121,8 @@
     ],
     "transform": {
       "^.+\\.js$": "babel-jest",
-      "^.+\\.svelte$": "jest-transform-svelte",
-      "^.+\\.html$": "svelte-test/transform"
+      "^.+\\.svelte$": "svelte-jester",
+      "^.+\\.html$": "svelte-jester"
     },
     "moduleFileExtensions": [
       "js",
diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render should accept svelte component options 1`] = `
+<body>
+  <div>
+    <h1
+      data-testid="test"
+    >
+      Hello 
+      World
+      !
+    </h1>
+     
+    <button>
+      Button
+    </button>
+    <div />
+  </div>
+</body>
+`;
diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js
@@ -40,6 +40,24 @@ describe('render', () => {
     expect(getByText('Hello Worlds!')).toBeInTheDocument()
   })
 
+  test('should accept props directly', () => {
+    const { getByText } = stlRender(Comp, { name: 'World' })
+    expect(getByText('Hello World!')).toBeInTheDocument()
+  })
+
+  test('should accept svelte component options', () => {
+    const target = document.createElement('div')
+    const div = document.createElement('div')
+    document.body.appendChild(target)
+    target.appendChild(div)
+    const { container } = stlRender(Comp, {
+      target,
+      anchor: div,
+      props: { name: 'World' }
+    })
+    expect(container).toMatchSnapshot()
+  })
+
   test('should return a container object, which contains the DOM of the rendered component', () => {
     const { container } = render()
 
diff --git a/src/pure.js b/src/pure.js
@@ -4,6 +4,8 @@ import { tick } from 'svelte'
 const containerCache = new Map()
 const componentCache = new Set()
 
+const svleteComponentOptions = ['anchor', 'props', 'hydrate', 'intro']
+
 const render = (
   Component,
   { target, ...options } = {},
@@ -13,10 +15,11 @@ const render = (
   target = target || container.appendChild(document.createElement('div'))
 
   const ComponentConstructor = Component.default || Component
+  const isProps = !Object.keys(options).some(option => svleteComponentOptions.includes(option))
 
   const component = new ComponentConstructor({
     target,
-    ...options
+    ...(isProps ? { props: options } : options)
   })
 
   containerCache.set(container, { target, component })
