hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-17 06:52:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Begin replacing enzyme with react-testing-library

Browse Source
This commit is contained in:
Nathan Barber
2021-11-30 22:23:22 -05:00
parent 496f414a2e
commit 9e245379e8
5 changed files with 307 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
jsx/src/components/AddUser/AddUser.jsx
View File

@@ -25,7 +25,7 @@ const AddUser = (props) => {
return (
<>
<div className="container">
<div className="container" data-testid="container">
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
@@ -58,6 +58,7 @@ const AddUser = (props) => {
id="add-user-textarea"
rows="3"
placeholder="usernames separated by line"
data-testid="user-textarea"
onBlur={(e) => {
let split_users = e.target.value.split("\n");
setUsers(split_users);
@@ -66,10 +67,11 @@ const AddUser = (props) => {
<br></br>
<input
className="form-check-input"
data-testid="check"
type="checkbox"
value=""
id="admin-check"
onChange={(e) => setAdmin(e.target.checked)}
checked={admin}
onChange={(e) => setAdmin(!admin)}
/>
<span> </span>
<label className="form-check-label">Admin</label>
@@ -83,6 +85,7 @@ const AddUser = (props) => {
<span> </span>
<button
id="submit"
data-testid="submit"
className="btn btn-primary"
onClick={() => {
let filtered_users = users.filter(

111
jsx/src/components/AddUser/AddUser.test.js
View File

@@ -1,27 +1,27 @@
import React from "react";
import "@testing-library/jest-dom";
import { act } from "react-dom/test-utils";
import Enzyme, { mount } from "enzyme";
import AddUser from "./AddUser";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Provider, useDispatch, useSelector } from "react-redux";
import { createStore } from "redux";
import { HashRouter } from "react-router-dom";
import AddUser from "./AddUser";
// eslint-disable-next-line
import regeneratorRuntime from 'regenerator-runtime'
Enzyme.configure({ adapter: new Adapter() });
jest.mock("react-redux", () => ({
...jest.requireActual("react-redux"),
useDispatch: jest.fn(),
useSelector: jest.fn(),
}));
var mockAsync = (statusCode) =>
var mockAsync = (result) =>
jest
.fn()
.mockImplementation(() =>
Promise.resolve({ key: "value", status: statusCode ? statusCode : 200 })
Promise.resolve(result)
);
var mockAsyncRejection = () =>
@@ -57,60 +57,85 @@ afterEach(() => {
useDispatch.mockClear();
});
test("Renders", () => {
let component = mount(addUserJsx(mockAsync()));
expect(component.find(".container").length).toBe(1);
test("Renders", async () => {
await act(async () => {
render(addUserJsx())
})
expect(screen.getByTestId("container")).toBeVisible()
});
test("Removes users when they fail Regex", () => {
let callbackSpy = mockAsync(),
component = mount(addUserJsx(callbackSpy)),
textarea = component.find("textarea").first();
textarea.simulate("blur", { target: { value: "foo\nbar\n!!*&*" } });
let submit = component.find("#submit");
submit.simulate("click");
test("Removes users when they fail Regex", async () => {
let callbackSpy = mockAsync();
await act(async () => {
render(addUserJsx(callbackSpy))
})
let textarea = screen.getByTestId("user-textarea")
let submit = screen.getByTestId("submit")
fireEvent.blur(textarea, { target: { value: "foo\nbar\n!!*&*" }})
await act(async () => {
fireEvent.click(submit)
})
expect(callbackSpy).toHaveBeenCalledWith(["foo", "bar"], false);
});
test("Correctly submits admin", () => {
let callbackSpy = mockAsync(),
component = mount(addUserJsx(callbackSpy)),
input = component.find("input").first();
input.simulate("change", { target: { checked: true } });
let submit = component.find("#submit");
submit.simulate("click");
expect(callbackSpy).toHaveBeenCalledWith([], true);
test("Correctly submits admin", async () => {
let callbackSpy = mockAsync();
await act(async () => {
render(addUserJsx(callbackSpy))
})
let textarea = screen.getByTestId("user-textarea")
let submit = screen.getByTestId("submit")
let check = screen.getByTestId("check")
userEvent.click(check)
fireEvent.blur(textarea, { target: { value: "foo" }})
await act(async () => {
fireEvent.click(submit)
})
expect(callbackSpy).toHaveBeenCalledWith(["foo"], true);
});
test("Shows a UI error dialogue when user creation fails", async () => {
let callbackSpy = mockAsyncRejection(),
component = mount(addUserJsx(callbackSpy));
let submit = component.find("#submit");
let callbackSpy = mockAsyncRejection();
await act(async () => {
submit.simulate("click");
});
render(addUserJsx(callbackSpy))
})
component.update();
let errorDialog = component.find("div.alert.alert-danger").first();
let submit = screen.getByTestId("submit")
await act(async () => {
fireEvent.click(submit)
})
let errorDialog = screen.getByText("Failed to create user.")
expect(errorDialog).toBeVisible()
expect(callbackSpy).toHaveBeenCalled();
expect(errorDialog.text()).toContain("Failed to create user.");
});
test("Shows a more specific UI error dialogue when user creation returns an improper status code", async () => {
let callbackSpy = mockAsync(409),
component = mount(addUserJsx(callbackSpy));
let submit = component.find("#submit");
let callbackSpy = mockAsync({status: 409});
await act(async () => {
submit.simulate("click");
});
render(addUserJsx(callbackSpy))
})
component.update();
let errorDialog = component.find("div.alert.alert-danger").first();
let submit = screen.getByTestId("submit")
expect(errorDialog.text()).toContain(
"Failed to create user. User already exists."
);
await act(async () => {
fireEvent.click(submit)
})
let errorDialog = screen.getByText("Failed to create user. User already exists.")
expect(errorDialog).toBeVisible()
expect(callbackSpy).toHaveBeenCalled();
});