test(auth): add token store reset after each test

src/features/auth/model/stores/authStore/authStore.spec.ts

@@ -6,6 +6,7 @@ import {
   MOCK_NEW_EMAIL,
   MOCK_PASSWORD,
 } from "../../../api/calls/mocks";
+import { useTokenStore } from "shared/api";
 
 const server = setupServer(
   apiCalls.loginMock,
@@ -21,6 +22,7 @@ describe("authStore", () => {
   beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
   afterEach(() => {
     useAuthStore.getState().reset();
+    useTokenStore.getState().reset();
     server.resetHandlers();
   });
   afterAll(() => server.close());

src/features/auth/ui/DefaultButton/DefaultButton.tsx

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes } from "react";
+
+export type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function DefaultButtonComponent({
+  disabled,
+  children,
+}: ButtonAttributes) {
+  return (
+    <button type="submit" disabled={disabled}>
+      {children}
+    </button>
+  );
+}

src/features/auth/ui/DefaultInput/DefaultInput.tsx

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from "react";
+
+export type InputAttributes = InputHTMLAttributes<HTMLInputElement>;
+
+export function DefaultInputComponent({
+  type,
+  value,
+  onChange,
+  ["aria-label"]: ariaLabel,
+}: InputAttributes) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={onChange}
+      aria-label={ariaLabel}
+    />
+  );
+}

src/features/auth/ui/LoginForm/LoginForm.spec.tsx

@@ -1,24 +1,26 @@
 import { selectAuthData, useAuthStore } from "../../model";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { LoginForm } from "./LoginForm";
 import { MOCK_EMAIL, MOCK_PASSWORD } from "../../api";
