volunteer survey happy path feature test

src/__test__/components/SurveyPath.test.tsx

@@ -0,0 +1,31 @@
+import { screen, render, waitFor, fireEvent } from "@testing-library/react"
+import { SessionDuration } from "components/SessionDuration"
+import userEvent from "@testing-library/user-event"
+
+describe("<SessionDuration/>", () => {
+  const setup = () => {
+    render(<SessionDuration />)
+  }
+
+  describe("when user fills the survey and fill out the session duration", () => {
+    test("shows a 'Congratulations' message and a link to the student dashboard", async () => {
+      setup()
+      await waitFor(() => {
+        const selectedDate = screen.getByRole('textbox')
+        const selectSessionDuration = screen.getByRole('textbox')
+        const chosenOption = screen.getByText(/30 minutes/i)
+        const submitButton = screen.getByRole('button', {  name: /submit/i})
+
+        fireEvent.change(selectedDate, {target: {value: '07\/13\/2022'}})
+        fireEvent.click(selectSessionDuration)
+        fireEvent.click(chosenOption)
+        userEvent.click(submitButton)
+
+        const happyMessage = screen.getByText(/Congratulations/i)
+        const linkStudentDashboard = screen.getByRole('link', {  name: /Back to home page/i})
+        expect(happyMessage).toBeInTheDocument()
+        expect(linkStudentDashboard).toBeInTheDocument()
+      })
+    })
+  })
+})

src/components/App.tsx

@@ -18,11 +18,11 @@ if (params.token) {
 const queryClient = new QueryClient()
 
 const uriLink = () => {
-  // if (window.location.href.indexOf("inkind-volunteer.herokuapp.com") > -1) {
+  if (window.location.href.indexOf("inkind-volunteer.herokuapp.com") > -1) {
     return "https://inkind-admining.herokuapp.com/graphql"
-  // } else {
-  //   return "http://localhost:3001/graphql"
-  // }
+  } else {
+    return "http://localhost:3001/graphql"
+  }
 }
 
 const link = createHttpLink({

src/components/SessionDuration/index.tsx

@@ -78,20 +78,14 @@ export const SessionDuration = (): JSX.Element => {
               ))}
             </div>
           </div>
-          { isValid && (
+
             <button
-                className="bg-primary-500 text-white rounded py-3 px-20 bottom-10 submit-button"
+                className={`${isValid ? "bg-primary-500" : "bg-neutral-200"} text-white rounded py-3 px-20 bottom-10 submit-button`}
+                disabled={isValid ? false : true}
                 type="submit"
             >
               SUBMIT
             </button>
-          )}
-
-          { !isValid && (
-            <button className="bg-neutral-200 text-white rounded py-3 px-20 bottom-10  submit-button">
-              SUBMIT
-            </button>
-          )}
         </form>
       </div>
     </div>