Skip to content

Commit 01e66ed

Browse files
committed
Fix tests
1 parent 8912122 commit 01e66ed

File tree

5 files changed

+54
-45
lines changed

5 files changed

+54
-45
lines changed

site/jest.setup.ts

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,30 @@ import { server } from "testHelpers/server";
1111
// This would fail unit testing, or at least make it very slow with
1212
// actual network requests. So just globally mock this hook.
1313
jest.mock("contexts/useProxyLatency", () => ({
14-
useProxyLatency: (proxies?: Region[]) => {
15-
// Must use `useMemo` here to avoid infinite loop.
16-
// Mocking the hook with a hook.
17-
const proxyLatencies = useMemo(() => {
18-
if (!proxies) {
19-
return {} as Record<string, ProxyLatencyReport>;
20-
}
21-
return proxies.reduce(
22-
(acc, proxy) => {
23-
acc[proxy.id] = {
24-
accurate: true,
25-
// Return a constant latency of 8ms.
26-
// If you make this random it could break stories.
27-
latencyMS: 8,
28-
at: new Date(),
29-
};
30-
return acc;
31-
},
32-
{} as Record<string, ProxyLatencyReport>,
33-
);
34-
}, [proxies]);
14+
useProxyLatency: (proxies?: Region[]) => {
15+
// Must use `useMemo` here to avoid infinite loop.
16+
// Mocking the hook with a hook.
17+
const proxyLatencies = useMemo(() => {
18+
if (!proxies) {
19+
return {} as Record<string, ProxyLatencyReport>;
20+
}
21+
return proxies.reduce(
22+
(acc, proxy) => {
23+
acc[proxy.id] = {
24+
accurate: true,
25+
// Return a constant latency of 8ms.
26+
// If you make this random it could break stories.
27+
latencyMS: 8,
28+
at: new Date(),
29+
};
30+
return acc;
31+
},
32+
{} as Record<string, ProxyLatencyReport>,
33+
);
34+
}, [proxies]);
3535

36-
return { proxyLatencies, refetch: jest.fn() };
37-
},
36+
return { proxyLatencies, refetch: jest.fn() };
37+
},
3838
}));
3939

4040
global.scrollTo = jest.fn();
@@ -43,28 +43,30 @@ window.HTMLElement.prototype.scrollIntoView = jest.fn();
4343
window.open = jest.fn();
4444
navigator.sendBeacon = jest.fn();
4545

46+
global.ResizeObserver = require("resize-observer-polyfill");
47+
4648
// Polyfill the getRandomValues that is used on utils/random.ts
4749
Object.defineProperty(global.self, "crypto", {
48-
value: {
49-
getRandomValues: function (buffer: Buffer) {
50-
return crypto.randomFillSync(buffer);
51-
},
52-
},
50+
value: {
51+
getRandomValues: function (buffer: Buffer) {
52+
return crypto.randomFillSync(buffer);
53+
},
54+
},
5355
});
5456

5557
// Establish API mocking before all tests through MSW.
5658
beforeAll(() =>
57-
server.listen({
58-
onUnhandledRequest: "warn",
59-
}),
59+
server.listen({
60+
onUnhandledRequest: "warn",
61+
}),
6062
);
6163

6264
// Reset any request handlers that we may add during the tests,
6365
// so they don't affect other tests.
6466
afterEach(() => {
65-
cleanup();
66-
server.resetHandlers();
67-
jest.resetAllMocks();
67+
cleanup();
68+
server.resetHandlers();
69+
jest.resetAllMocks();
6870
});
6971

7072
// Clean up after the tests are finished.

site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"react-virtualized-auto-sizer": "1.0.24",
9191
"react-window": "1.8.10",
9292
"remark-gfm": "4.0.0",
93+
"resize-observer-polyfill": "1.5.1",
9394
"rollup-plugin-visualizer": "5.12.0",
9495
"semver": "7.6.2",
9596
"tzdata": "1.0.40",

site/pnpm-lock.yaml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ describe("WorkspaceBuildPage", () => {
6565

6666
test("shows selected agent logs", async () => {
6767
const server = new WS(
68-
`ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/logs?follow&after=0`,
68+
`ws://localhost/api/v2/workspaceagents/${
69+
MockWorkspaceAgent.id
70+
}/logs?follow&after=0`,
6971
);
7072
renderWithAuth(<WorkspaceBuildPage />, {
7173
route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}/builds/${MockWorkspace.latest_build.build_number}?${LOGS_TAB_KEY}=${MockWorkspaceAgent.id}`,

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
210210
);
211211
};
212212

213-
const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
213+
const ScrollArea: FC<HTMLProps<HTMLDivElement>> = (props) => {
214214
// TODO: Use only CSS to set the height of the content.
215215
// Note: On Safari, when content is rendered inside a flex container and needs
216216
// to scroll, the parent container must have a height set. Achieving this may
@@ -221,14 +221,6 @@ const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
221221
const contentRef = useRef<HTMLDivElement>(null);
222222
const [height, setHeight] = useState<CSSProperties["height"]>("100%");
223223
useLayoutEffect(() => {
224-
// TODO: Mock ResizeObserver in the test environment. This is a temporary
225-
// workaround because the recommended way to mock ResizeObserver, as
226-
// described in the following reference, did not work:
227-
// https://github.com/ZeeCoder/use-resize-observer/issues/40#issuecomment-991256805
228-
if (window.ResizeObserver === undefined) {
229-
return;
230-
}
231-
232224
const contentEl = contentRef.current;
233225
if (!contentEl) {
234226
return;
@@ -249,7 +241,11 @@ const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
249241
}, []);
250242

251243
return (
252-
<div ref={contentRef} css={{ height, overflowY: "auto", width: "100%" }} />
244+
<div
245+
ref={contentRef}
246+
css={{ height, overflowY: "auto", width: "100%" }}
247+
{...props}
248+
/>
253249
);
254250
};
255251

0 commit comments

Comments
 (0)