+import { useTokenStore } from "shared/api";
 
 describe("LoginForm", () => {
   afterEach(() => {
     useAuthStore.getState().reset();
+    useTokenStore.getState().reset();
     vi.restoreAllMocks();
   });
 
   it("should render form", () => {
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
     const form = screen.getByRole("form");
 
     expect(form).toBeInTheDocument();
   });
 
   it("disables submit button when form is invalid", () => {
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
     const loginButton = screen.getByRole("button", { name: /login/i });
 
     expect(loginButton).toBeDisabled();
@@ -27,7 +29,7 @@ describe("LoginForm", () => {
   it("disables submit button when auth store status equals loading", async () => {
     useAuthStore.setState({ status: "loading" });
 
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);
@@ -41,7 +43,7 @@ describe("LoginForm", () => {
   it("enables submit button when form is valid and auth store status isn't equal to loading", async () => {
     useAuthStore.setState({ status: "idle" });
 
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);
@@ -53,7 +55,7 @@ describe("LoginForm", () => {
   });
 
   it("updates email value in auth store when user types", async () => {
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     await userEvent.type(emailInput, MOCK_EMAIL);
 
@@ -62,7 +64,7 @@ describe("LoginForm", () => {
   });
 
   it("updates password value in auth store when user types", async () => {
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
     const passwordInput = screen.getByLabelText(/password/i);
     await userEvent.type(passwordInput, MOCK_PASSWORD);
 
@@ -74,7 +76,7 @@ describe("LoginForm", () => {
     const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
     useAuthStore.setState({ status: "idle" });
 
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -8,38 +8,23 @@ import {
 import {
   type SubmitEvent,
   type ChangeEvent,
-  type HTMLAttributes,
-  type InputHTMLAttributes,
-  type ButtonHTMLAttributes,
   cloneElement,
   type ReactElement,
 } from "react";
-
-export type InputAttributes = InputHTMLAttributes<HTMLInputElement>;
-export type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
+import {
+  DefaultButtonComponent,
+  type ButtonAttributes,
+} from "../DefaultButton/DefaultButton";
+import {
+  DefaultInputComponent,
+  type InputAttributes,
+} from "../DefaultInput/DefaultInput";
 
 export interface Props {
   InputComponent?: ReactElement<InputAttributes>;
   ButtonComponent?: ReactElement<ButtonAttributes>;
 }
 
-const DefaultInputComponent = ({
-  value,
-  onChange,
-  ["aria-label"]: ariaLabel,
-}: InputAttributes) => (
-  <input
-    type="email"
-    value={value}
-    onChange={onChange}
-    aria-label={ariaLabel}
-  />
-);
-
-const DefaultButtonComponent = ({ disabled }: ButtonAttributes) => (
-  <button type="submit" disabled={disabled} />
-);
-
 /**
  * Login form component
  */
@@ -67,9 +52,9 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
 
   return (
     <form aria-label="Login form" onSubmit={handleSubmit}>
+      {/* EMAIL */}
       {InputComponent ? (
         cloneElement(InputComponent, {
-          type: "email",
           value: email,
           onChange: handleEmailChange,
           "aria-label": "Email",
@@ -82,9 +67,9 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
           aria-label="Email"
         />
       )}
+      {/* PASSWORD  */}
       {InputComponent ? (
         cloneElement(InputComponent, {
-          type: "password",
           value: password,
           onChange: handlePasswordChange,
           "aria-label": "Password",
@@ -97,14 +82,14 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
           aria-label="Password"
         />
       )}
+      {/* BUTTON */}
       {ButtonComponent ? (
         cloneElement(ButtonComponent, {
           type: "submit",
           disabled: disabled,
-          children: "Login",
         })
       ) : (
-        <DefaultButtonComponent type="submit" disabled={disabled}>
+        <DefaultButtonComponent disabled={disabled}>
           Login
         </DefaultButtonComponent>
       )}

src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx

@@ -1,24 +1,26 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { RegisterForm } from "./RegisterForm";
 import { selectAuthData, useAuthStore } from "../../model";
 import { MOCK_NEW_EMAIL, MOCK_PASSWORD } from "../../api";
 import userEvent from "@testing-library/user-event";
+import { useTokenStore } from "shared/api";
 
 describe("RegisterForm", () => {
   afterEach(() => {
     useAuthStore.getState().reset();
+    useTokenStore.getState().reset();
     vi.restoreAllMocks();
   });
 
   it("should render form", () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const form = screen.getByRole("form");
     expect(form).toBeInTheDocument();
   });
 
   it("should disable button when form is invalid", async () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const registerButton = screen.getByRole("button", { name: /register/i });
 
@@ -28,7 +30,7 @@ describe("RegisterForm", () => {
   it("should disable button when auth store status equals loading", async () => {
     useAuthStore.setState({ status: "loading" });
 
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);
@@ -43,7 +45,7 @@ describe("RegisterForm", () => {
   });
 
   it("should disable button when password and confirm password do not match", async () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);
@@ -60,7 +62,7 @@ describe("RegisterForm", () => {
   it("should enable button when password and confirm password match and auth store status isn't equal to loading", async () => {
     useAuthStore.setState({ status: "idle" });
 
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);
@@ -75,7 +77,7 @@ describe("RegisterForm", () => {
   });
 
   it("should change email value in auth store when user types", async () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     await userEvent.type(emailInput, MOCK_NEW_EMAIL);
 
@@ -85,7 +87,7 @@ describe("RegisterForm", () => {
   });
 
   it("should change password value in auth store when user types", async () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
     const passwordInput = screen.getByLabelText(/password/i);
     await userEvent.type(passwordInput, MOCK_PASSWORD);
 
@@ -98,7 +100,7 @@ describe("RegisterForm", () => {
     const registerSpy = vi.spyOn(useAuthStore.getState(), "register");
     useAuthStore.setState({ status: "idle" });
 
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);

src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -1,22 +1,45 @@
-import { useState, type ChangeEvent, type SubmitEvent } from "react";
 import {
+  cloneElement,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SubmitEvent,
+} from "react";
+import {
+  selectEmail,
   selectFormValid,
+  selectPassword,
   selectStatusIsLoading,
   useAuthStore,
 } from "../../model";
+import {
+  DefaultInputComponent,
+  type InputAttributes,
+} from "../DefaultInput/DefaultInput";
+import {
+  DefaultButtonComponent,
+  type ButtonAttributes,
+} from "../DefaultButton/DefaultButton";
+
+export interface Props {
+  InputComponent?: ReactElement<InputAttributes>;
+  ButtonComponent?: ReactElement<ButtonAttributes>;
+}
 
 /**
  * Register form component
  */
-export function RegisterForm() {
-  const { formData, setEmail, setPassword, register } = useAuthStore();
+export function RegisterForm({ InputComponent, ButtonComponent }: Props) {
+  const { setEmail, setPassword, register } = useAuthStore();
+  const email = useAuthStore(selectEmail);
+  const password = useAuthStore(selectPassword);
 
   const [confirmedPassword, setConfirmedPassword] = useState("");
 
   const formValid = useAuthStore(selectFormValid);
   const isLoading = useAuthStore(selectStatusIsLoading);
 
-  const passwordMatch = formData?.password?.value === confirmedPassword;
+  const passwordMatch = password === confirmedPassword;
   const disabled = isLoading || !formValid || !passwordMatch;
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -38,27 +61,63 @@ export function RegisterForm() {
 
   return (
     <form aria-label="Register Form" onSubmit={handleSubmit}>
-      <input
+      {/* EMAIL */}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          value: email,
+          onChange: handleEmailChange,
+          "aria-label": "Email",
+        })
+      ) : (
+        <DefaultInputComponent
           type="email"
-        aria-label="Email"
-        value={formData?.email?.value ?? ""}
+          value={email}
           onChange={handleEmailChange}
+          aria-label="Email"
         />
-      <input
+      )}
+
+      {/* PASSWORD  */}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          value: password,
+          onChange: handlePasswordChange,
+          "aria-label": "Password",
+        })
+      ) : (
+        <DefaultInputComponent
           type="password"
-        aria-label="Password"
-        value={formData?.password?.value ?? ""}
+          value={password}
           onChange={handlePasswordChange}
+          aria-label="Password"
         />
-      <input
+      )}
+      {/* PASSWORD  */}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          value: confirmedPassword,
+          onChange: handleConfirmChange,
+          "aria-label": "Confirm",
+        })
+      ) : (
+        <DefaultInputComponent
           type="password"
-        aria-label="Confirm"
           value={confirmedPassword}
           onChange={handleConfirmChange}
+          aria-label="Confirm"
         />
-      <button type="submit" aria-label="Register" disabled={disabled}>
+      )}
+      {/* BUTTON */}
+      {ButtonComponent ? (
+        cloneElement(ButtonComponent, {
+          type: "submit",
+          disabled: disabled,
+        })
+      ) : (
+        <DefaultButtonComponent disabled={disabled}>
           Register
-      </button>
+        </DefaultButtonComponent>
+      )}
     </form>
   );
 }