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) +})