Extend E2E dashboard tests

.github/workflows/elixir.yml

@@ -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:

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="segmentmenu"
                 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}

assets/js/dashboard/stats/behaviours/index.js

@@ -449,7 +449,7 @@ function Behaviours({ importedDataInView, setMode, mode }) {
   }
 
   return (
-    <ReportLayout className="col-span-full">
+    <ReportLayout testId="report-behaviours" className="col-span-full">
       <ReportHeader>
         <div className="flex gap-x-2">
           <TabWrapper>

assets/js/dashboard/stats/devices/index.js

@@ -249,7 +249,7 @@ function OperatingSystemVersions({ afterFetchData }) {
       renderIcon={renderIcon}
       afterFetchData={afterFetchData}
       getFilterInfo={getFilterInfo}
-      keyLabel="Operating System Version"
+      keyLabel="Operating system version"
       metrics={chooseMetrics()}
     />
   )
@@ -503,7 +503,7 @@ export default function Devices() {
   }
 
   return (
-    <ReportLayout className="overflow-x-hidden">
+    <ReportLayout testId="report-devices" className="overflow-x-hidden">
       <ReportHeader>
         <div className="flex gap-x-3">
           <TabWrapper>

assets/js/dashboard/stats/graph/interval-picker.tsx

@@ -154,7 +154,9 @@ export function IntervalPicker({
                 'rounded-sm text-sm flex items-center'
               )}
             >
-              {INTERVAL_LABELS[currentInterval]}
+              <span data-testid="current-graph-interval">
+                {INTERVAL_LABELS[currentInterval]}
+              </span>
               <ChevronDownIcon className="ml-1 h-4 w-4" aria-hidden="true" />
             </Popover.Button>
 
@@ -187,7 +189,9 @@ export function IntervalPicker({
                       'w-full text-left'
                     )}
                   >
-                    {INTERVAL_LABELS[option]}
+                    <span data-testid="graph-interval">
+                      {INTERVAL_LABELS[option]}
+                    </span>
                   </button>
                 ))}
               </Popover.Panel>

assets/js/dashboard/stats/graph/top-stats.js

