Refactor LoginPage tests

BrunoQuaresma · BrunoQuaresma · commit ae2344483149 · 2023-09-07T17:53:50.000Z
diff --git a/site/src/pages/LoginPage/LoginPage.test.tsx b/site/src/pages/LoginPage/LoginPage.test.tsx
@@ -2,13 +2,13 @@ import { fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { rest } from "msw";
 import { createMemoryRouter } from "react-router-dom";
-import { Language } from "./SignInForm/SignInForm";
+import { Language } from "./SignInForm";
 import {
   render,
   renderWithRouter,
   waitForLoaderToBeRemoved,
-} from "../../testHelpers/renderHelpers";
-import { server } from "../../testHelpers/server";
+} from "testHelpers/renderHelpers";
+import { server } from "testHelpers/server";
 import { LoginPage } from "./LoginPage";
 import * as TypesGen from "api/typesGenerated";
 import { i18n } from "i18n";
@@ -25,14 +25,6 @@ describe("LoginPage", () => {
     );
   });
 
-  it("renders the sign-in form", async () => {
-    // When
-    render(<LoginPage />);
-
-    // Then
-    await screen.findByText(Language.passwordSignIn);
-  });
-
   it("shows an error message if SignIn fails", async () => {
     // Given
     const apiErrorMessage = "Something wrong happened";
@@ -59,28 +51,6 @@ describe("LoginPage", () => {
     expect(errorMessage).toBeDefined();
   });
 
-  it("shows github authentication when enabled", async () => {
-    const authMethods: TypesGen.AuthMethods = {
-      password: { enabled: true },
-      github: { enabled: true },
-      oidc: { enabled: true, signInText: "", iconUrl: "" },
-    };
-
-    // Given
-    server.use(
-      rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(authMethods));
-      }),
-    );
-
-    // When
-    render(<LoginPage />);
-
-    // Then
-    expect(screen.queryByText(Language.passwordSignIn)).not.toBeInTheDocument();
-    await screen.findByText(Language.githubSignIn);
-  });
-
   it("redirects to the setup page if there is no first user", async () => {
     // Given
     server.use(
diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx
@@ -1,59 +1,62 @@
 import { action } from "@storybook/addon-actions";
-import { ComponentMeta, Story } from "@storybook/react";
 import { MockAuthMethods } from "testHelpers/entities";
-import { LoginPageView, LoginPageViewProps } from "./LoginPageView";
+import { LoginPageView } from "./LoginPageView";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof LoginPageView> = {
   title: "pages/LoginPageView",
   component: LoginPageView,
-} as ComponentMeta<typeof LoginPageView>;
+};
 
-const Template: Story<LoginPageViewProps> = (args) => (
-  <LoginPageView {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof LoginPageView>;
 
-export const Example = Template.bind({});
-Example.args = {
-  isLoading: false,
-  onSignIn: action("onSignIn"),
-  context: {
-    data: {
-      authMethods: MockAuthMethods,
-      hasFirstUser: false,
+export const Example: Story = {
+  args: {
+    isLoading: false,
+    onSignIn: action("onSignIn"),
+    context: {
+      data: {
+        authMethods: MockAuthMethods,
+        hasFirstUser: false,
+      },
     },
   },
 };
 
 const err = new Error("Username or email are wrong.");
 
-export const AuthError = Template.bind({});
-AuthError.args = {
-  isLoading: false,
-  onSignIn: action("onSignIn"),
-  context: {
-    error: err,
-    data: {
-      authMethods: MockAuthMethods,
-      hasFirstUser: false,
+export const AuthError: Story = {
+  args: {
+    isLoading: false,
+    onSignIn: action("onSignIn"),
+    context: {
+      error: err,
+      data: {
+        authMethods: MockAuthMethods,
+        hasFirstUser: false,
+      },
     },
   },
 };
 
-export const LoadingInitialData = Template.bind({});
-LoadingInitialData.args = {
-  isLoading: true,
-  onSignIn: action("onSignIn"),
-  context: {},
+export const LoadingInitialData: Story = {
+  args: {
+    isLoading: true,
+    onSignIn: action("onSignIn"),
+    context: {},
+  },
 };
 
-export const SigningIn = Template.bind({});
-SigningIn.args = {
-  isSigningIn: true,
-  onSignIn: action("onSignIn"),
-  context: {
-    data: {
-      authMethods: MockAuthMethods,
-      hasFirstUser: false,
+export const SigningIn: Story = {
+  args: {
+    isSigningIn: true,
+    onSignIn: action("onSignIn"),
+    context: {
+      data: {
+        authMethods: MockAuthMethods,
+        hasFirstUser: false,
+      },
     },
   },
 };
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -4,7 +4,7 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Box from "@mui/material/Box";
 import { Language } from "./SignInForm";
-import { AuthMethods } from "../../../api/typesGenerated";
+import { AuthMethods } from "api/typesGenerated";
 import { FC } from "react";
 import { makeStyles } from "@mui/styles";
 
diff --git a/site/src/pages/LoginPage/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx
@@ -1,7 +1,7 @@
-import { Stack } from "../../../components/Stack/Stack";
+import { Stack } from "components/Stack/Stack";
 import TextField from "@mui/material/TextField";
-import { getFormHelpers, onChangeTrimmed } from "../../../utils/formUtils";
-import { LoadingButton } from "../../../components/LoadingButton/LoadingButton";
+import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import { LoadingButton } from "components/LoadingButton/LoadingButton";
 import { Language } from "./SignInForm";
 import { FormikContextType, FormikTouched, useFormik } from "formik";
 import * as Yup from "yup";
diff --git a/site/src/pages/LoginPage/SignInForm.stories.tsx b/site/src/pages/LoginPage/SignInForm.stories.tsx
@@ -0,0 +1,94 @@
+import { mockApiError } from "testHelpers/entities";
+import { SignInForm } from "./SignInForm";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SignInForm> = {
+  title: "components/SignInForm",
+  component: SignInForm,
+  args: {
+    isSigningIn: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SignInForm>;
+
+export const SignedOut: Story = {};
+
+export const SigningIn: Story = {
+  args: {
+    isSigningIn: true,
+    authMethods: {
+      password: { enabled: true },
+      github: { enabled: true },
+      oidc: { enabled: false, signInText: "", iconUrl: "" },
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: mockApiError({
+      message: "Email or password was invalid",
+      validations: [
+        {
+          field: "password",
+          detail: "Password is invalid.",
+        },
+      ],
+    }),
+    initialTouched: {
+      password: true,
+    },
+  },
+};
+
+export const WithGithub: Story = {
+  args: {
+    authMethods: {
+      password: { enabled: true },
+      github: { enabled: true },
+      oidc: { enabled: false, signInText: "", iconUrl: "" },
+    },
+  },
+};
+
+export const WithOIDC: Story = {
+  args: {
+    authMethods: {
+      password: { enabled: true },
+      github: { enabled: false },
+      oidc: { enabled: true, signInText: "", iconUrl: "" },
+    },
+  },
+};
+
+export const WithOIDCWithoutPassword: Story = {
+  args: {
+    authMethods: {
+      password: { enabled: false },
+      github: { enabled: false },
+      oidc: { enabled: true, signInText: "", iconUrl: "" },
+    },
+  },
+};
+
+export const WithoutAny: Story = {
+  args: {
+    authMethods: {
+      password: { enabled: false },
+      github: { enabled: false },
+      oidc: { enabled: false, signInText: "", iconUrl: "" },
+    },
+  },
+};
+
+export const WithGithubAndOIDC: Story = {
+  args: {
+    authMethods: {
+      password: { enabled: true },
+      github: { enabled: true },
+      oidc: { enabled: true, signInText: "", iconUrl: "" },
+    },
+  },
+};
diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx
@@ -1,9 +1,9 @@
 import { makeStyles } from "@mui/styles";
 import { FormikTouched } from "formik";
 import { FC, useState } from "react";
-import { AuthMethods } from "../../../api/typesGenerated";
+import { AuthMethods } from "api/typesGenerated";
 import { useTranslation } from "react-i18next";
-import { Maybe } from "../../../components/Conditionals/Maybe";
+import { Maybe } from "components/Conditionals/Maybe";
 import { PasswordSignInForm } from "./PasswordSignInForm";
 import { OAuthSignInForm } from "./OAuthSignInForm";
 import { BuiltInAuthFormValues } from "./SignInForm.types";
diff --git a/site/src/pages/LoginPage/SignInForm.types.ts b/site/src/pages/LoginPage/SignInForm.types.ts
diff --git a/site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx b/site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx
