Add test for dashboard loader

app/analytics/query.ts

@@ -203,6 +203,7 @@
     }
 
     async getCounts(siteId: string, sinceDays: number): Promise<AnalyticsCountResult> {
+
         // defaults to 1 day if not specified
         const interval = sinceDays || 1;
         const siteIdColumn = ColumnMappings['siteId'];
@@ -216,7 +217,6 @@
             AND ${siteIdColumn} = '${siteId}'
             GROUP BY isVisitor, isVisit
             ORDER BY isVisitor, isVisit ASC`;
-
         const returnPromise = new Promise<AnalyticsCountResult>((resolve, reject) => (async () => {
             const response = await this.query(query);
 
@@ -235,15 +235,14 @@
             // NOTE: note it's possible to get no results, or half results (i.e. a row where isVisit=1 but
             //       no row where isVisit=0), so this code makes no assumption on number of results
             responseData.data.forEach((row) => {
-                if (row.isVisit === 1) {
+                if (row.isVisit == 1) {
                     counts.visits += Number(row.count);
                 }
-                if (row.isVisitor === 1) {
+                if (row.isVisitor == 1) {
                     counts.visitors += Number(row.count);
                 }
                 counts.views += Number(row.count);
             });
-
             resolve(counts);
         })());
 
@@ -325,6 +324,7 @@
 
             if (!response.ok) {
                 reject(response.statusText);
+                return;
             }
 
             const responseData = await response.json() as AnalyticsQueryResult;

app/routes/dashboard.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { json } from "@remix-run/node";
-import { test, describe, beforeAll, expect } from "vitest";
+import { vi, test, describe, beforeAll, expect } from "vitest";
 import 'vitest-dom/extend-expect';
 
 import { createRemixStub } from "@remix-run/testing";
@@ -10,14 +10,143 @@ import {
     waitFor
 } from "@testing-library/react";
 
-import Dashboard from "./dashboard";
+import Dashboard, { loader } from "./dashboard";
+
+global.fetch = vi.fn();
+function createFetchResponse(data: any) {
+    return {
+        ok: true,
+        json: () => new Promise((resolve) => resolve(data))
+    }
+}
 
 describe("Dashboard route", () => {
+    const fetch = global.fetch as any;
+
     beforeAll(() => {
         // polyfill needed for recharts (used by TimeSeriesChart)
         global.ResizeObserver = require('resize-observer-polyfill')
     });
 
+    describe("loader", () => {
+        test("assembles data returned from CF API", async () => {
+            // response for getSitesByOrderedHits
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { siteId: 'test-siteid', count: 1 }
+                    ]
+                }))
+            }));
+
+            // response for get counts
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { isVisit: 1, isVisitor: 1, count: 1 },
+                        { isVisit: 1, isVisitor: 0, count: 2 },
+                        { isVisit: 0, isVisitor: 0, count: 3 }
+                    ]
+                }))
+            }));
+
+            // response for getCountByPath
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { blob3: "/", count: 1 }
+                    ]
+                }))
+            }));
+
+            // response for getCountByCountry
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { blob4: "US", count: 1 }
+                    ]
+                }))
+            }));
+
+            // response for getCountByReferrer
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { blob5: "google.com", count: 1 }
+                    ]
+                }))
+            }));
+
+            // response for getCountByBrowser
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { blob6: "Chrome", count: 2 }
+                    ]
+                }))
+            }));
+
+            // response for getCountByDevice
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { blob7: "Desktop", count: 3 }
+                    ]
+                }))
+            }));
+
+            // response for getViewsGroupedByInterval
+            fetch.mockResolvedValueOnce(new Promise(resolve => {
+                resolve(createFetchResponse({
+                    data: [
+                        { bucket: "2024-01-11 00:00:00", count: 4 }
+                    ]
+                }))
+            }));
+
+
+            const response = await loader({
+                context: {
+                    env: {
+                        CF_BEARER_TOKEN: 'fake',
+                        CF_ACCOUNT_ID: 'fake',
+                    }
+                },
+                // @ts-expect-error we don't need to provide all the properties of the request object
+                request: {
+                    url: 'http://localhost:3000/dashboard'
+                }
+            });
+
+            const json = await response.json();
+
+            expect(json).toEqual({
+                siteId: 'test-siteid',
+                sites: ['test-siteid'],
+                views: 6,
+                visits: 3,
+                visitors: 1,
+                countByPath: [['/', 1]],
+                countByCountry: [['US', 1]],
+                countByReferrer: [['google.com', 1]],
+                countByBrowser: [['Chrome', 2]],
+                countByDevice: [['Desktop', 3]],
+                viewsGroupedByInterval: [
+                    ['2024-01-11 00:00:00', 4],
+                    ['2024-01-26 00:00:00', 0],
+                    ['2024-01-27 00:00:00', 0],
+                    ['2024-01-28 00:00:00', 0],
+                    ['2024-01-29 00:00:00', 0],
+                    ['2024-01-30 00:00:00', 0],
+                    ['2024-01-31 00:00:00', 0],
+                    ['2024-02-01 00:00:00', 0],
+                    ['2024-02-02 00:00:00', 0]
+                ],
+                intervalType: 'DAY'
+            });
+        });
+    });
+
     test("renders when no data", async () => {
 
         function loader() {