@@ -201,7 +201,10 @@ export default function TopStats({
 
           {isComparison ? (
             <div>
-              <p className="font-bold text-xl text-gray-500 dark:text-gray-400">
+              <p
+                id={`previous-${stat.graph_metric}`}
+                className="font-bold text-xl text-gray-500 dark:text-gray-400"
+              >
                 {topStatNumberShort(stat.graph_metric, stat.comparison_value)}
               </p>
               <p className="text-xs text-gray-500 dark:text-gray-400">

assets/js/dashboard/stats/locations/index.js

@@ -270,6 +270,7 @@ class Locations extends React.Component {
   render() {
     return (
       <ReportLayout
+        testId="report-locations"
         className={this.state.mode === 'map' ? '' : 'overflow-x-hidden'}
       >
         <ReportHeader>

assets/js/dashboard/stats/modals/filter-modal-group.js

@@ -46,6 +46,7 @@ export default function FilterModalGroup({
         {rows.map(({ id, filter }) =>
           filterGroup === 'props' ? (
             <FilterModalPropsRow
+              testId={id}
               key={id}
               filter={filter}
               showDelete={rows.length > 1}
@@ -55,6 +56,7 @@ export default function FilterModalGroup({
             />
           ) : (
             <FilterModalRow
+              testId={id}
               key={id}
               filter={filter}
               labels={labels}

assets/js/dashboard/stats/modals/filter-modal-props-row.js

@@ -16,6 +16,7 @@ import { useDashboardStateContext } from '../../dashboard-state-context'
 import { useSiteContext } from '../../site-context'
 
 export default function FilterModalPropsRow({
+  testId,
   filter,
   showDelete,
   disabledOptions,
@@ -75,7 +76,10 @@ export default function FilterModalPropsRow({
   }
 
   return (
-    <div className="grid grid-cols-12 mt-6">
+    <div
+      data-testid={`filter-row-${testId}`}
+      className="grid grid-cols-12 mt-6"
+    >
       <div className="col-span-4">
         <Combobox
           className="mr-2"

assets/js/dashboard/stats/modals/filter-modal-row.js

@@ -17,6 +17,7 @@ import { useDashboardStateContext } from '../../dashboard-state-context'
 import { useSiteContext } from '../../site-context'
 
 export default function FilterModalRow({
+  testId,
   filter,
   labels,
   canDelete,
@@ -72,6 +73,7 @@ export default function FilterModalRow({
 
   return (
     <div
+      data-testid={`filter-row-${testId}`}
       className={classNames('grid mt-1', {
         'grid-cols-12': canDelete,
         'grid-cols-11': !canDelete

assets/js/dashboard/stats/modals/referrer-drilldown.js

@@ -25,7 +25,7 @@ function ReferrerDrilldownModal() {
     BUILD_EXTRA && revenueAvailable(dashboardState, site)
 
   const reportInfo = {
-    title: 'Referrer Drilldown',
+    title: 'Referrer drilldown',
     dimension: 'referrer',
     endpoint: url.apiPath(
       site,

assets/js/dashboard/stats/more-link.js

@@ -47,7 +47,11 @@ export default function MoreLink({ linkProps, state }) {
 
   return (
     <Tooltip info="View details" containerRef={portalRef}>
-      <AppNavigationLink {...linkProps} className={baseClassName}>
+      <AppNavigationLink
+        {...linkProps}
+        aria-label="View details"
+        className={baseClassName}
+      >
         {icon}
       </AppNavigationLink>
     </Tooltip>

assets/js/dashboard/stats/pages/index.js

@@ -213,7 +213,7 @@ export default function Pages() {
   }
 
   return (
-    <ReportLayout className="overflow-x-hidden">
+    <ReportLayout testId="report-pages" className="overflow-x-hidden">
       <ReportHeader>
         <div className="flex gap-x-3">
           <TabWrapper>

assets/js/dashboard/stats/reports/list.tsx

@@ -249,6 +249,7 @@ export default function ListReport<
       .map((metric) => {
         return (
           <div
+            data-testid="report-header"
             key={metric.key}
             className={`${metric.key} text-right ${hiddenOnMobileClass(metric)}`}
             style={{ minWidth: colMinWidth }}
@@ -260,7 +261,9 @@ export default function ListReport<
 
     return (
       <div className="pt-3 w-full text-xs font-medium text-gray-500 flex items-center dark:text-gray-400">
-        <span className="grow truncate">{keyLabel}</span>
+        <span data-testid="report-header" className="grow truncate">
+          {keyLabel}
+        </span>
         {metricLabels}
       </div>
     )
@@ -280,6 +283,7 @@ export default function ListReport<
     return (
       <div key={listItem.name} style={{ minHeight: ROW_HEIGHT }}>
         <div
+          data-testid="report-row"
           className="group/row flex w-full items-center hover:bg-gray-100/60 dark:hover:bg-gray-850 rounded-sm md:cursor-default cursor-pointer"
           style={{ marginTop: ROW_GAP_HEIGHT }}
           onClick={handleRowClick}

assets/js/dashboard/stats/reports/report-layout.js

@@ -1,9 +1,14 @@
 import React from 'react'
 import classNames from 'classnames'
 
-export function ReportLayout({ children, className = undefined }) {
+export function ReportLayout({
+  children,
+  testId = undefined,
+  className = undefined
+}) {
   return (
     <div
+      data-testid={testId}
       className={classNames(
         'relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem',
         className

assets/js/dashboard/stats/sources/referrer-list.js

@@ -82,7 +82,7 @@ export default function Referrers({ source }) {
   }
 
   return (
-    <ReportLayout className="overflow-x-hidden">
+    <ReportLayout testId="report-referrers" className="overflow-x-hidden">
       <ReportHeader>
         <div className="flex gap-x-3">
           <TabWrapper>

assets/js/dashboard/stats/sources/source-list.js

@@ -271,7 +271,7 @@ export default function SourceList() {
   }
 
   return (
-    <ReportLayout className="overflow-x-hidden">
+    <ReportLayout testId="report-sources" className="overflow-x-hidden">
       <ReportHeader>
         <div className="flex gap-x-3">
           <TabWrapper>