chore(dashboard): user journey smoke tests

.github/workflows/reusable-dashboard-e2e.yml

@@ -68,6 +68,36 @@ jobs:
         with:
           submodules: true
 
+      - name: Create .env file for the Dashboard app
+        working-directory: apps/dashboard
+        run: |
+          touch .env
+          echo VITE_LAUNCH_DARKLY_CLIENT_SIDE_ID=${{ secrets.LAUNCH_DARKLY_CLIENT_SIDE_ID }} >> .env
+          echo VITE_API_HOSTNAME=http://127.0.0.1:1336 >> .env
+          echo VITE_WEBSOCKET_HOSTNAME=http://127.0.0.1:1340 >> .env
+          echo VITE_LEGACY_DASHBOARD_URL=http://127.0.0.1:4200 >> .env
+          echo VITE_CLERK_PUBLISHABLE_KEY=${{ secrets.CLERK_PUBLISHABLE_KEY }} >> .env
+
+      - name: Create .env file for the Playwright
+        working-directory: apps/dashboard
+        run: |
+          touch .env.playwright
+          echo NOVU_ENTERPRISE=true >> .env.playwright
+          echo NEW_RELIC_ENABLED=false >> .env.playwright
+          echo NEW_RELIC_APP_NAME=Novu >> .env.playwright
+          echo MONGO_URL=mongodb://127.0.0.1:27017/novu-test >> .env.playwright
+          echo API_URL=http://127.0.0.1:1336 >> .env.playwright
+          echo CLERK_ENABLED=true >> .env.playwright
+          echo CLERK_USER_USERNAME=${{ secrets.CLERK_USER_USERNAME }} >> .env.playwright
+          echo CLERK_USER_PASSWORD=${{ secrets.CLERK_USER_PASSWORD }} >> .env.playwright
+          echo CLERK_PUBLISHABLE_KEY=${{ secrets.CLERK_PUBLISHABLE_KEY }} >> .env.playwright
+          echo CLERK_SECRET_KEY=${{ secrets.CLERK_SECRET_KEY }} >> .env.playwright
+          echo CLERK_LONG_LIVED_TOKEN=${{ secrets.CLERK_LONG_LIVED_TOKEN }} >> .env.playwright
+          echo CLERK_PRIVATE_KEY=\"$(echo ${{ secrets.DASHBOARD_E2E_CLERK_PRIVATE_KEY }} | base64 -d)\" >> .env.playwright
+          echo CLERK_PEM_PUBLIC_KEY=\"$(echo ${{ secrets.DASHBOARD_E2E_CLERK_PEM_PUBLIC_KEY }} | base64 -d)\" >> .env.playwright
+          echo CLERK_EXTERNAL_ORG_ID=org_2p9RYIgFs6Z2sSdQDpnuA1mJ4dx >> .env.playwright
+          echo CLERK_EXTERNAL_USER_ID=user_2p7nkg2pyfTjLopPsLMh5ukMRkF >> .env.playwright
+
       - uses: mansagroup/nrwl-nx-action@v3
         with:
           targets: build
@@ -77,30 +107,41 @@ jobs:
       - uses: ./.github/actions/start-localstack
       - uses: ./.github/actions/setup-redis-cluster
 
-      - uses: ./.github/actions/run-backend
-        with:
-          cypress_github_oauth_client_id: ${{ secrets.CYPRESS_GITHUB_OAUTH_CLIENT_ID }}
-          cypress_github_oauth_client_secret: ${{ secrets.CYPRESS_GITHUB_OAUTH_CLIENT_SECRET }}
-          launch_darkly_sdk_key: ${{ secrets.LAUNCH_DARKLY_SDK_KEY }}
-          ci_ee_test: ${{ steps.determine_run_type.outputs.enterprise_run }}
+      - name: Start API in TEST
+        env:
+          LAUNCH_DARKLY_SDK_KEY: ${{ secrets.LAUNCH_DARKLY_SDK_KEY }}
+          CI_EE_TEST: true
+          CLERK_ENABLED: true
+          CLERK_ISSUER_URL: ${{ vars.CLERK_ISSUER_URL }}
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+          CLERK_PRIVATE_KEY_BASE64: ${{ secrets.CLERK_PRIVATE_KEY_BASE64 }}
+          CLERK_PEM_PUBLIC_KEY_BASE64: ${{ secrets.CLERK_PEM_PUBLIC_KEY_BASE64 }}
+          CLERK_WEBHOOK_SECRET: ${{ secrets.CLERK_WEBHOOK_SECRET }}
+          CLERK_LONG_LIVED_TOKEN: ${{ secrets.CLERK_LONG_LIVED_TOKEN }}
+        run: |
+          export CLERK_PEM_PUBLIC_KEY=$(echo $CLERK_PEM_PUBLIC_KEY_BASE64 | base64 -d)
+          export CLERK_PRIVATE_KEY=$(echo $CLERK_PRIVATE_KEY_BASE64 | base64 -d)
+          cd apps/api && pnpm start:test &
+
+      - name: Start Worker
+        shell: bash
+        env:
+          NODE_ENV: 'test'
+          PORT: '1342'
+          LAUNCH_DARKLY_SDK_KEY: ${{ secrets.LAUNCH_DARKLY_SDK_KEY }}
+          CI_EE_TEST: true
+        run: cd apps/worker && pnpm start:prod &
+
+      - name: Wait on API and Worker
+        shell: bash
+        run: wait-on --timeout=180000 http://127.0.0.1:1336/v1/health-check http://127.0.0.1:1342/v1/health-check
 
       - name: Start WS
         run: |
           cd apps/ws && pnpm start:test &
 
