Extend E2E dashboard tests (#6077)

* Add helper for adding custom goal and use it in a new test

* Extend and add goal helpers to support all goal types

* Add intro tests

* Add js-joda for time manipulation in tests

* Properly test for different time ranges

* Test graph intervals

* Test comparing stats over time

* Split filter tests into a separate context and cover page related ones

* Add hostname filter test

* Add goal filter tests

* Add property filtering tests

* Remove unnecessary assertions for goal setup fixtures

* Add tests for all acquisition related filters

* Add tests for filtering by location

* Shorten test timeout for local dev env from 30s to 10s

* Add (broken) test for screen size filtering

* Add missing type definitions in frontend event fixture

* Test filtering by browser

* Test operating system filters (broken the same way as screen size)

* WIP

* Add remaining time related tests

* Add tests for site switcher

* Add breakdown tests

* Add more breakdown tests

* Move some of the helpers to `test-utils`

* Add behaviour tests along with fixtures for custom props and funnels

* Extend behaviour tests

* Test breakdown layout change (report and modal) for goals in filters

* Add more detailed modal tests

* Add modal tests to breakdowns

* Add modal tests to behaviours

* Test funnels tab dropdown

* Test props dropdown search

* Test current realtime visitors counter in top stats

* Move filter helpers to test-utils for reuse in segments tests

* Add one more filter helper

* Test creating personal segment

* Fix existing tests

* Test adding site segments

* Test combining filters and segments

* Remove commented out, brittle version of `addFunnel` fixture

* Test editing existing segment

* Test saving segment as new

* Test deleting segment

* Test closing edited segment without saving

* Fix type signature ofr MovePeriodArrows

* Fix formatting

* Don't include backend E2E logic in CE

* Increase the number of E2E CI shards from 2 to 4

* Fix problematic test cases

* Move general tests under `dashboard/` and remove redundant cases

* Add test for accessing dashboard via shared link

* Add basic e2e test for imported data with all the necessary tooling

* Make site switcher test less brittle

* Make E2E tests run server using distinct HTTP port

* Add alias for conveniently setting up E2E

* Bump log level to error for `MIX_ENV=e2e_test`

* Update typespec in fixtures

* Extract `currentTime` in top-stats

* Add typechecking

* Fix imports

* Fix TS issues, enforce code format on CI and enforce type-correctness

* Comment out slowMo and headless commands

* Finetune mix

* Revert timeout

* Revert unnecessary config changes

* Fix github actions commands

* Add missing awaits

* Increase timeouts for local dev env to account for patahto hardware

* Rename testid data attribute for better consistency

* Fix formatting

---------

Co-authored-by: Artur Pata <artur.pata@gmail.com>

Author: zoldar

.github/workflows/elixir.yml

@@ -119,7 +119,7 @@ jobs:
     timeout-minutes: 15
     env:
       MIX_ENV: e2e_test
-      BASE_URL: "http://localhost:8000"
+      BASE_URL: "http://localhost:8111"
     services:
       postgres:
         image: "postgres:18"
@@ -146,8 +146,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2]
-        shardTotal: [2]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     steps:
       - uses: actions/checkout@v6
         with:
@@ -209,6 +209,12 @@ jobs:
       - name: Install E2E dependencies
         run: npm --prefix ./e2e ci
 
+      - name: Check format
+        run: npm --prefix ./e2e run check-format
+
+      - name: Check types
+        run: npm --prefix ./e2e run typecheck
+
       - name: Install E2E Playwright Browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: ./e2e

assets/js/dashboard/components/filter-operator-selector.js

