Updated Groups to testing-library

This commit is contained in:
Nathan Barber
2021-12-01 00:20:16 -05:00
parent db7cdc4aa7
commit dfee471e22
2 changed files with 75 additions and 50 deletions

View File

@@ -19,7 +19,7 @@ const Groups = (props) => {
var { updateGroups, history } = props; var { updateGroups, history } = props;
if (!groups_data || !user_data) { if (!groups_data || !user_data) {
return <div></div>; return <div data-testid="no-show"></div>;
} }
const dispatchPageChange = (data, page) => { const dispatchPageChange = (data, page) => {
@@ -39,7 +39,7 @@ const Groups = (props) => {
} }
return ( return (
<div className="container"> <div className="container" data-testid="container">
<div className="row"> <div className="row">
<div className="col-md-12 col-lg-10 col-lg-offset-1"> <div className="col-md-12 col-lg-10 col-lg-offset-1">
<div className="panel panel-default"> <div className="panel panel-default">

View File

@@ -1,12 +1,14 @@
import React from "react"; import React from "react";
import Enzyme, { mount } from "enzyme"; import "@testing-library/jest-dom";
import Groups from "./Groups"; import { act } from "react-dom/test-utils";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17"; import { render, screen } from "@testing-library/react";
import { Provider, useDispatch, useSelector } from "react-redux"; import { Provider, useDispatch, useSelector } from "react-redux";
import { createStore } from "redux"; import { createStore } from "redux";
import { HashRouter } from "react-router-dom"; import { HashRouter } from "react-router-dom";
// eslint-disable-next-line
import regeneratorRuntime from 'regenerator-runtime'
Enzyme.configure({ adapter: new Adapter() }); import Groups from "./Groups";
jest.mock("react-redux", () => ({ jest.mock("react-redux", () => ({
...jest.requireActual("react-redux"), ...jest.requireActual("react-redux"),
@@ -14,7 +16,6 @@ jest.mock("react-redux", () => ({
useDispatch: jest.fn(), useDispatch: jest.fn(),
})); }));
describe("Groups Component: ", () => {
var mockAsync = () => var mockAsync = () =>
jest.fn().mockImplementation(() => Promise.resolve({ key: "value" })); jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
@@ -33,6 +34,7 @@ describe("Groups Component: ", () => {
groups_data: JSON.parse( groups_data: JSON.parse(
'[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]' '[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]'
), ),
limit: 10,
}); });
beforeEach(() => { beforeEach(() => {
@@ -48,18 +50,41 @@ describe("Groups Component: ", () => {
useSelector.mockClear(); useSelector.mockClear();
}); });
it("Renders groups_data prop into links", () => { test("Renders", async () => {
let callbackSpy = mockAsync(), let callbackSpy = mockAsync();
component = mount(groupsJsx(callbackSpy)),
links = component.find("li"); await act(async () => {
expect(links.length).toBe(2); render(groupsJsx(callbackSpy));
}); });
it("Renders nothing if required data is not available", () => { expect(screen.getByTestId("container")).toBeVisible();
});
test("Renders groups_data prop into links", async () => {
let callbackSpy = mockAsync();
await act(async () => {
render(groupsJsx(callbackSpy));
});
let testgroup = screen.getByText("testgroup");
let testgroup2 = screen.getByText("testgroup2");
expect(testgroup).toBeVisible();
expect(testgroup2).toBeVisible();
});
test("Renders nothing if required data is not available", async () => {
useSelector.mockImplementation((callback) => { useSelector.mockImplementation((callback) => {
return callback({}); return callback({});
}); });
let component = mount(groupsJsx());
expect(component.html()).toBe("<div></div>"); let callbackSpy = mockAsync();
await act(async () => {
render(groupsJsx(callbackSpy));
}); });
let noShow = screen.getByTestId("no-show");
expect(noShow).toBeVisible();
}); });