1  <script module>
 2    import { defineMeta } from '@storybook/addon-svelte-csf';
 3    import { expect, userEvent, waitFor, within } from 'storybook/test';
 4    import Page from './Page.svelte';
 5    import { fn } from 'storybook/test';
 6  
 7    // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 8    const { Story } = defineMeta({
 9      title: 'Example/Page',
10      component: Page,
11      parameters: {
12        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
13        layout: 'fullscreen',
14      },
15    });
16  </script>
17  
18  <Story name="Logged In" play={async ({ canvasElement }) => {
19      const canvas = within(canvasElement);
20      const loginButton = canvas.getByRole('button', { name: /Log in/i });
21      await expect(loginButton).toBeInTheDocument();
22      await userEvent.click(loginButton);
23      await waitFor(() => expect(loginButton).not.toBeInTheDocument());
24  
25      const logoutButton = canvas.getByRole('button', { name: /Log out/i });
26      await expect(logoutButton).toBeInTheDocument();
27    }}
28  />
29  
30  <Story name="Logged Out" />