-      - name: Start Novu Dashboard
-        working-directory: apps/dashboard
-        env:
-          REACT_APP_API_URL: http://127.0.0.1:1336
-          REACT_APP_WS_URL: http://127.0.0.1:1340
-          REACT_APP_WEBHOOK_URL: http://127.0.0.1:1341
-          # Disable LaunchDarkly client-side SDK in the test environment to reduce E2E flakiness
-          REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID: ''
-          NOVU_ENTERPRISE: ${{ steps.determine_run_type.outputs.enterprise_run }}
-        run: pnpm start:static:build
-
       - name: Wait on Services
-        run: wait-on --timeout=180000 http://127.0.0.1:1340/v1/health-check http://127.0.0.1:8080/
+        run: wait-on --timeout=180000 http://127.0.0.1:1340/v1/health-check
 
       - name: Install Playwright
         working-directory: apps/dashboard

apps/dashboard/.gitignore

@@ -28,4 +28,6 @@ tsconfig.node.tsbuildinfo
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/
+.env.test
+.env.playwright

apps/dashboard/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "vite",
+    "start:test": "vite --mode test",
     "start:static:build": "pm2 start proxy-server.js",
     "stop:static:build": "pm2 stop proxy-server.js",
     "dev": "pnpm start",
@@ -92,9 +93,12 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@clerk/testing": "^1.3.27",
     "@clerk/types": "^4.30.0",
     "@eslint/js": "^9.9.0",
     "@hookform/devtools": "^4.3.0",
+    "@novu/dal": "workspace:*",
+    "@novu/testing": "workspace:*",
     "@playwright/test": "^1.44.0",
     "@sentry/vite-plugin": "^2.22.6",
     "@tiptap/core": "^2.10.3",
@@ -106,6 +110,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
+    "dotenv": "^16.4.5",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

apps/dashboard/playwright.config.ts

@@ -4,9 +4,16 @@ import { defineConfig, devices } from '@playwright/test';
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const fileName = fileURLToPath(import.meta.url);
+const dirName = dirname(fileName);
+dotenv.config({ path: path.resolve(dirName, '.env.playwright') });
+
+const baseURL = `http://localhost:4201`;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -24,9 +31,15 @@ export default defineConfig({
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI ? 'blob' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  webServer: {
+    command: 'pnpm start:test',
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:8080',
+    baseURL: baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -38,9 +51,22 @@ export default defineConfig({
   },
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'setup',
+      testMatch: /global\.setup\.ts/,
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'playwright/.clerk/user.json',
+        viewport: { width: 1512, height: 982 },
+        video: {
+          mode: 'on-first-retry',
+          size: { width: 1512, height: 982 },
+        },
+      },
+      dependencies: ['setup'],
     },
   ],
 });

apps/dashboard/src/components/primitives/tag-input.tsx

