Skip to content

Commit

Permalink
Cinch up TS linting for test files too
Browse files Browse the repository at this point in the history
  • Loading branch information
imnasnainaec committed Oct 5, 2023
1 parent ac5a7a4 commit 89372b9
Show file tree
Hide file tree
Showing 13 changed files with 90 additions and 63 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
"piptools",
"Prenoun",
"Preverb",
"recaptcha",
"reportgenerator",
"sched",
"sillsdev",
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
"import/newline-after-import": "warn",
"import/no-duplicates": "warn",
"import/no-named-as-default": "off",
"import/no-named-as-default-member": "warn",
"import/order": [
"warn",
{
Expand Down
18 changes: 11 additions & 7 deletions src/components/App/App.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import "jest-canvas-mock";
import { Provider } from "react-redux";
import renderer from "react-test-renderer";
import { act, create } from "react-test-renderer";
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

Expand All @@ -9,9 +9,13 @@ import "tests/reactI18nextMock";
import { defaultState } from "components/App/DefaultState";
import App from "components/App/component";

jest.mock("@matt-block/react-recaptcha-v2", () => () => (
<div id="mockRecaptcha">Recaptcha</div>
));
jest.mock(
"@matt-block/react-recaptcha-v2",
() =>
function MockRecaptcha() {
return <div id="mockRecaptcha">Recaptcha</div>;
}
);
jest.mock("components/AnnouncementBanner/AnnouncementBanner", () => "div");

const createMockStore = configureMockStore([thunk]);
Expand All @@ -23,9 +27,9 @@ global.innerHeight = 100;
global.analytics = { track: jest.fn() } as any;

describe("App", () => {
it("renders without crashing", () => {
renderer.act(() => {
renderer.create(
it("renders without crashing", async () => {
await act(async () => {
create(
<Provider store={mockStore}>
<App />
</Provider>
Expand Down
10 changes: 4 additions & 6 deletions src/components/AppBar/tests/AppBarComponent.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import renderer from "react-test-renderer";
import { act, create } from "react-test-renderer";
import configureMockStore from "redux-mock-store";

import "tests/reactI18nextMock";
Expand All @@ -18,8 +18,6 @@ jest.mock("backend", () => ({

const mockStore = configureMockStore()(defaultState);

let testRenderer: renderer.ReactTestRenderer;

function setMockFunctions() {
mockGetUser.mockResolvedValue(mockUser);
}
Expand All @@ -30,9 +28,9 @@ beforeAll(() => {
});

describe("AppBar", () => {
it("renders", () => {
renderer.act(() => {
testRenderer = renderer.create(
it("renders", async () => {
await act(async () => {
create(
<Provider store={mockStore}>
<MemoryRouter>
<AppBar />
Expand Down
50 changes: 27 additions & 23 deletions src/components/DataEntry/DataEntryTable/tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { ReactElement } from "react";
import { Provider } from "react-redux";
import renderer from "react-test-renderer";
import {
ReactTestInstance,
ReactTestRenderer,
act,
create,
} from "react-test-renderer";
import configureMockStore from "redux-mock-store";

import "tests/reactI18nextMock";
Expand All @@ -17,7 +22,6 @@ import DataEntryTable, {
updateEntryGloss,
} from "components/DataEntry/DataEntryTable";
import NewEntry from "components/DataEntry/DataEntryTable/NewEntry";
import { RecentEntryProps } from "components/DataEntry/DataEntryTable/RecentEntry";
import { newProject } from "types/project";
import {
newSemanticDomain,
Expand Down Expand Up @@ -57,10 +61,10 @@ jest.mock("utilities/utilities");

jest.spyOn(window, "alert").mockImplementation(() => {});

let testRenderer: renderer.ReactTestRenderer;
let testHandle: renderer.ReactTestInstance;
let testRenderer: ReactTestRenderer;
let testHandle: ReactTestInstance;

function MockRecentEntry(props: RecentEntryProps): ReactElement {
function MockRecentEntry(): ReactElement {
return <div />;
}

Expand Down Expand Up @@ -97,8 +101,8 @@ beforeEach(() => {
});

const renderTable = async (): Promise<void> => {
await renderer.act(async () => {
testRenderer = renderer.create(
await act(async () => {
testRenderer = create(
<Provider store={mockStore}>
<DataEntryTable
semanticDomain={mockTreeNode}
Expand All @@ -119,7 +123,7 @@ const addRecentEntry = async (word?: Word): Promise<string> => {
}
mockCreateWord.mockResolvedValueOnce(word);
mockGetWord.mockResolvedValueOnce(word);
await renderer.act(async () => {
await act(async () => {
await testRenderer.root.findByType(NewEntry).props.addNewEntry();
});
return word.id;
Expand All @@ -140,7 +144,7 @@ describe("DataEntryTable", () => {
it("hides questions", async () => {
expect(mockHideQuestions).not.toBeCalled();
testHandle = testRenderer.root.findByProps({ id: exitButtonId });
await renderer.act(async () => await testHandle.props.onClick());
await act(async () => await testHandle.props.onClick());
expect(mockHideQuestions).toBeCalled();
});

Expand All @@ -149,26 +153,26 @@ describe("DataEntryTable", () => {
testHandle = testRenderer.root.findByType(NewEntry);
expect(testHandle).not.toBeNull;
// Set newVern but not newGloss.
await renderer.act(async () => testHandle.props.setNewVern("hasVern"));
await act(async () => testHandle.props.setNewVern("hasVern"));
testHandle = testRenderer.root.findByProps({ id: exitButtonId });
await renderer.act(async () => await testHandle.props.onClick());
await act(async () => await testHandle.props.onClick());
expect(mockCreateWord).toBeCalledTimes(1);
});

it("doesn't create word when new entry has no vernacular", async () => {
testHandle = testRenderer.root.findByType(NewEntry);
expect(testHandle).not.toBeNull;
// Set newGloss but not newVern.
await renderer.act(async () => testHandle.props.setNewGloss("hasGloss"));
await act(async () => testHandle.props.setNewGloss("hasGloss"));
testHandle = testRenderer.root.findByProps({ id: exitButtonId });
await renderer.act(async () => await testHandle.props.onClick());
await act(async () => await testHandle.props.onClick());
expect(mockCreateWord).not.toBeCalled();
});

it("opens the domain tree", async () => {
expect(mockOpenTree).not.toBeCalled();
testHandle = testRenderer.root.findByProps({ id: exitButtonId });
await renderer.act(async () => await testHandle.props.onClick());
await act(async () => await testHandle.props.onClick());
expect(mockOpenTree).toBeCalledTimes(1);
});
});
Expand Down Expand Up @@ -293,7 +297,7 @@ describe("DataEntryTable", () => {
mockGetFrontierWords.mockResolvedValue([word]);
await renderTable();
testHandle = testRenderer.root.findByType(NewEntry);
await renderer.act(async () => {
await act(async () => {
await testHandle.props.setNewGloss(firstGlossText(word.senses[0]));
await testHandle.props.updateWordWithNewGloss(word.id);
});
Expand All @@ -309,7 +313,7 @@ describe("DataEntryTable", () => {
mockGetFrontierWords.mockResolvedValue([word]);
await renderTable();
testHandle = testRenderer.root.findByType(NewEntry);
await renderer.act(async () => {
await act(async () => {
await testHandle.props.setNewGloss(firstGlossText(word.senses[0]));
await testHandle.props.updateWordWithNewGloss(word.id);
});
Expand All @@ -319,7 +323,7 @@ describe("DataEntryTable", () => {
it("updates word in backend if gloss doesn't exist", async () => {
await renderTable();
testHandle = testRenderer.root.findByType(NewEntry);
await renderer.act(async () => {
await act(async () => {
await testHandle.props.setNewGloss("differentGloss");
await testHandle.props.updateWordWithNewGloss(mockMultiWord.id);
});
Expand All @@ -333,7 +337,7 @@ describe("DataEntryTable", () => {
it("checks for duplicate and, if so, updates it", async () => {
testHandle = testRenderer.root.findByType(NewEntry);
mockGetDuplicateId.mockResolvedValueOnce(true);
await renderer.act(async () => {
await act(async () => {
await testHandle.props.addNewEntry();
});
expect(mockUpdateDuplicate).toBeCalledTimes(1);
Expand All @@ -357,7 +361,7 @@ describe("DataEntryTable", () => {

// Verify that the number of recent entries increases by the correct amount
expect(testRenderer.root.findAllByType(MockRecentEntry)).toHaveLength(0);
await renderer.act(async () => {
await act(async () => {
await testRenderer.root.findByType(NewEntry).props.addNewEntry();
});
expect(testRenderer.root.findAllByType(MockRecentEntry)).toHaveLength(
Expand All @@ -372,14 +376,14 @@ describe("DataEntryTable", () => {
const vern = "vern";
const glossDef = "gloss";
const noteText = "note";
renderer.act(() => {
act(() => {
testHandle.props.setNewVern(vern);
testHandle.props.setNewGloss(glossDef);
testHandle.props.setNewNote(noteText);
});

// Trigger the function to add a new entry
await renderer.act(async () => {
await act(async () => {
try {
await testHandle.props.addNewEntry();
} catch {
Expand Down Expand Up @@ -409,7 +413,7 @@ describe("DataEntryTable", () => {
it("removes a recent entry", async () => {
await addRecentEntry();
const recentEntry = testRenderer.root.findByType(MockRecentEntry);
await renderer.act(async () => {
await act(async () => {
await recentEntry.props.removeEntry();
});
expect(testRenderer.root.findAllByType(MockRecentEntry)).toHaveLength(0);
Expand All @@ -432,7 +436,7 @@ describe("DataEntryTable", () => {

// Update the vernacular
const newVern = "not the vern generated in addRecentEntry";
await renderer.act(async () => {
await act(async () => {
await recentEntry.props.updateVern(newVern);
});

Expand Down
27 changes: 18 additions & 9 deletions src/components/Login/LoginPage/tests/LoginComponent.test.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
import renderer from "react-test-renderer";
import {
ReactTestInstance,
ReactTestRenderer,
act,
create,
} from "react-test-renderer";

import "tests/reactI18nextMock";

import Login from "components/Login/LoginPage/LoginComponent";

jest.mock("@matt-block/react-recaptcha-v2", () => () => (
<div id="mockRecaptcha">Recaptcha</div>
));
jest.mock(
"@matt-block/react-recaptcha-v2",
() =>
function MockRecaptcha() {
return <div id="mockRecaptcha">Recaptcha</div>;
}
);
jest.mock("backend", () => ({
getBannerText: () => Promise.resolve(""),
}));

jest.mock("browserRouter");
const LOGOUT = jest.fn();
let loginMaster: renderer.ReactTestRenderer;
let loginHandle: renderer.ReactTestInstance;
let loginMaster: ReactTestRenderer;
let loginHandle: ReactTestInstance;

const DATA = "stuff";
const MOCK_EVENT = { preventDefault: jest.fn(), target: { value: DATA } };

describe("Testing login component", () => {
beforeEach(() => {
renderer.act(() => {
loginMaster = renderer.create(<Login logout={LOGOUT} reset={LOGOUT} />);
beforeEach(async () => {
await act(async () => {
loginMaster = create(<Login logout={LOGOUT} reset={LOGOUT} />);
});
loginHandle = loginMaster.root.findByType(Login);
LOGOUT.mockClear();
Expand Down
29 changes: 18 additions & 11 deletions src/components/Login/SignUpPage/tests/SignUpComponent.test.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,34 @@
import renderer from "react-test-renderer";
import {
ReactTestInstance,
ReactTestRenderer,
act,
create,
} from "react-test-renderer";

import "tests/reactI18nextMock";

import SignUp from "components/Login/SignUpPage/SignUpComponent";

jest.mock("@matt-block/react-recaptcha-v2", () => () => (
<div id="mockRecaptcha">Recaptcha</div>
));
jest.mock(
"@matt-block/react-recaptcha-v2",
() =>
function MockRecaptcha() {
return <div id="mockRecaptcha">Recaptcha</div>;
}
);
jest.mock("browserRouter");

const mockReset = jest.fn();
let signUpMaster: renderer.ReactTestRenderer;
let signUpHandle: renderer.ReactTestInstance;
let signUpMaster: ReactTestRenderer;
let signUpHandle: ReactTestInstance;

const DATA = "stuff";
const MOCK_EVENT = { preventDefault: jest.fn(), target: { value: DATA } };

describe("Testing sign up component", () => {
beforeEach(() => {
renderer.act(() => {
signUpMaster = renderer.create(
<SignUp failureMessage="" reset={mockReset} />
);
beforeEach(async () => {
await act(async () => {
signUpMaster = create(<SignUp failureMessage="" reset={mockReset} />);
});
signUpHandle = signUpMaster.root.findByType(SignUp);
mockReset.mockClear();
Expand Down
4 changes: 2 additions & 2 deletions src/components/ProjectSettings/tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import "@testing-library/jest-dom";
import { act, cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import mediaQuery from "css-mediaquery";
import { match } from "css-mediaquery";
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";

Expand Down Expand Up @@ -73,7 +73,7 @@ const createMatchMedia = (
): ((query: string) => MediaQueryList) => {
return (query: string) =>
({
matches: mediaQuery.match(query, { width }),
matches: match(query, { width }),
addListener: jest.fn(),
removeListener: jest.fn(),
}) as any;
Expand Down
2 changes: 2 additions & 0 deletions src/components/TreeView/tests/SemanticDomainMock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
semDomFromTreeNode,
} from "types/semanticDomain";

/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
export enum mapIds {
"head" = "Sem",
"parent" = "1",
Expand All @@ -17,6 +18,7 @@ export enum mapIds {
"depth4" = "1.2.1.1",
"depth5" = "1.2.1.1.1",
}
/* eslint-enable @typescript-eslint/no-duplicate-enum-values */

const nodeMap: TreeNodeMap = {};

Expand Down
2 changes: 1 addition & 1 deletion src/components/TreeView/tests/TreeSearch.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import domMap, { mapIds } from "components/TreeView/tests/SemanticDomainMock";
import { newSemanticDomainTreeNode } from "types/semanticDomain";

// Handles
const MOCK_ANIMATE = jest.fn((_domain: SemanticDomainTreeNode) => {
const MOCK_ANIMATE = jest.fn(() => {
console.log("MockAnimateCalled");
return Promise.resolve();
});
Expand Down
Loading

0 comments on commit 89372b9

Please sign in to comment.