Refactoring spec

Author: jtoliver-quoin

app/javascript/components/login/component.jsx

@@ -14,7 +14,7 @@ import IdpSelection from "./components/idp-selection";
 import LoginForm from "./components/login-form";
 import { getLoading, getUseIdentityProvider } from "./selectors";
 
-const Container = ({ modal }) => {
+function Component({ modal = false }) {
   const useIdentity = useMemoizedSelector(state => getUseIdentityProvider(state));
   const isLoading = useMemoizedSelector(state => getLoading(state));
   const location = useLocation();
@@ -39,16 +39,12 @@ const Container = ({ modal }) => {
       <LoginComponent modal={modal} />
     </LoadingIndicator>
   );
-};
-
-Container.displayName = NAME;
+}
 
-Container.defaultProps = {
-  modal: false
-};
+Component.displayName = NAME;
 
-Container.propTypes = {
+Component.propTypes = {
   modal: PropTypes.bool
 };
 
-export default Container;
+export default Component;

app/javascript/components/login/component.spec.js

@@ -5,7 +5,7 @@ import Login from "./component";
 describe("<Login />", () => {
   describe("for login form", () => {
     it("renders form", () => {
-      mountedComponent(<Login isAuthenticated={false} />, {
+      mountedComponent(<Login />, {
         idp: {
           use_identity_provider: false
         },
@@ -16,12 +16,13 @@ describe("<Login />", () => {
         }
       });
     });
-    expect(screen.queryByText((content, element) => element.tagName.toLowerCase() === "form")).toBeNull();
+    screen.debug();
+    expect(screen.queryByText((content, element) => element.tagName.toLowerCase() === "form")).toBeInTheDocument();
   });
 
   describe("for provider selection", () => {
     it("renders login selection", () => {
-      mountedComponent(<Login isAuthenticated={false} />, {
+      mountedComponent(<Login />, {
         idp: {
           use_identity_provider: true,
           identity_providers: [
@@ -38,7 +39,7 @@ describe("<Login />", () => {
         }
       });
     });
-
-    expect(screen.queryByTestId("PrimeroIdpSelect")).toBeNull();
+    screen.debug();
+    expect(screen.queryByTestId("PrimeroIdpSelect")).toBeInTheDocument();
   });
 });

app/javascript/components/login/component.unit.test.js

@@ -44,6 +44,7 @@ describe("<PrimeroIdpLink />", () => {
 
     it("renders forms components", () => {
       mountedComponent(<PrimeroIdpLink {...propsOnlyPrimeroIDP} />);
+
       expect(screen.getByText((content, element) => element.tagName.toLowerCase() === "span")).toBeInTheDocument();
       expect(screen.getByText((content, element) => element.tagName.toLowerCase() === "a")).toBeInTheDocument();
     });
@@ -71,7 +72,7 @@ describe("<PrimeroIdpLink />", () => {
     it("renders forms components", () => {
       mountedComponent(<PrimeroIdpLink {...propsOnlyPrimeroIDP} />);
 
-      expect(screen.queryByText(/log_in_primero_idp/i)).toBeNull();
+      expect(document.querySelectorAll("a")).toHaveLength(1);
     });
   });
 });

app/javascript/components/login/components/idp-selection/components/primero-idp-link.spec.js

@@ -38,7 +38,8 @@ describe("<LoginForm />", () => {
         }
       })
     );
-    expect(screen.getByText((content, element) => element.tagName.toLowerCase() === "h1")).toBeInTheDocument();
+
+    expect(screen.getByRole("heading", { name: "login.label" })).toBeInTheDocument();
   });
 
   it("renders username and password input fields", () => {
@@ -56,18 +57,9 @@ describe("<LoginForm />", () => {
       })
     );
     expect(screen.getByRole("textbox", { name: /login.username/i })).toBeInTheDocument();
+    expect(document.querySelector('input[name="password"]')).toBeInTheDocument();
   });
 
-  // TODO: Temp removal
-  // it("renders forgot password link", () => {
-  //   expect(
-  //     component
-  //       .find("a")
-  //       .first()
-  //       .prop("href")
-  //   ).to.have.equal("/forgot_password");
-  // });
-
   it("renders login button", () => {
     mountedComponent(
       <LoginForm {...props} />,

app/javascript/components/login/components/login-form/component.spec.js

@@ -5,12 +5,11 @@ import PasswordResetForm from "./component";
 describe("<PasswordResetForm />", () => {
   it("does not render action buttons when modal is true", () => {
     mountedComponent(<PasswordResetForm modal />);
-    expect(screen.getByText(/login.password_reset_modal_text/i)).toBeInTheDocument();
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
   });
 
   it("renders action buttons when modal is false", () => {
-    mountedComponent(<PasswordResetForm modal />);
-    expect(screen.queryByText(/buttons.ok/i)).toBeNull();
-    expect(screen.queryByText(/buttons.cancel/i)).toBeNull();
+    mountedComponent(<PasswordResetForm modal={false} />);
+    expect(screen.getAllByRole("button")).toHaveLength(2);
   });
 });