Merge pull request garageScript#2121 from flacial/feature/signup-pass…

…word feat: Add password input to Signup page
flacial · Aug 4, 2022 · c45e2d4 · c45e2d4
2 parents 0adf6c5 + d3f78e6
commit c45e2d4
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 112 deletions.
diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -28344,6 +28344,16 @@ exports[`Storyshots Pages/Signup Signup 1`] = `
             placeholder="Last name"
             value=""
           />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password"
+            type="password"
+            value=""
+          />
           <button
             className="btn btn-primary btn-lg btn mb-3"
             data-testid="submit"
@@ -28437,6 +28447,16 @@ exports[`Storyshots Pages/Signup Signup Basic 1`] = `
             placeholder="Last name"
             value=""
           />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password"
+            type="password"
+            value=""
+          />
           <button
             className="btn btn-primary btn-lg btn mb-3"
             data-testid="submit"
@@ -28546,6 +28566,16 @@ exports[`Storyshots Pages/Signup Signup Errors 1`] = `
             placeholder="Last name"
             value=""
           />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password"
+            type="password"
+            value=""
+          />
           <button
             className="btn btn-primary btn-lg btn mb-3"
             data-testid="submit"
@@ -28639,6 +28669,16 @@ exports[`Storyshots Pages/Signup Signup Loading 1`] = `
             placeholder="Last name"
             value=""
           />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password"
+            type="password"
+            value=""
+          />
           <button
             className="btn btn-dark btn-lg btn mb-3"
             data-testid="submit"
@@ -28681,29 +28721,94 @@ exports[`Storyshots Pages/Signup Signup Success 1`] = `
     <div
       className="card-body text-center pt-5 pb-5"
     >
-      <img
-        alt="Green circle with a checkmark inside."
-        className="mb-4"
-        height="100px"
-        src="/assets/curriculum/icons/checked.svg"
-        width="100px"
-      />
       <h1
         className="card-title h2 fw-bold mb-5"
       >
-        Account created successfully!
+        Create Account
       </h1>
       <p
         className="card-text"
       />
-      <a
-        className="btn btn-primary noUnderline"
-        href="/confirm/undefined"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
+      <form
+        action="#"
+        data-testid="form"
+        onReset={[Function]}
+        onSubmit={[Function]}
       >
-        Click here to set your password.
-      </a>
+        <div
+          className="form-group d-grid mt-3"
+        >
+          <input
+            autoFocus={true}
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="email"
+            name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Email address"
+            type="email"
+            value=""
+          />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="username"
+            name="username"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Username"
+            value=""
+          />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="firstName"
+            name="firstName"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="First name"
+            value=""
+          />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="lastName"
+            name="lastName"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Last name"
+            value=""
+          />
+          <input
+            className="form-control form-control-lg fw-light mb-3 "
+            data-testid="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password"
+            type="password"
+            value=""
+          />
+          <button
+            className="btn btn-primary btn-lg btn mb-3"
+            data-testid="submit"
+            type="submit"
+          >
+            Create Account
+          </button>
+        </div>
+      </form>
+      <p
+        className="text-black-50"
+      >
+        Already have an account?
+
+        <a
+          className="text-primary link"
+          href="/login"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+          Login
+        </a>
+      </p>
     </div>
   </div>
 </div>

diff --git a/__tests__/pages/__snapshots__/signup.test.js.snap b/__tests__/pages/__snapshots__/signup.test.js.snap
@@ -70,6 +70,14 @@ exports[`Signup Page Should render errors on fail 1`] = `
               placeholder="Last name"
               value="fakelastname"
             />
+            <input
+              class="form-control form-control-lg fw-light mb-3 "
+              data-testid="password"
+              name="password"
+              placeholder="Password"
+              type="password"
+              value="fakepassword"
+            />
             <button
               class="btn btn-primary btn-lg btn mb-3"
               data-testid="submit"
@@ -96,41 +104,3 @@ exports[`Signup Page Should render errors on fail 1`] = `
   </div>
 </div>
 `;
