Add integration test

BrunoQuaresma · BrunoQuaresma · commit db3102c512ae · 2023-06-23T14:41:21.000Z
diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -6,6 +6,8 @@ import { SectionAction } from "../SectionAction/SectionAction"
 type SectionLayout = "fixed" | "fluid"
 
 export interface SectionProps {
+  // Useful for testing
+  id?: string
   title?: ReactNode | string
   description?: ReactNode
   toolbar?: ReactNode
@@ -20,6 +22,7 @@ type SectionFC = FC<PropsWithChildren<SectionProps>> & {
 }
 
 export const Section: SectionFC = ({
+  id,
   title,
   description,
   toolbar,
@@ -30,12 +33,16 @@ export const Section: SectionFC = ({
 }) => {
   const styles = useStyles({ layout })
   return (
-    <section className={className}>
+    <section className={className} id={id} data-testid={id}>
       <div className={styles.inner}>
         {(title || description) && (
           <div className={styles.header}>
             <div>
-              {title && <Typography variant="h4" sx={{ fontSize: 24 }}>{title}</Typography>}
+              {title && (
+                <Typography variant="h4" sx={{ fontSize: 24 }}>
+                  {title}
+                </Typography>
+              )}
               {description && typeof description === "string" && (
                 <Typography className={styles.description}>
                   {description}
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.test.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react"
+import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import * as API from "../../../api/api"
 import * as SecurityForm from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
 import {
@@ -11,6 +11,7 @@ import {
   MockAuthMethodsWithPasswordType,
   mockApiError,
 } from "testHelpers/entities"
+import userEvent from "@testing-library/user-event"
 
 const { t } = i18next
 
@@ -115,3 +116,29 @@ test("update password when submit returns an unknown error", async () => {
   expect(API.updateUserPassword).toBeCalledTimes(1)
   expect(API.updateUserPassword).toBeCalledWith(user.id, newSecurityFormValues)
 })
+
+test("change login type to OIDC", async () => {
+  const convertToOAUTHSpy = jest.spyOn(API, "convertToOAUTH")
+  const user = userEvent.setup()
+  const { user: userData } = await renderPage()
+
+  const ssoSection = screen.getByTestId("sso-section")
+  const githubButton = within(ssoSection).getByText("GitHub", { exact: false })
+  await user.click(githubButton)
+
+  const confirmationDialog = await screen.findByTestId("dialog")
+  const confirmPasswordField = within(confirmationDialog).getByLabelText(
+    "Confirm your password",
+  )
+  await user.type(confirmPasswordField, "password123")
+  const updateButton = within(confirmationDialog).getByText("Update")
+  await user.click(updateButton)
+
+  await waitFor(() => {
+    expect(convertToOAUTHSpy).toHaveBeenCalledWith({
+      password: "password123",
+      to_login_type: "github",
+      email: userData.email,
+    })
+  })
+})
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -91,6 +91,7 @@ export const SingleSignOnSection = ({
   return (
     <>
       <Section
+        id="sso-section"
         title="Single Sign On"
         description="Authenticate in Coder using one-click"
       >

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,7 @@ export const SingleSignOnSection = ({`
`91`	`91`	`return (`
`92`	`92`	`<>`
`93`	`93`	`<Section`
	`94`	`+ id="sso-section"`
`94`	`95`	`title="Single Sign On"`
`95`	`96`	`description="Authenticate in Coder using one-click"`
`96`	`97`	`>`