Cleanup tests

storybookjs · May 2, 2024 · a4b05ec · a4b05ec
1 parent 75f87a5
commit a4b05ec
Showing 1 changed file with 46 additions and 32 deletions.
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -32,6 +32,12 @@ function Component() {
 export default {
   component: Component,
   parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/',
+      },
+    },
     test: {
       // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
       // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
@@ -50,43 +56,51 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {
-  play: async ({ canvasElement, step }) => {
+export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
+
+    await expect(cookies().get).toHaveBeenCalledWith('user');
+    await expect(redirect).toHaveBeenCalledWith('/');
+  },
+};
+
+export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
 
-    const loginBtn = canvas.getByText('Login');
-    const logoutBtn = canvas.getByText('Logout');
-    const accessRouteBtn = canvas.getByText('Access protected route');
+    await expect(cookies().get).toHaveBeenLastCalledWith('user');
+    await expect(revalidatePath).toHaveBeenLastCalledWith('/');
+    await expect(redirect).toHaveBeenLastCalledWith('/protected');
+  },
+};
 
-    await step('accessRoute flow - logged out', async () => {
-      await userEvent.click(accessRouteBtn);
-      await expect(cookies().get).toHaveBeenCalledWith('user');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+export const Logout: StoryObj<typeof Component> = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-    await step('accessRoute flow - logged', async () => {
-      cookies.mockRestore();
-      cookies().set('user', 'storybookjs');
-      await userEvent.click(accessRouteBtn);
-      await expect(cookies().get).toHaveBeenCalledWith('user');
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/protected');
-    });
+    await userEvent.click(canvas.getByText('Logout'));
+    await expect(cookies().delete).toHaveBeenCalled();
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
+  },
+};
 
-    await step('logout flow', async () => {
-      cookies.mockRestore();
-      await userEvent.click(logoutBtn);
-      await expect(cookies().delete).toHaveBeenCalled();
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+export const Login: StoryObj<typeof Component> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Login'));
 
-    await step('login flow', async () => {
-      cookies.mockRestore();
-      await userEvent.click(loginBtn);
-      await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+    await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
   },
 };