fixing up svelte tests

This commit is contained in:
Tony Sullivan 2022-05-16 13:41:42 -05:00
parent 7b85d40f25
commit 8326cfddf7
3 changed files with 25 additions and 11 deletions

View file

@ -1,4 +1,6 @@
<script> <script lang="ts">
export let id: string;
let count = 0; let count = 0;
function add() { function add() {
@ -10,12 +12,12 @@
} }
</script> </script>
<div class="counter"> <div {id} class="counter">
<button on:click={subtract}>-</button> <button class="decrement" on:click={subtract}>-</button>
<pre>{ count }</pre> <pre>{ count }</pre>
<button on:click={add}>+</button> <button class="increment" on:click={add}>+</button>
</div> </div>
<div class="message"> <div id={`${id}-message`} class="message">
<slot /> <slot />
</div> </div>

View file

@ -11,8 +11,20 @@ const someProps = {
<!-- Head Stuff --> <!-- Head Stuff -->
</head> </head>
<body> <body>
<Counter client:visible> <Counter id="counter-idle" client:idle>
<h1>Hello, Svelte!</h1> <h1>Hello, client:idle!</h1>
</Counter> </Counter>
<Counter id="counter-load" client:load>
<h1>Hello, client:load!</h1>
</Counter>
<Counter id="counter-visible" client:visible>
<h1>Hello, client:visible!</h1>
</Counter>
<Counter id="counter-media" client:media="(max-width: 50rem)">
<h1>Hello, client:media!</h1>
</Counter>
</body> </body>
</html> </html>

View file

@ -88,12 +88,12 @@ test.only('Svelte', async ({ page, astro }) => {
// test 1: updating the page component // test 1: updating the page component
await astro.writeFile( await astro.writeFile(
'src/pages/index.astro', 'src/pages/index.astro',
(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}') (original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
); );
await afterHMR; await afterHMR;
const count = page.locator('#counter-idle pre'); const label = page.locator('#counter-idle-message');
await expect(count).toHaveText('5'); await expect(label).toHaveText('Hello, updated client:idle!');
}); });
}); });