Skip to content

add Svelte docs & a known issue in testcafe. #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 5, 2019
Merged
72 changes: 72 additions & 0 deletions docs/svelte-testing-library/intro.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
id: intro
title: Svelte Testing Library
---

[`svelte-testing-library`][gh] simplifies the use of dom-testing with
[Svelte](https://svelte.dev/) components & applications.

```
npm install --save-dev svlt-testing-library
```

- [svelte-testing-library on GitHub][gh]

## Usage

You will first need to install and configure
[jest-transform-svelte](https://www.npmjs.com/package/jest-transform-svelte) in
order to use svelte in jest.

You must add `cleanup` to your test fixture's `beforeEach` hook:

```javascript
import { render, cleanup } from 'svlt-testing-library'

beforeEach(cleanup) //this is required.
```

## Examples

App.svelte

```html
<script>
export let name
</script>

<style>
h1 {
color: purple;
}
</style>

<h1>Hello {name}!</h1>
```

App.spec.js

```javascript
import App from '../src/App.svelte'
import { render, cleanup } from 'svlt-testing-library'
beforeEach(cleanup)
describe('App', () => {
test('should render greeting', () => {
const { getByText } = render(App, { props: { name: 'world' } })

expect(getByText('Hello world!'))
})

test('should change button text after click', async () => {
const { getByText } = render(App, { props: { name: 'world' } })

fireEvent.click(getByText('Button Text'))

const button = await waitForElement(() => getByText('Button Clicked'))

expect(button).toBeInTheDocument()
})
})
```

[gh]: https://github.com/testing-library/svelte-testing-library
8 changes: 8 additions & 0 deletions docs/testcafe-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,12 @@ test("queryByPlaceholder doesn't find anything", async t => {
})
```

## Known Issues

Whenever a non-client side browser navigation event occurs, you will need to
make another call to `addTestcafeTestingLibrary`. Testcafe uses a Proxy to
inject & execute tests/selectors. AFAIK, there's no way to tap into an
`on("navigate")` event. I have filed an issue with Testcafe to address this so
feel free to give it a +1. https://github.com/DevExpress/testcafe/issues/3758

[gh]: https://github.com/benmonro/testcafe-testing-library
1 change: 1 addition & 0 deletions website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
]
},
"cypress-testing-library/intro",
"svelte-testing-library/intro",
"vue-testing-library/intro",
"angular-testing-library/intro",
"pptr-testing-library/intro",
Expand Down