Eng 184: Create test for web-sdk settings

.github/workflows/playwright.yml

@@ -32,6 +32,12 @@ jobs:
 
       - name: Build dashboard
         run: yarn build:dashboard
+        env:
+          VITE_GOOGLE_CLIENT_ID: ${{ secrets.VITE_GOOGLE_CLIENT_ID }}
+          VITE_SERVER_BASE_URL: ${{ secrets.VITE_SERVER_BASE_URL }}
+          VITE_LINK_SURVEY_HOST: ${{ secrets.VITE_LINK_SURVEY_HOST }}
+          VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.VITE_PUBLIC_POSTHOG_KEY }}
+          VITE_PUBLIC_POSTHOG_HOST: ${{ secrets.VITE_PUBLIC_POSTHOG_HOST }}
 
       - name: Start Backend Server
         run: docker compose -f ./docker-compose-test.yml up -d

apps/frontend/.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/playwright/.auth/

apps/frontend/package.json

@@ -60,6 +60,7 @@
         "zustand": "^4.4.5"
     },
     "devDependencies": {
+        "@faker-js/faker": "^9.0.1",
         "@graphql-codegen/cli": "^3.3.1",
         "@graphql-codegen/client-preset": "^4.1.0",
         "@graphql-codegen/typescript": "^3.0.4",

apps/frontend/playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { ONBOARDED_USER_FILE } from "./tests/utils/constants";
 
 /**
  * Read environment variables from file.
@@ -12,14 +13,14 @@ import { defineConfig, devices } from "@playwright/test";
  */
 export default defineConfig({
     testDir: "./tests",
+    timeout: 90000,
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
-    /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
+    retries: 3,
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
+    workers: process.env.CI ? undefined : "80%",
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: "html",
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -33,19 +34,24 @@ export default defineConfig({
 
     /* Configure projects for major browsers */
     projects: [
+        { name: "setup", testMatch: /.*\.setup\.ts/ },
+
         {
             name: "chromium",
-            use: { ...devices["Desktop Chrome"] },
+            use: { ...devices["Desktop Chrome"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         {
             name: "firefox",
-            use: { ...devices["Desktop Firefox"] },
+            use: { ...devices["Desktop Firefox"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         {
             name: "webkit",
-            use: { ...devices["Desktop Safari"] },
+            use: { ...devices["Desktop Safari"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         /* Test against mobile viewports. */

apps/frontend/src/layout/AuthLayout.tsx

@@ -6,7 +6,7 @@ import Profile2 from "../assets/images/loginScreen/profile-2.png";
 import Profile3 from "../assets/images/loginScreen/profile-3.png";
 import Logo from "../assets/images/logo.png";
 
-const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID ?? "";
 
 export function AuthLayout() {
     return (

apps/frontend/src/layout/partials/Navbar.tsx

@@ -165,6 +165,7 @@ export const Navbar = () => {
                     </div>
                     <div className="space-y-[27px] pb-[24px]">
                         <button
+                            data-testid="create-survey"
                             onClick={() =>
                                 navigate(
                                     `${ROUTES.SURVEY_LIST}/?create=2`
@@ -247,6 +248,7 @@ export const Navbar = () => {
                             onClick={() => {
                                 setOpenOrganizationInviteModal(true);
                             }}
+                            data-testid="invite-team-btn"
                         >
                             <span>
                                 <CirclePlusIcon />

apps/frontend/src/layout/partials/UserProfile.tsx

@@ -38,7 +38,10 @@ export const UserProfile = () => {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className="flex w-full items-center text-intg-text outline-none">
+            <DropdownMenuTrigger
+                data-testid="profile-btn"
+                className="flex w-full items-center text-intg-text outline-none"
+            >
                 <div className="flex items-center gap-2">
                     <img src={Frame} alt="picture frame" className="h-[31px] w-[31px] rounded object-contain" />
                     <span className="text-sm">Profile</span>
@@ -134,6 +137,7 @@ export const UserProfile = () => {
                     </DropdownMenuSubContent>
                 </DropdownMenuSub>
                 <DropdownMenuItem
+                    data-testid="workspace-settings-btn"
                     className="flex items-center gap-2 px-3 py-2"
                     onClick={() =>
                         navigate(
@@ -164,7 +168,11 @@ export const UserProfile = () => {
                     );
                 })}
                 <DropdownMenuSeparator className="my-3 border-[.5px] border-intg-bg-4" />
-                <DropdownMenuItem className="flex cursor-pointer items-center gap-2 px-3 py-2" onClick={logout}>
+                <DropdownMenuItem
+                    data-testid="logout"
+                    className="flex cursor-pointer items-center gap-2 px-3 py-2"
+                    onClick={logout}
+                >
                     <LogoutIcon />
                     <p className="text-sm text-intg-error-text">Log out</p>
                 </DropdownMenuItem>

apps/frontend/src/modules/surveys/components/SurveyHome/components/SurveyList.tsx

@@ -100,6 +100,7 @@ export const SurveyList = () => {
                             return (
                                 <TableRow
                                     key={survey.id}
+                                    data-testid={survey.name ?? survey.id}
                                     className="border-intg-bg-4 text-center font-light transition-all duration-300 ease-in hover:bg-intg-bg-8"
                                 >
                                     <TableCell
@@ -152,7 +153,7 @@ export const SurveyList = () => {
                                     </TableCell>
                                     <TableCell className="text-center">
                                         <Popover.Root>
-                                            <Popover.Trigger asChild>
+                                            <Popover.Trigger asChild data-testid="survey-dropdown-menu">
                                                 <button className="w-fit rounded-md px-1 py-1 transition-all duration-300 ease-in hover:cursor-pointer hover:bg-intg-bg-1 data-[state=a]:bg-intg-bg-1">
                                                     <MoreHorizontal color="#AFAAC7" />
                                                 </button>
@@ -252,6 +253,7 @@ export const SurveyList = () => {
                                                                         getSurveyNameOnSelect(survey?.id ?? "", event)
                                                                     }
                                                                     className="flex gap-[6px] rounded-md py-[7px] text-sm font-normal text-intg-text-4 transition-all duration-300 ease-in hover:cursor-pointer hover:bg-intg-bg-1 hover:pl-[8px]"
+                                                                    data-testid="delete-survey"
                                                                 >
                                                                     <Trash2 size="18" color="#AFAAC7" />
                                                                     Delete
@@ -265,6 +267,7 @@ export const SurveyList = () => {
                                                                 className="w-[500px]"
                                                             >
                                                                 <button
+                                                                    data-testid="confirm-delete-survey"
                                                                     disabled={loading}
                                                                     onClick={(e) =>
                                                                         handleSurveyDelete(e, survey as Survey)

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/components/EditorTextInput.tsx

@@ -22,6 +22,7 @@ export interface EditorTextProps {
     defaultValue?: string;
     showMention?: boolean;
     value?: string;
+    dataTestid?: string;
 }
 
 export const EditorTextInput = ({
@@ -35,6 +36,7 @@ export const EditorTextInput = ({
     placeholder,
     showMention = false,
     value,
+    dataTestid,
 }: EditorTextProps) => {
     const [displayFallbackField, setDisplayFallbackField] = useState(false);
     const [fallbackValue, setFallbackValue] = useState("");
@@ -269,6 +271,7 @@ export const EditorTextInput = ({
                     value={value}
                     defaultValue={defaultValue}
                     placeholder={placeholder}
+                    data-testid={dataTestid}
                     className="rounded-lg border border-transparent bg-[#272138] text-sm text-intg-text-1 placeholder:text-intg-text-3 focus:border-intg-text-3 focus:outline-none"
                     disabled={maxCharacterCount === stripHtmlTags(defaultValue ?? "")?.length}
                     readOnly={survey?.status === SurveyStatusEnum.Active}

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/LogicTab.tsx

@@ -165,6 +165,7 @@ export const LogicTab = ({ questionIndex }: Props) => {
 
                     setIsCreatingLogic(true);
                 }}
+                data-testid="add-new-logic"
             >
                 <p className="text-xs underline">Add new Logic</p>
             </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/QuestionPanel.tsx

@@ -64,11 +64,12 @@ export const QuestionPanel = ({ questionIndex }: Props) => {
                 </Tabs.List>
 
                 <div className="flex items-center gap-3">
-                    {survey?.status !== SurveyStatusEnum.Active ? (
-                        <Trash2 onClick={() => deleteQuestion(question)} className="cursor-pointer" size={20} />
-                    ) : null}
-
-                    <button onClick={clear}>
+                    <button data-testid="delete-question">
+                        {survey?.status !== SurveyStatusEnum.Active ? (
+                            <Trash2 onClick={() => deleteQuestion(question)} className="cursor-pointer" size={20} />
+                        ) : null}
+                    </button>
+                    <button onClick={clear} name="close-question">
                         <XIcon className="cursor-pointer" />
                     </button>
                 </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/Buttons/TextButton.tsx

@@ -5,9 +5,10 @@ type Props = {
     onclick?: () => void;
     classname?: string;
     size?: "sm" | "md";
+    dataTestid?: string;
 };
 
-const TextButton = ({ text, onclick, classname, size = "sm" }: Props) => {
+const TextButton = ({ text, onclick, classname, size = "sm", dataTestid }: Props) => {
     return (
         <div
             onClick={onclick && onclick}
@@ -16,6 +17,7 @@ const TextButton = ({ text, onclick, classname, size = "sm" }: Props) => {
                     size === "md" ? "text-sm" : "text-xs"
                 } w-fit cursor-pointer text-intg-text underline transition-colors delay-75 duration-500 ease-in hover:text-white `,
             )}
+            data-testid={dataTestid}
         >
             {text}
         </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/CTAFields.tsx

@@ -84,6 +84,7 @@ export const CTAFields = () => {
                     classname={`${showDescription ? "hidden" : "block"} mt-2`}
                     text="Add description"
                     onclick={() => setShowDescription(true)}
+                    dataTestid="add-description-btn"
                 />
             ) : null}
         </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/FormFieldList.tsx

@@ -49,6 +49,7 @@ export const FormFieldList = () => {
                                             options: newOptions,
                                         });
                                     }}
+                                    dataTestid="form-type-indicator"
                                 />
 
                                 <EditorTextInput
@@ -66,6 +67,7 @@ export const FormFieldList = () => {
                                             true,
                                         );
                                     }}
+                                    dataTestid="form-label"
                                 />
                             </div>
 
@@ -99,6 +101,7 @@ export const FormFieldList = () => {
             {survey?.status !== SurveyStatusEnum.Active ? (
                 <TextButton
                     text={"Add next field"}
+                    dataTestid="add-next-field-btn"
                     onclick={() => {
                         const highestOrderNumber = getHighestOrderNumber(question?.options);
                         const newOptions = [...question.options];

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/RatingFields.tsx

@@ -54,6 +54,7 @@ export const RatingFields = () => {
                 <div className="flex gap-2">
                     <div className="flex-1">
                         <ReactSelect
+                            dataTestid="scale-style-indicator"
                             label="Scale Style"
                             options={scaleStyleOptions}
                             defaultValue={scaleStyleOptions.find((option) => option.value === question?.type)}

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/DefaultLogicBox.tsx

@@ -132,6 +132,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                         value={conditionOptions((question as ParsedQuestion).type!)?.find(
                             (option: Option) => option.value === (logicValues.condition as string),
                         )}
+                        dataTestid="condition-indicator"
                     />
                 </div>
             </div>
@@ -174,6 +175,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                                 onOperatorChange={() => {
                                     handleOperatorChange();
                                 }}
+                                dataTestid="value-indicator"
                                 comboBox={true}
                                 options={logicValuesOptions(question!)}
                                 onchange={handleValuesSelection}
@@ -204,6 +206,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                         <ReactSelect
                             options={destinationOptions(parsedQuestions, question!)}
                             onchange={handleDestinationSelection}
+                            dataTestid="destination-indicator"
                         />
                     </div>
                 </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/Form/DefaultFormLogic.tsx

@@ -1,6 +1,6 @@
 import { useQuestion } from "@/modules/surveys/hooks/useQuestion";
 import { useSurvey } from "@/modules/surveys/hooks/useSurvey";
-import { QuestionLogic, LogicOperator } from "@/types";
+import { LogicOperator, QuestionLogic } from "@/types";
 import { cn, generateUniqueId } from "@/utils";
 import { destinationOptions } from "@/utils/question";
 import { PlusIcon } from "lucide-react";
@@ -131,6 +131,7 @@ const FormLogicDefault = ({ setFormLogicValues, formLogicValues, setIsCreatingLo
                             onchange={(value: SingleValue<Option> | MultiValue<Option>) => {
                                 handleUpdateCondition(value);
                             }}
+                            dataTestid="destination-indicator"
                         />
                     </div>
                 </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/Form/DefaultLogicGroup.tsx

@@ -82,6 +82,7 @@ export const LogicGroup = ({ group, formLogicValues, setFormLogicValues, setIsCr
                                     group.fields.includes(option.value),
                                 ) ?? []
                             }
+                            dataTestid="value-indicator"
                         />
                     </div>
                 </div>
@@ -95,6 +96,7 @@ export const LogicGroup = ({ group, formLogicValues, setFormLogicValues, setIsCr
                                 onchange={(value) => {
                                     handleUpdateCondition(value);
                                 }}
+                                dataTestid="condition-indicator"
                             />
                         </div>
                     </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/Form/FormLogic.tsx

@@ -94,6 +94,7 @@ export const FormLogicBox = ({ logic, logicIndex }: Props) => {
                         onchange={(value) => {
                             handleUpdateDestination(value);
                         }}
+                        dataTestid="destination-indicator"
                     />
                 </div>
             </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/Form/LogicGroup.tsx

@@ -209,6 +209,7 @@ export const LogicGroup = ({ groups, setEditValues, editValues, logicIndex }: Pr
                                             onchange={(values: SingleValue<Option> | MultiValue<Option>) => {
                                                 handleUpdateFields(values, group, index);
                                             }}
+                                            dataTestid="value-indicator"
                                         />
                                     </div>
                                 </div>
@@ -230,6 +231,7 @@ export const LogicGroup = ({ groups, setEditValues, editValues, logicIndex }: Pr
                                                 onchange={(value: SingleValue<Option> | MultiValue<Option>) => {
                                                     handleUpdateCondition(value, group, index);
                                                 }}
+                                                dataTestid="condition-indicator"
                                             />
                                         </div>
                                     </div>

apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/MinMaxSelector.tsx

@@ -46,11 +46,23 @@ const MinMaxSelector = ({ options, maxChange, minChange, minValue, maxValue, max
         <div className="flex gap-4">
             <div className="flex-1">
                 <p className="text-sm">Min</p>
-                <ReactSelect onchange={handleMinChange} options={options} value={min} defaultValue={minDefault} />
+                <ReactSelect
+                    onchange={handleMinChange}
+                    dataTestid={"min-indicator"}
+                    options={options}
+                    value={min}
+                    defaultValue={minDefault}
+                />
             </div>
             <div className="flex-1">
                 <p className="text-sm">Max</p>
-                <ReactSelect onchange={handleMaxChange} options={options} value={max} defaultValue={maxDefault} />
+                <ReactSelect
+                    onchange={handleMaxChange}
+                    dataTestid="max-indicator"
+                    options={options}
+                    value={max}
+                    defaultValue={maxDefault}
+                />
             </div>
         </div>
     );