From 367c05e1fa4114fbd79c2ea1041fcb2cbba3f06d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 28 Oct 2020 11:43:58 +0000 Subject: [PATCH] fix(tests): use jest.mock for react-intersection-observer --- ui/src/Hooks/useFlashTransition.test.tsx | 44 ++++++++++++++----- ui/src/Stores/AlertStore.test.ts | 13 ------ .../__mocks__/react-intersection-observer.ts | 16 ------- ui/src/setupTests.ts | 11 +++++ 4 files changed, 43 insertions(+), 41 deletions(-) delete mode 100644 ui/src/__mocks__/react-intersection-observer.ts diff --git a/ui/src/Hooks/useFlashTransition.test.tsx b/ui/src/Hooks/useFlashTransition.test.tsx index 3561aa9e9..6e5bb4d11 100644 --- a/ui/src/Hooks/useFlashTransition.test.tsx +++ b/ui/src/Hooks/useFlashTransition.test.tsx @@ -1,6 +1,6 @@ import { renderHook, act } from "@testing-library/react-hooks"; -import { useInView } from "__mocks__/react-intersection-observer"; +import { useInView } from "react-intersection-observer"; import { useFlashTransition, defaultProps } from "./useFlashTransition"; @@ -9,12 +9,11 @@ describe("useFlashTransition", () => { jest.useFakeTimers(); }); - afterEach(() => { - useInView.setInView(true); - }); - it("does nothing when value changes but element is out of viewport", () => { - useInView.setInView(false); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + false, + ] as any); let value = 0; const { result, rerender } = renderHook(() => useFlashTransition(value)); @@ -26,10 +25,14 @@ describe("useFlashTransition", () => { }); it("flashes when value changes and element is in viewport", () => { - useInView.setInView(true); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + true, + ] as any); let value = 2; const { result, rerender } = renderHook(() => useFlashTransition(value)); + expect(result.current.props).toMatchObject(defaultProps); value = 3; rerender(); @@ -41,7 +44,10 @@ describe("useFlashTransition", () => { }); it("flashes when value changes and element moves into viewport", () => { - useInView.setInView(false); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + false, + ] as any); let value = 2; const { result, rerender } = renderHook(() => useFlashTransition(value)); @@ -50,7 +56,12 @@ describe("useFlashTransition", () => { rerender(); expect(result.current.props).toMatchObject(defaultProps); - act(() => useInView.setInView(true)); + act(() => { + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + true, + ] as any); + }); rerender(); expect(result.current.props).toMatchObject({ ...defaultProps, @@ -60,7 +71,10 @@ describe("useFlashTransition", () => { }); it("stops flashing props.onEntered is called", () => { - useInView.setInView(true); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + true, + ] as any); let value = 2; const { result, rerender } = renderHook(() => useFlashTransition(value)); @@ -78,14 +92,20 @@ describe("useFlashTransition", () => { }); it("unmounts cleanly when not flashing", () => { - useInView.setInView(false); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + false, + ] as any); const { unmount } = renderHook(() => useFlashTransition(4)); unmount(); }); it("unmounts cleanly when flashing", () => { - useInView.setInView(false); + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + false, + ] as any); let value = 5; const { rerender, unmount } = renderHook(() => useFlashTransition(value)); diff --git a/ui/src/Stores/AlertStore.test.ts b/ui/src/Stores/AlertStore.test.ts index faddb4f89..2daaf6ecf 100644 --- a/ui/src/Stores/AlertStore.test.ts +++ b/ui/src/Stores/AlertStore.test.ts @@ -60,9 +60,7 @@ describe("AlertStore.data", () => { store.data.getClusterAlertmanagersWithoutReadOnly("default") ).toEqual(["default"]); }); -}); -describe("AlertStore.data", () => { it("getClusterAlertmanagersWithoutReadOnly handles clusters with no writable instances", () => { const store = new AlertStore([]); store.data.setUpstreams({ @@ -276,17 +274,6 @@ describe("AlertStore.filters", () => { ); }); - it("addFilter() updates window.history", () => { - const store = new AlertStore([]); - const historyMock = jest.spyOn(global.window.history, "pushState"); - store.filters.addFilter("foo"); - expect(historyMock).toHaveBeenLastCalledWith( - null, - "", - "http://localhost/?q=foo" - ); - }); - it("setFilters() updates window.history", () => { const store = new AlertStore([]); store.filters.addFilter("foo"); diff --git a/ui/src/__mocks__/react-intersection-observer.ts b/ui/src/__mocks__/react-intersection-observer.ts deleted file mode 100644 index 0a0c5b8c3..000000000 --- a/ui/src/__mocks__/react-intersection-observer.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useRef } from "react"; - -const mock = { - value: true, -}; - -const useInView = () => { - const ref = useRef(null); - return [ref, mock.value]; -}; - -useInView.setInView = (val: boolean) => { - mock.value = val; -}; - -export { useInView }; diff --git a/ui/src/setupTests.ts b/ui/src/setupTests.ts index eb648f0a0..a6b790117 100644 --- a/ui/src/setupTests.ts +++ b/ui/src/setupTests.ts @@ -1,7 +1,10 @@ import React from "react"; + import Enzyme from "enzyme"; import Adapter from "enzyme-adapter-react-16"; +import { useInView } from "react-intersection-observer"; + import { FetchRetryConfig } from "Common/Fetch"; import { useFetchGetMock } from "__fixtures__/useFetchGet"; @@ -9,6 +12,8 @@ import { useFetchGet } from "Hooks/useFetchGet"; jest.mock("Hooks/useFetchGet"); +jest.mock("react-intersection-observer"); + // https://github.com/airbnb/enzyme Enzyme.configure({ adapter: new Adapter() }); @@ -44,4 +49,10 @@ beforeEach(() => { (useFetchGet as jest.MockedFunction< typeof useFetchGetMock >).mockImplementation(useFetchGetMock); + + (useInView as jest.MockedFunction).mockReturnValue([ + jest.fn(), + true, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ] as any); });