chore: add saml signup test / improve signup e2e test (#16849)

* add comment to signup-view

* add a basic test for saml button in signup

* add a test for cookie consent checkbox

* refactor and remove duplicates

* rename data-testid for saml button

* add test for saml

* remove code not needed

* better naming

* improve

* address code nit

* skip saml test when needed

* fix flag

* improve

* improve more

* refactor

* refactor

* refactor

* fix and add 1 more test

* remove tag

* remove unneeded code

* fix

* fix test

* it needs to be parallel mode

* reduce code

* simplify

* fix

* fix flake

* fix another flake

* add comments + refactor

---------

Co-authored-by: unknown <adhabal2002@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

apps/web/modules/signup-view.tsx

@@ -206,10 +206,10 @@ export default function Signup({
  }
  }, [redirectUrl]);
 
- const [COOKIE_CONSENT, setCOOKIE_CONSENT] = useState(false);
+ const [userConsentToCookie, setUserConsentToCookie] = useState(false); // No need to be checked for user to proceed
 
  function handleConsentChange(consent: boolean) {
- setCOOKIE_CONSENT(!consent);
+ setUserConsentToCookie(!consent);
  }
 
  const loadingSubmitState = isSubmitSuccessful || isSubmitting;
@@ -297,7 +297,7 @@ export default function Signup({
 
  return (
  <>
- {IS_CALCOM && (!IS_EUROPE || COOKIE_CONSENT) ? (
+ {IS_CALCOM && (!IS_EUROPE || userConsentToCookie) ? (
  <>
  {process.env.NEXT_PUBLIC_GTM_ID && (
  <>
@@ -342,6 +342,7 @@ export default function Signup({
  color="minimal"
  className="hover:bg-subtle todesktop:mt-10 mb-6 flex h-6 max-h-6 w-full items-center rounded-md px-3 py-2"
  StartIcon="arrow-left"
+ data-testid="signup-back-button"
  onClick={() => {
  setDisplayEmailForm(false);
  setIsSamlSignup(false);
@@ -432,7 +433,8 @@ export default function Signup({
  ) : null}
 
  <CheckboxField
- onChange={() => handleConsentChange(COOKIE_CONSENT)}
+ data-testid="signup-cookie-content-checkbox"
+ onChange={() => handleConsentChange(userConsentToCookie)}
  description={t("cookie_consent_checkbox")}
  />
  {errors.apiError && (
@@ -445,6 +447,7 @@ export default function Signup({
  )}
  {isSamlSignup ? (
  <Button
+ data-testid="saml-submit-button"
  color="primary"
  disabled={
  !!formMethods.formState.errors.username ||
@@ -457,6 +460,7 @@ export default function Signup({
  onClick={() => {
  const username = formMethods.getValues("username");
  if (!username) {
+ // should not be reached but needed to bypass type errors
  showToast("error", t("username_required"));
  return;
  }
@@ -572,6 +576,7 @@ export default function Signup({
  </Button>
  {isSAMLLoginEnabled && (
  <Button
+ data-testid="continue-with-saml-button"
  color="minimal"
  disabled={isGoogleLoading}
  className={classNames("w-full justify-center rounded-md text-center")}

apps/web/playwright/saml.e2e.ts

@@ -1,17 +1,81 @@
-import { IS_SAML_LOGIN_ENABLED } from "../server/lib/constants";
+import { expect } from "@playwright/test";
+
+import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
+import { IS_PREMIUM_USERNAME_ENABLED } from "@calcom/lib/constants";
+
 import { login } from "./fixtures/users";
 import { test } from "./lib/fixtures";
 
+test.describe.configure({ mode: "parallel" });
+
 test.describe("SAML tests", () => {
+ // eslint-disable-next-line playwright/no-skipped-test
+ test.skip(!isSAMLLoginEnabled, "Skipping due to SAML login being disabled");
+
  test("test SAML configuration UI with pro@example.com", async ({ page }) => {
  // TODO: Figure out a way to use the users from fixtures here, right now we cannot set
  // the SAML_ADMINS env variables dynamically
  await login({ username: "pro", email: "pro@example.com", password: "pro" }, page);
  // eslint-disable-next-line playwright/no-skipped-test
- test.skip(!IS_SAML_LOGIN_ENABLED, "It should only run if SAML is enabled");
  // Try to go Security page
  await page.goto("/settings/security/sso");
  // It should redirect you to the event-types page
  // await page.waitForSelector("[data-testid=saml_config]");
  });
+
+ test.describe("SAML Signup Flow Test", async () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("/signup");
+ await expect(page.locator("text=Create your account")).toBeVisible(); // this prevents flaky test
+ await page.getByTestId("continue-with-saml-button").click();
+ await page.waitForSelector('[data-testid="saml-submit-button"]');
+ });
+
+ test("Submit button should be disabled without username", async ({ page }) => {
+ await page.locator('input[name="email"]').fill("tester123@example.com");
+ const submitButton = page.getByTestId("saml-submit-button");
+ await expect(submitButton).toBeVisible();
+ await expect(submitButton).toBeDisabled();
+ });
+
+ test("Submit button should be disabled without email", async ({ page }) => {
+ await page.locator('input[name="username"]').fill("tester123");
+ const submitButton = page.getByTestId("saml-submit-button");
+ await expect(submitButton).toBeVisible();
+ await expect(submitButton).toBeDisabled();
+ });
+
+ test("Password input should not exist", async ({ page }) => {
+ await expect(page.locator('input[name="password"]')).toBeHidden();
+ });
+
+ test("Checkbox for cookie consent does not need to be checked", async ({ page }) => {
+ // Fill form
+ await page.locator('input[name="username"]').fill("tester123");
+ await page.locator('input[name="email"]').fill("tester123@example.com");
+
+ const submitButton = page.getByTestId("saml-submit-button");
+ const checkbox = page.getByTestId("signup-cookie-content-checkbox");
+
+ await checkbox.check();
+ await expect(submitButton).toBeEnabled();
+
+ // the cookie consent checkbox does not need to be checked for user to proceed
+ await checkbox.uncheck();
+ await expect(submitButton).toBeEnabled();
+ });
+
+ test("Submit button should be disabled with a premium username", async ({ page }) => {
+ // eslint-disable-next-line playwright/no-skipped-test
+ test.skip(!IS_PREMIUM_USERNAME_ENABLED, "Only run on Cal.com");
+
+ // Fill form
+ await page.locator('input[name="username"]').fill("pro");
+ await page.locator('input[name="email"]').fill("pro@example.com");
+
+ // Submit form
+ const submitButton = page.getByTestId("saml-submit-button");
+ await expect(submitButton).toBeDisabled();
+ });
+ });
 });