diff --git a/app/routes/dashboard.test.tsx b/app/routes/dashboard.test.tsx
index eab9df61..904034c2 100644
--- a/app/routes/dashboard.test.tsx
+++ b/app/routes/dashboard.test.tsx
@@ -1,11 +1,13 @@
// @vitest-environment jsdom
import { json } from "@remix-run/node";
-import { test, describe, beforeAll } from "vitest";
+import { test, describe, beforeAll, expect } from "vitest";
import 'vitest-dom/extend-expect';
import { createRemixStub } from "@remix-run/testing";
import {
- render
+ render,
+ screen,
+ waitFor
} from "@testing-library/react";
import Dashboard from "./dashboard";
@@ -44,6 +46,10 @@ describe("Dashboard route", () => {
]);
render();
+
+ // wait until the rows render in the document
+ await waitFor(() => screen.findByText("Country"));
+ expect(screen.getByText('Country')).toBeInTheDocument();
});
test("renders with data", async () => {
@@ -54,7 +60,7 @@ describe("Dashboard route", () => {
sites: ['example'],
views: 100,
visits: 80,
- visitors: 60,
+ visitors: 33, // made intentionally unique for test assertions
countByPath: [
['/', 100],
['/about', 80],
@@ -66,9 +72,9 @@ describe("Dashboard route", () => {
['Firefox', 60],
],
countByCountry: [
- ['United States', 100],
- ['Canada', 80],
- ['United Kingdom', 60],
+ ['US', 100],
+ ['CA', 80],
+ ['UK', 60],
],
countByReferrer: [
['google.com', 100],
@@ -104,5 +110,16 @@ describe("Dashboard route", () => {
]);
render();
+
+ // wait until the rows render in the document
+ await waitFor(() => screen.findByText("Chrome"));
+
+ // assert some of the data we mocked actually rendered into the document
+ expect(screen.getByText('33')).toBeInTheDocument();
+ expect(screen.getByText('/about')).toBeInTheDocument();
+ expect(screen.getByText('Chrome')).toBeInTheDocument();
+ expect(screen.getByText('google.com')).toBeInTheDocument();
+ expect(screen.getByText('Canada')).toBeInTheDocument(); // assert converted CA -> Canada
+ expect(screen.getByText('Mobile')).toBeInTheDocument();
});
});
\ No newline at end of file