diff --git a/README.md b/README.md
index 8ab746f..ba9b06f 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,69 @@ And then grab it off the global like so:
```js
const Fragment = svelteFragment
```
+
+## Usage
+
+> The examples below are using [svelte-jsx](https://www.npmjs.com/package/svelte-jsx) for the jsx syntax support.
+
+```js
+import Fragment from 'svelte-fragment-component'
+
+const Lifecycle = (
+ {}}
+ onMount={() => {}}
+ beforeUpdate={() => {}}
+ afterUpdate={() => {}}
+ onDestroy={() => {}}
+ >
+ some content
+
+)
+```
+
+This allows to simplify testing of [context API](https://svelte.dev/docs#setContext):
+
+```js
+import Fragment from 'svelte-fragment-component'
+import { setContext } from 'svelte'
+
+const Lifecycle = (
+ {
+ setContext('some context key', theValue)
+ }}
+ >
+ children can now access this context value
+
+)
+
+// or using the context property
+const Lifecycle = (
+
+ children can now access this context value
+
+)
+```
+
+## API
+
+The component renders only the default slot children.
+
+### Properties
+
+> All properties are optional.
+
+- `context`: an key-value object where each pair is passed to [setContext](https://svelte.dev/docs#setContext)
+
+Except for `onCreate` these functions are passed to their corresponding svelte lifecycle method and have the same call signature `({ props }): void` where `props` are the `$$restProps`:
+
+- `onCreate`: called during component initialization
+- [onMount](https://svelte.dev/docs#onMount)
+- [beforeUpdate](https://svelte.dev/docs#beforeUpdate)
+- [afterUpdate](https://svelte.dev/docs#afterUpdate)
+- [onDestroy](https://svelte.dev/docs#onDestroy)
+
## Support
This project is free and open-source, so if you think this project can help you or anyone else, you may [star it on GitHub](https://github.com/sastan/svelte-fragment-component). Feel free to [open an issue](https://github.com/sastan/svelte-fragment-component/issues) if you have any idea, question, or you've found a bug.
diff --git a/package.json b/package.json
index 7a0cc02..a841285 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
},
"homepage": "https://github.com/sastan/svelte-fragment-component#readme",
"devDependencies": {
- "@jest/globals": "^26.0.1",
"@rollup/plugin-commonjs": "^13.0.0",
"@rollup/plugin-node-resolve": "^8.0.1",
"@testing-library/jest-dom": "^5.7.0",
diff --git a/src/fragment.svelte b/src/fragment.svelte
index 13e0e91..37946bc 100644
--- a/src/fragment.svelte
+++ b/src/fragment.svelte
@@ -1 +1,29 @@
+
+
diff --git a/src/fragment.test.js b/src/fragment.test.js
index 8a8938b..11eb86f 100644
--- a/src/fragment.test.js
+++ b/src/fragment.test.js
@@ -1,10 +1,79 @@
-const { expect, test } = require('@jest/globals')
-const { render } = require('@testing-library/svelte')
+const { render, act } = require('@testing-library/svelte')
+const { getContext } = require('svelte')
const WithChilds = require('./__fixtures__/with-childs.svelte')
+const Fragment = require('./fragment.svelte')
test('renders all childs', () => {
const { container } = render(WithChilds)
expect(container.innerHTML).toMatch('
ABC
')
})
+
+test('calls onCreate', () => {
+ const onCreate = jest.fn()
+
+ render(Fragment, { props: { onCreate, a: 1 } })
+
+ expect(onCreate).toHaveBeenCalledWith({ props: { a: 1 } })
+})
+
+test('calls onMount', () => {
+ const onMount = jest.fn()
+
+ render(Fragment, { props: { onMount, a: 1 } })
+
+ expect(onMount).toHaveBeenCalledWith({ props: { a: 1 } })
+})
+
+test('calls beforeUpdate', async () => {
+ const beforeUpdate = jest.fn()
+
+ const { component } = render(Fragment, { props: { beforeUpdate, a: 1 } })
+
+ expect(beforeUpdate).toHaveBeenCalledWith({ props: { a: 1 } })
+
+ await act(() => component.$set({ b: 2 }))
+
+ expect(beforeUpdate).toHaveBeenCalledWith({ props: { a: 1, b: 2 } })
+})
+
+test('calls afterUpdate', async () => {
+ const afterUpdate = jest.fn()
+
+ const { component } = render(Fragment, { props: { afterUpdate, a: 1 } })
+
+ expect(afterUpdate).toHaveBeenCalledWith({ props: { a: 1 } })
+
+ await act(() => component.$set({ b: 2 }))
+
+ expect(afterUpdate).toHaveBeenCalledWith({ props: { a: 1, b: 2 } })
+})
+
+test('calls onDestroy', async () => {
+ const onDestroy = jest.fn()
+
+ const { component } = render(Fragment, { props: { onDestroy, a: 1 } })
+
+ await act(() => component.$destroy())
+
+ expect(onDestroy).toHaveBeenCalledWith({ props: { a: 1 } })
+})
+
+test('create context', () => {
+ let a
+ let b
+
+ render(Fragment, {
+ props: {
+ context: { a: 1, b: 2 },
+ onMount: () => {
+ a = getContext('a')
+ b = getContext('b')
+ },
+ },
+ })
+
+ expect(a).toBe(1)
+ expect(b).toBe(2)
+})