@@ -78,8 +78,10 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
           <div className="flex flex-wrap gap-2">
             {tags.map((tag, index) => (
               <Badge key={index} variant="outline" kind="tag" className="gap-1">
-                <span style={{ wordBreak: 'break-all' }}>{tag}</span>
-                <button type="button" onClick={() => removeTag(tag)}>
+                <span style={{ wordBreak: 'break-all' }} data-testid="tags-badge-value">
+                  {tag}
+                </span>
+                <button type="button" onClick={() => removeTag(tag)} data-testid={`tags-badge-remove-${tag}`}>
                   <RiCloseFill className="-mr-0.5 size-3" />
                   <span className="sr-only">Remove tag</span>
                 </button>

apps/dashboard/src/components/workflow-editor/add-step-menu.tsx

@@ -50,6 +50,7 @@ const MenuItem = ({
           'text-foreground-300 cursor-not-allowed': disabled,
         }
       )}
+      data-testid={`add-step-menu-item-${stepType}`}
     >
       <Icon
         className={`bg-neutral-alpha-50 h-6 w-6 rounded-md p-1 opacity-40`}
@@ -90,7 +91,7 @@ export const AddStepMenu = ({
       }}
     >
       <PopoverTrigger asChild>
-        <span>
+        <span data-testid="add-step-menu-button">
           <Node
             variant="sm"
             className={cn('opacity-0 transition duration-300 ease-out hover:opacity-100', {

apps/dashboard/src/components/workflow-editor/in-app-preview.tsx

@@ -99,7 +99,13 @@ export const InAppPreviewSubject = (props: InAppPreviewSubjectProps) => {
     return <Skeleton className="h-5 w-1/2" />;
   }
 
-  return <Markdown className={cn('text-foreground-600 truncate text-xs font-medium', className)} {...rest} />;
+  return (
+    <Markdown
+      className={cn('text-foreground-600 truncate text-xs font-medium', className)}
+      {...rest}
+      data-testid="in-app-preview-subject"
+    />
+  );
 };
 
 type InAppPreviewBodyProps = MarkdownProps & { isPending?: boolean };
@@ -115,7 +121,13 @@ export const InAppPreviewBody = (props: InAppPreviewBodyProps) => {
     );
   }
 
-  return <Markdown className={cn('text-foreground-400 text-xs font-normal', className)} {...rest} />;
+  return (
+    <Markdown
+      className={cn('text-foreground-400 text-xs font-normal', className)}
+      {...rest}
+      data-testid="in-app-preview-body"
+    />
+  );
 };
 
 type InAppPreviewActionsProps = HTMLAttributes<HTMLDivElement>;

apps/dashboard/src/components/workflow-editor/nodes.tsx

@@ -108,7 +108,10 @@ export const InAppNode = (props: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.IN_APP];
 
   return (
-    <Link to={buildRoute(ROUTES.EDIT_STEP, { stepSlug: data.stepSlug ?? '' })}>
+    <Link
+      to={buildRoute(ROUTES.EDIT_STEP, { stepSlug: data.stepSlug ?? '' })}
+      data-testid={`${StepTypeEnum.IN_APP}-node`}
+    >
       <StepNode data={data}>
         <NodeHeader type={StepTypeEnum.IN_APP}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.IN_APP]}>

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx

@@ -79,7 +79,7 @@ export const InAppAction = () => {
             <DropdownMenuTrigger className="absolute size-full" />
           </div>
           <DropdownMenuTrigger asChild>
-            <Button size={'icon'} variant={'ghost'}>
+            <Button size={'icon'} variant={'ghost'} data-testid="in-app-action-dropdown-trigger">
               <RiExpandUpDownLine className="size-4" />
             </Button>
           </DropdownMenuTrigger>

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx

@@ -4,7 +4,8 @@ import { Notification5Fill } from '@/components/icons';
 import { Separator } from '@/components/primitives/separator';
 import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
 import { InAppTabsSection } from '@/components/workflow-editor/steps/in-app/in-app-tabs-section';
-import { FormMessage } from '../../../primitives/form/form';
+import { FormMessagePure } from '../../../primitives/form/form';
+import { useFormContext } from 'react-hook-form';
 
 const avatarKey = 'avatar';
 const subjectKey = 'subject';
@@ -14,6 +15,9 @@ const primaryActionKey = 'primaryAction';
 const secondaryActionKey = 'secondaryAction';
 
 export const InAppEditor = ({ uiSchema }: { uiSchema?: UiSchema }) => {
+  const { getFieldState } = useFormContext();
+  const bodyError = getFieldState(bodyKey).error;
+
   if (!uiSchema || uiSchema?.group !== UiSchemaGroupEnum.IN_APP) {
     return null;
   }
@@ -44,7 +48,9 @@ export const InAppEditor = ({ uiSchema }: { uiSchema?: UiSchema }) => {
           {body && (
             <>
               {getComponentByType({ component: body.component })}
-              <FormMessage>{`Type {{ for variables, or wrap text in ** for bold.`}</FormMessage>
+              <FormMessagePure
+                error={bodyError ? String(bodyError.message) : undefined}
+              >{`Type {{ for variables, or wrap text in ** for bold.`}</FormMessagePure>
             </>
           )}
           {(primaryAction || secondaryAction) &&

apps/dashboard/src/components/workflow-row.tsx

@@ -229,7 +229,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
          */}
         <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
+            <Button variant="ghost" className="h-8 w-8 p-0" data-testid="workflow-actions-menu">
               <RiMore2Fill className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -256,7 +256,11 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup className="*:cursor-pointer">
-              <DropdownMenuItem onClick={handlePauseWorkflow} disabled={workflow.status === WorkflowStatusEnum.ERROR}>
+              <DropdownMenuItem
+                onClick={handlePauseWorkflow}
+                disabled={workflow.status === WorkflowStatusEnum.ERROR}
+                data-testid={workflow.status === WorkflowStatusEnum.ACTIVE ? 'pause-workflow' : 'enable-workflow'}
+              >
                 {workflow.status === WorkflowStatusEnum.ACTIVE ? (
                   <>
                     <RiPauseCircleLine />
@@ -275,6 +279,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
                 onClick={() => {
                   setIsDeleteModalOpen(true);
                 }}
+                data-testid="delete-workflow"
               >
                 <RiDeleteBin2Line />
                 Delete workflow

apps/dashboard/src/utils/auth.ts

@@ -1,3 +1,5 @@
+import { MODE } from '@/config';
+
 // eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Clerk {
   export const session: {
@@ -6,5 +8,9 @@ declare namespace Clerk {
 }
 
 export async function getToken(): Promise<string> {
+  if (MODE === 'test') {
+    return localStorage.getItem('nv_auth_token') ?? '';
+  }
+
   return (await Clerk.session?.getToken()) || '';
 }