-
-exports[`Signup Page Should render success component on success 1`] = `
-<div>
-  <div
-    class="row mt-5"
-  >
-    <div
-      class="card shadow-sm col-sm-8 col-md-7 col-lg-6 col-xl-6 m-auto px-md-5 border-0"
-    >
-      <div
-        class="card-body text-center pt-5 pb-5"
-      >
-        <img
-          alt="Green circle with a checkmark inside."
-          class="mb-4"
-          height="100px"
-          src="/assets/curriculum/icons/checked.svg"
-          width="100px"
-        />
-        <h1
-          class="card-title h2 fw-bold mb-5"
-        >
-          Account created successfully!
-        </h1>
-        <p
-          class="card-text"
-        />
-        <a
-          class="btn btn-primary noUnderline"
-          href="/confirm/undefined"
-        >
-          Click here to set your password.
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/__tests__/pages/signup.test.js b/__tests__/pages/signup.test.js
@@ -6,32 +6,39 @@ import SIGNUP_USER from '../../graphql/queries/signupUser'
 import SignupPage from '../../pages/signup'
 import userEvent from '@testing-library/user-event'
 import { getLayout } from '../../components/Layout'
+import { useRouter } from 'next/router'
 
 import dummySessionData from '../../__dummy__/sessionData'
 
 describe('Signup Page', () => {
+  const { push } = useRouter()
+
   const fakeEmail = '[email protected]'
   const fakeUsername = 'fakeusername'
   const fakeFirstName = 'fakefirstname'
   const fakeLastName = 'fakelastname'
+  const fakePassword = 'fakepassword'
 
   const fillOutSignupForm = async getByTestId => {
     const emailField = getByTestId('email')
     const usernameField = getByTestId('username')
     const firstNameField = getByTestId('firstName')
     const lastNameField = getByTestId('lastName')
+    const passwordField = getByTestId('password')
 
     // the type event needs to be delayed so the Formik validations finish
     await userEvent.type(emailField, fakeEmail, { delay: 1 })
     await userEvent.type(usernameField, fakeUsername, { delay: 1 })
     await userEvent.type(firstNameField, fakeFirstName, { delay: 1 })
     await userEvent.type(lastNameField, fakeLastName, { delay: 1 })
+    await userEvent.type(passwordField, fakePassword, { delay: 1 })
   }
 
   test('Should use Layout component getLayout ', async () => {
     expect(SignupPage.getLayout === getLayout).toBe(true)
   })
-  test('Should render success component on success', async () => {
+
+  test('Should redirect to /curriculum on success', async () => {
     const mocks = [
       {
         request: { query: GET_APP },
@@ -50,7 +57,8 @@ describe('Signup Page', () => {
             firstName: fakeFirstName,
             lastName: fakeLastName,
             email: fakeEmail,
-            username: fakeUsername
+            username: fakeUsername,
+            password: fakePassword
           }
         },
         result: {
@@ -65,7 +73,7 @@ describe('Signup Page', () => {
       }
     ]
 
-    const { container, getByTestId, getByText } = render(
+    const { getByTestId } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <SignupPage />
       </MockedProvider>
@@ -76,10 +84,7 @@ describe('Signup Page', () => {
     await fillOutSignupForm(getByTestId)
     fireEvent.click(submitButton)
 
-    await waitFor(() => {
-      expect(getByText('Account created successfully!')).toBeTruthy()
-      expect(container).toMatchSnapshot()
-    })
+    await waitFor(() => expect(push).toBeCalledWith('/curriculum'))
   })
 
   test('Should render errors on fail', async () => {
@@ -101,7 +106,8 @@ describe('Signup Page', () => {
             firstName: fakeFirstName,
             lastName: fakeLastName,
             email: fakeEmail,
-            username: fakeUsername
+            username: fakeUsername,
+            password: fakePassword
           }
         },
         result: {

diff --git a/graphql/index.tsx b/graphql/index.tsx
@@ -263,7 +263,7 @@ export type MutationSignupArgs = {
   email: Scalars['String']
   firstName: Scalars['String']
   lastName: Scalars['String']
-  password?: InputMaybe<Scalars['String']>
+  password: Scalars['String']
   username: Scalars['String']
 }
 
@@ -1026,6 +1026,7 @@ export type SignupMutationVariables = Exact<{
   lastName: Scalars['String']
   email: Scalars['String']
   username: Scalars['String']
+  password: Scalars['String']
 }>
 
 export type SignupMutation = {
@@ -1631,7 +1632,7 @@ export type MutationResolvers<
     ContextType,
     RequireFields<
       MutationSignupArgs,
-      'email' | 'firstName' | 'lastName' | 'username'
+      'email' | 'firstName' | 'lastName' | 'password' | 'username'
     >
   >
   updateChallenge?: Resolver<
@@ -4377,12 +4378,14 @@ export const SignupDocument = gql`
     $lastName: String!
     $email: String!
     $username: String!
+    $password: String!
   ) {
     signup(
       firstName: $firstName
       lastName: $lastName
       email: $email
       username: $username
+      password: $password
     ) {
       success
       username
@@ -4444,6 +4447,7 @@ export function withSignup<
  *      lastName: // value for 'lastName'
  *      email: // value for 'email'
  *      username: // value for 'username'
+ *      password: // value for 'password'
  *   },
  * });
  */

diff --git a/graphql/queries/signupUser.ts b/graphql/queries/signupUser.ts
@@ -6,12 +6,14 @@ const SIGNUP_USER = gql`
     $lastName: String!
     $email: String!
     $username: String!
+    $password: String!
   ) {
     signup(
       firstName: $firstName
       lastName: $lastName
       email: $email
       username: $username
+      password: $password
     ) {
       success
       username

diff --git a/graphql/resolvers/authController.test.js b/graphql/resolvers/authController.test.js
@@ -141,6 +141,13 @@ describe('auth controller', () => {
       ).rejects.toThrowError('User already exists')
     })
 
+    test('should reject if password is invalid', () => {
+      prismaMock.user.findFirst.mockResolvedValue(null)
+      return expect(
+        signup({}, { ...userArgs, password: '12' }, { req: { session: {} } })
+      ).rejects.toThrowError('Password does not meet criteria')
+    })
+
     test('should reject on second findOne. The first request checks for username, second request checks for email', () => {
       prismaMock.user.findFirst
         .mockResolvedValueOnce(null)