Merge branch 'main' into patch-1

Author: MichaelDeBoey

.all-contributorsrc

@@ -90,7 +90,8 @@
       "contributions": [
         "code",
         "doc",
-        "test"
+        "test",
+        "review"
       ]
     },
     {
@@ -111,6 +112,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "benmccann",
+      "name": "Ben McCann",
+      "avatar_url": "https://avatars.githubusercontent.com/u/322311?v=4",
+      "profile": "http://www.benmccann.com",
+      "contributions": [
+        "test"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/release.yml

@@ -3,50 +3,80 @@ name: CI
 on:
   push:
     branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
-  test:
+  main:
     # ignore all-contributors PRs
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
-
-    runs-on: ubuntu-latest
-
     strategy:
       matrix:
         node: [10, 12, 14, 16]
-
+    runs-on: ubuntu-latest
     steps:
-    - name: Cancel previous runs
-      uses: styfle/[email protected]
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
 
-    - uses: actions/checkout@v2
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
-    - name: Setup nodejs
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node }}
-    - name: Install deps & validate
-      run: npm run setup
+      - name: ▶️ Run validate script
+        run: npm run validate
+
+      - name: ⬆️ Upload coverage report
+        uses: codecov/codecov-action@v2
 
   release:
+    needs: main
     runs-on: ubuntu-latest
-
+    if:
+      ${{ github.repository == 'testing-library/svelte-testing-library' &&
+      contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha',
+      github.ref) && github.event_name == 'push' }}
     steps:
-    - name: Cancel previous runs
-      uses: styfle/[email protected]
-
-    - uses: actions/checkout@v2
-
-    - name: Setup nodejs
-      uses: actions/setup-node@v2
-      with:
-        node-version: 14
-    - name: Install deps
-      run: npm install
-    - name: Build proj
-      run: npm run build
-    - name: Update tests, coverage, and release
-      run: npm run test:update && npx codecov && npx semantic-release
-      env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🏗 Run build script
+        run: npm run build
+
+      - name: 🚀 Release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          semantic_version: 17
+          branches: |
+            [
+              '+([0-9])?(.{+([0-9]),x}).x',
+              'main',
+              'next',
+              'next-major',
+              {name: 'beta', prerelease: true},
+              {name: 'alpha', prerelease: true}
+            ]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -130,9 +130,10 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://twitter.com/sebsilbermann"><img src="https://avatars3.githubusercontent.com/u/12292047?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sebastian Silbermann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=eps1lon" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/mihar-22"><img src="https://avatars3.githubusercontent.com/u/14304599?s=460&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rahim Alwer</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Documentation">📖</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/mihar-22"><img src="https://avatars3.githubusercontent.com/u/14304599?s=460&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rahim Alwer</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Documentation">📖</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/pulls?q=is%3Apr+reviewed-by%3Amihar-22" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/MirrorBytes"><img src="https://avatars3.githubusercontent.com/u/22119469?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/issues?q=author%3AMirrorBytes" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=MirrorBytes" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ronmerkin"><img src="https://avatars.githubusercontent.com/u/17492527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ron Merkin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ronmerkin" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.benmccann.com"><img src="https://avatars.githubusercontent.com/u/322311?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben McCann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmccann" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

package.json

@@ -51,35 +51,35 @@
     "svelte": "3.x"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.0.3"
+    "@testing-library/dom": "^8.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
     "@babel/plugin-transform-modules-commonjs": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
     "@testing-library/jest-dom": "^5.0.2",
-    "@types/jest": "^26.0.0",
+    "@types/jest": "^27.0.0",
     "all-contributors-cli": "^6.9.0",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^27.0.6",
     "doctoc": "^2.0.0",
     "eslint": "^7.2.0",
     "eslint-config-standard": "^16.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-svelte3": "^3.0.0",
-    "husky": "^4.0.9",
-    "jest": "^26.0.1",
-    "lint-staged": "^10.0.0",
+    "husky": "^7.0.1",
+    "jest": "^27.0.0",
+    "lint-staged": "^11.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.1",
     "svelte": "^3.0.0",
-    "svelte-jester": "^1.0.3"
+    "svelte-jester": "^2.1.4"
   },
   "husky": {
     "hooks": {
@@ -118,6 +118,7 @@
     "setupFilesAfterEnv": [
       "@testing-library/jest-dom/extend-expect"
     ],
+    "testEnvironment": "jsdom",
     "transform": {
       "^.+\\.js$": "babel-jest",
       "^.+\\.svelte$": "svelte-jester",

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__/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

@@ -2,20 +2,8 @@ import { render } from '..'
 import Comp from './fixtures/Comp'
 
 describe('multi-base', () => {
-  let treeA
-  let treeB
-
-  beforeAll(() => {
-    treeA = document.createElement('div')
-    treeB = document.createElement('div')
-    document.body.appendChild(treeA)
-    document.body.appendChild(treeB)
-  })
-
-  afterAll(() => {
-    treeA.parentNode.removeChild(treeA)
-    treeB.parentNode.removeChild(treeB)
-  })
+  const treeA = document.createElement('div')
+  const treeB = document.createElement('div')
 
   test('container isolates trees from one another', () => {
     const { getByText: getByTextInA } = render(Comp, {

src/__tests__/render.test.js

@@ -53,7 +53,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 +76,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/pure.js

@@ -4,7 +4,13 @@ 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 +23,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
         `)
@@ -76,7 +84,7 @@ const render = (
   }
 }
 
-const cleanupAtContainer = container => {
+const cleanupAtContainer = (container) => {
   const { target, component } = containerCache.get(container)
 
   if (componentCache.has(component)) component.$destroy()
@@ -112,6 +120,8 @@ Object.keys(dtlFireEvent).forEach((key) => {
   }
 })
 
+/* eslint-disable import/export */
+
 export * from '@testing-library/dom'
 
 export {