Skip to content

Commit 4c3876e

Browse files
oieduardorabelobenmonro
authored andcommitted
docs: fix README demo + live demo in CodeSandbox with Tests (#44)
* feat: fix README demo + live demo in CodeSandbox with Tests * chore: update codesandbox link name * feat: use codesandbox editor not embed url
1 parent 723da94 commit 4c3876e

File tree

1 file changed

+35
-14
lines changed

1 file changed

+35
-14
lines changed

README.md

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,21 @@ primary guiding principle is:
9191
9292
## Example
9393

94+
You can check the live example at CodeSandbox, "Browser" tab renders App.svelte and "Tests" tab runs App.spec.js
95+
96+
- **Live demo:** https://codesandbox.io/s/live-demo-svelte-testing-library-q8iv7
97+
9498
App.svelte
9599

96100
```html
97101
<script>
98102
export let name
103+
104+
let buttonText = "Button Text";
105+
106+
function handleClick() {
107+
buttonText = "Button Clicked";
108+
}
99109
</script>
100110

101111
<style>
@@ -105,30 +115,41 @@ App.svelte
105115
</style>
106116

107117
<h1>Hello {name}!</h1>
118+
119+
<button on:click={handleClick}>{buttonText}</button>
108120
```
109121

110122
App.spec.js
111123

112124
```javascript
113-
import App from '../src/App.svelte'
114-
import {render} from '@testing-library/svelte'
115-
describe('App', () => {
116-
test('should render greeting', () => {
117-
const {getByText} = render(App, {props: {name: 'world'}})
125+
import App from "./App.svelte";
126+
import {
127+
render,
128+
cleanup,
129+
fireEvent,
130+
waitForElement
131+
} from "@testing-library/svelte";
132+
import "@testing-library/jest-dom/extend-expect";
133+
134+
afterEach(cleanup);
135+
136+
describe("App", () => {
137+
test("should render greeting", () => {
138+
const { getByText } = render(App, { props: { name: "world" } });
118139

119-
expect(getByText('Hello world!'))
120-
})
140+
expect(getByText("Hello world!"));
141+
});
121142

122-
test('should change button text after click', async () => {
123-
const {getByText} = render(App, {props: {name: 'world'}})
143+
test("should change button text after click", async () => {
144+
const { getByText } = render(App, { props: { name: "world" } });
124145

125-
fireEvent.click(getByText('Button Text'))
146+
fireEvent.click(getByText("Button Text"));
126147

127-
const button = await waitForElement(() => getByText('Button Clicked'))
148+
const button = await waitForElement(() => getByText("Button Clicked"));
128149

129-
expect(button).toBeInTheDocument()
130-
})
131-
})
150+
expect(button).toBeInTheDocument();
151+
});
152+
});
132153
```
133154

134155
## Installation

0 commit comments

Comments
 (0)