@@ -30,7 +30,9 @@ export default function FilterOperatorSelector(props) {
               ref={buttonRef}
               className="relative flex justify-between items-center w-full rounded-md border border-gray-300 dark:border-gray-750 px-4 py-2 bg-white dark:bg-gray-750 text-sm text-gray-700 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 text-left"
             >
-              {FILTER_OPERATIONS_DISPLAY_NAMES[props.selectedType]}
+              <span data-testid="filter-operator">
+                {FILTER_OPERATIONS_DISPLAY_NAMES[props.selectedType]}
+              </span>
               <ChevronDownIcon
                 className="-mr-2 ml-2 h-4 w-4 text-gray-500 dark:text-gray-400"
                 aria-hidden="true"
@@ -63,6 +65,7 @@ export default function FilterOperatorSelector(props) {
                   .filter(([_operation, supported]) => supported)
                   .map(([operation]) => (
                     <button
+                      data-testid="filter-operator-option"
                       key={operation}
                       data-selected={operation === props.selectedType}
                       onClick={(e) => {

assets/js/dashboard/components/search-input.tsx

@@ -71,6 +71,7 @@ export const SearchInput = ({
       />
       <div className={classNames('relative max-w-64 w-full', className)}>
         <input
+          data-testid="search-input"
           onBlur={() => setIsFocused(false)}
           onFocus={() => setIsFocused(true)}
           ref={searchRef}

assets/js/dashboard/components/table.tsx

@@ -37,6 +37,7 @@ export const TableHeaderCell = ({
 }) => {
   return (
     <th
+      data-testid="report-header"
       className={classNames(
         'p-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
         className
@@ -105,6 +106,7 @@ export const ItemRow = <T extends Record<string, string | number | ReactNode>>({
 
   return (
     <tr
+      data-testid="report-row"
       className="group text-sm dark:text-gray-200 md:cursor-default cursor-pointer"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

assets/js/dashboard/components/tabs.tsx

@@ -38,7 +38,9 @@ const TabButtonText = ({
       'text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]': active
     })}
   >
-    {children}
+    <span data-active={active ? 'true' : 'false'} data-testid="tab-button">
+      {children}
+    </span>
   </span>
 )
 
@@ -183,6 +185,7 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
         </div>
       )}
       <div
+        data-testid="dropdown-items"
         className={'max-h-[224px] overflow-y-auto flex flex-col gap-y-0.5 p-1'}
       >
         {showableData.map(({ selected, label, onClick }, index) => {

assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx

@@ -96,7 +96,10 @@ export const DashboardPeriodMenu = ({
     <>
       <BlurMenuButtonOnEscape targetRef={buttonRef} />
       <Popover.Button ref={buttonRef} className={datemenuButtonClassName}>
-        <span className={popover.toggleButton.classNames.truncatedText}>
+        <span
+          data-testid="current-query-period"
+          className={popover.toggleButton.classNames.truncatedText}
+        >
           {getCurrentPeriodDisplayName({ dashboardState, site })}
         </span>
         <DateMenuChevron />

assets/js/dashboard/nav-menu/query-periods/dashboard-period-picker.tsx

@@ -17,7 +17,10 @@ export function DashboardPeriodPicker({ className }: { className?: string }) {
   const compareCalendarButtonRef = useRef<HTMLButtonElement>(null)
 
   return (
-    <div className={classNames('flex shrink-0', className)}>
+    <div
+      data-testid="query-period-picker"
+      className={classNames('flex shrink-0', className)}
+    >
       <MovePeriodArrows className={isComparing ? 'hidden md:flex' : ''} />
       <Popover className="min-w-36 md:relative lg:w-48">
         {({ close }) => (

assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx

@@ -41,14 +41,17 @@ const ArrowKeybind = ({
 }
 
 function ArrowIcon({
+  testId,
   direction,
   disabled = false
 }: {
+  testId?: string
   direction: 'left' | 'right'
   disabled?: boolean
 }) {
   return (
     <svg
+      data-testid={testId}
       className={classNames(
         'feather size-4',
         disabled
@@ -117,7 +120,11 @@ export function MovePeriodArrows({ className }: { className?: string }) {
             : (search) => search
         }
       >
-        <ArrowIcon direction="left" disabled={!canGoBack} />
+        <ArrowIcon
+          testId="period-move-back"
+          direction="left"
+          disabled={!canGoBack}
+        />
       </AppNavigationLink>
       <AppNavigationLink
         className={classNames(sharedClass, 'rounded-r', {
@@ -135,7 +142,11 @@ export function MovePeriodArrows({ className }: { className?: string }) {
             : (search) => search
         }
       >
-        <ArrowIcon direction="right" disabled={!canGoForward} />
+        <ArrowIcon
+          testId="period-move-forward"
+          direction="right"
+          disabled={!canGoForward}
+        />
       </AppNavigationLink>
       {!!dashboardRouteMatch && <ArrowKeybind keyboardKey="ArrowLeft" />}
       {!!dashboardRouteMatch && <ArrowKeybind keyboardKey="ArrowRight" />}

assets/js/dashboard/nav-menu/segments/segment-menu.tsx

@@ -86,6 +86,7 @@ export const SegmentMenu = () => {
               )}
             >
               <ChevronDownIcon
+                data-testid="segment-menu"
                 className="w-4 h-4 md:h-5 md:w-5 block"
                 aria-hidden="true"
               />

assets/js/dashboard/site-switcher.tsx

@@ -183,7 +183,10 @@ export const SiteSwitcher = () => {
                 className="block h-4 w-4 mx-1"
               />
             )}
-            <span className={'truncate hidden sm:block sm:mr-1 lg:mr-0'}>
+            <span
+              data-testid="site-switcher-current-site"
+              className={'truncate hidden sm:block sm:mr-1 lg:mr-0'}
+            >
               {currentSite.isConsolidatedView
                 ? 'All sites'
                 : currentSite.domain}