Skip to content

Commit

Permalink
chore: remove enzyme MAASENG-1801 (#4954)
Browse files Browse the repository at this point in the history 
*Begone, foul Enzyme, lord of poor testing practices! Leave the developers in peace!*
  • Loading branch information
@petermakowski
petermakowski authored Jun 1, 2023
1 parent 5a1a488 commit f4701a1
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 523 deletions.
3 changes: 1 addition & 2 deletions docs/HACKING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,8 +570,7 @@ For details on developing integration tests, see the integration testing [README
## Unit tests

Unit/integration tests use [Jest](https://jestjs.io/) and [React Testing
Library](https://testing-library.com/), though many of our tests are still
written with [Enzyme](https://enzymejs.github.io/enzyme/).
Library](https://testing-library.com/).

Tests can be run with:

Expand Down
9 changes: 1 addition & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@
"@testing-library/user-event": "14.4.3",
"@types/classnames": "2.3.0",
"@types/clone-deep": "4.0.1",
"@types/enzyme": "3.10.12",
"@types/jest": "27.5.2",
"@types/node": "18.14.2",
"@types/path-parse": "1.0.19",
Expand All @@ -100,7 +99,6 @@
"@types/redux-mock-store": "1.0.3",
"@types/redux-saga": "0.10.5",
"@welldone-software/why-did-you-render": "7.0.1",
"@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
"address": "1.2.2",
"colors": "1.4.0",
"concurrently": "8.0.1",
Expand All @@ -110,8 +108,6 @@
"cypress-wait-until": "1.7.2",
"cz-conventional-changelog": "3.3.0",
"dotenv-flow": "3.2.0",
"enzyme": "3.11.0",
"enzyme-to-json": "3.6.2",
"eslint-config-prettier": "8.6.0",
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-no-only-tests": "3.1.0",
Expand Down Expand Up @@ -152,10 +148,7 @@
}
},
"jest": {
"resetMocks": false,
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
"resetMocks": false
},
"npmpackagejsonlint": {
"rules": {
Expand Down
237 changes: 80 additions & 157 deletions src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import { mount } from "enzyme";
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import { CompatRouter } from "react-router-dom-v5-compat";
import configureStore from "redux-mock-store";

import { StatusColumn } from "./StatusColumn";
Expand Down Expand Up @@ -29,7 +25,7 @@ import {
within,
} from "testing/utils";

const mockStore = configureStore();
const mockStore = configureStore<RootState>();

describe("StatusColumn", () => {
let state: RootState;
Expand Down Expand Up @@ -78,19 +74,12 @@ describe("StatusColumn", () => {
machine.status = NodeStatus.NEW;
machine.status_code = NodeStatusCode.NEW;
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find("[data-testid='status-text']").text()).toBe("New");
expect(screen.getByTestId("status-text")).toHaveTextContent("New");
});

it("displays the short-form of Ubuntu release if deployed", () => {
Expand All @@ -99,19 +88,13 @@ describe("StatusColumn", () => {
machine.osystem = "ubuntu";
machine.distro_series = "bionic";
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>

renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find("[data-testid='status-text']").text()).toBe(
expect(screen.getByTestId("status-text")).toHaveTextContent(
"Ubuntu 18.04 LTS"
);
});
Expand All @@ -122,21 +105,12 @@ describe("StatusColumn", () => {
machine.osystem = "centos";
machine.distro_series = "centos70";
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
);

expect(wrapper.find("[data-testid='status-text']").text()).toBe(
"CentOS 7"
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);
expect(screen.getByTestId("status-text")).toHaveTextContent("CentOS 7");
});

it("displays 'Deploying OS release' if machine is deploying", () => {
Expand All @@ -145,19 +119,12 @@ describe("StatusColumn", () => {
machine.osystem = "ubuntu";
machine.distro_series = "bionic";
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
);

expect(wrapper.find("[data-testid='status-text']").text()).toBe(
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);
expect(screen.getByTestId("status-text")).toHaveTextContent(
"Deploying Ubuntu 18.04 LTS"
);
});
Expand All @@ -168,19 +135,12 @@ describe("StatusColumn", () => {
machine.status_code = NodeStatusCode.BROKEN;
const store = mockStore(state);

const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find("[data-testid='error-text']").text()).toBe(
expect(screen.getByTestId("error-text")).toHaveTextContent(
"machine is on fire"
);
});
Expand All @@ -192,19 +152,12 @@ describe("StatusColumn", () => {
machine.status_code = NodeStatusCode.TESTING;
machine.status_message = "2 of 6 tests complete";
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find("[data-testid='progress-text']").text()).toBe(
expect(screen.getByTestId("progress-text")).toHaveTextContent(
"2 of 6 tests complete"
);
});
Expand All @@ -215,19 +168,11 @@ describe("StatusColumn", () => {
machine.status_code = NodeStatusCode.ALLOCATED;
machine.status_message = "This machine is allocated";
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find("[data-testid='progress-text']").text()).toBe("");
expect(screen.getByTestId("progress-text")).toHaveTextContent("");
});
});

Expand All @@ -236,19 +181,11 @@ describe("StatusColumn", () => {
machine.status = NodeStatus.COMMISSIONING;
machine.status_code = NodeStatusCode.COMMISSIONING;
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find(".p-icon--spinner").exists()).toBe(true);
expect(screen.getByText(/Loading/i)).toBeInTheDocument();
});

it(`shows a warning and tooltip if machine has failed tests and is not in a
Expand All @@ -257,70 +194,56 @@ describe("StatusColumn", () => {
machine.status_code = NodeStatusCode.ALLOCATED;
machine.testing_status.status = TestStatusStatus.FAILED;
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ route: "/machines", store }
);

expect(wrapper.find(".p-icon--warning").exists()).toBe(true);
expect(wrapper.find("Tooltip").exists()).toBe(true);
expect(screen.getByLabelText(/warning/i)).toBeInTheDocument();
});
});

it("can show a menu with all possible options", async () => {
machine.actions = [
NodeActions.ABORT,
NodeActions.ACQUIRE,
NodeActions.COMMISSION,
NodeActions.DEPLOY,
NodeActions.EXIT_RESCUE_MODE,
NodeActions.LOCK,
NodeActions.MARK_BROKEN,
NodeActions.MARK_FIXED,
NodeActions.OVERRIDE_FAILED_TESTING,
NodeActions.RELEASE,
NodeActions.RESCUE_MODE,
NodeActions.TEST,
NodeActions.UNLOCK,
];
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ state, route: "/machines" }
);
await userEvent.click(screen.getByRole("button", { name: /take action/i }));
expect(
within(screen.getByLabelText("submenu")).getAllByRole("button")
).toHaveLength(machine.actions.length);
machine.actions.forEach((action) => {
it("can show a menu with all possible options", async () => {
machine.actions = [
NodeActions.ABORT,
NodeActions.ACQUIRE,
NodeActions.COMMISSION,
NodeActions.DEPLOY,
NodeActions.EXIT_RESCUE_MODE,
NodeActions.LOCK,
NodeActions.MARK_BROKEN,
NodeActions.MARK_FIXED,
NodeActions.OVERRIDE_FAILED_TESTING,
NodeActions.RELEASE,
NodeActions.RESCUE_MODE,
NodeActions.TEST,
NodeActions.UNLOCK,
];
renderWithBrowserRouter(
<StatusColumn onToggleMenu={jest.fn()} systemId="abc123" />,
{ state, route: "/machines" }
);
await userEvent.click(
screen.getByRole("button", { name: /take action/i })
);
expect(
within(screen.getByLabelText("submenu")).getByRole("button", {
name: action,
})
).toBeInTheDocument();
within(screen.getByLabelText("submenu")).getAllByRole("button")
).toHaveLength(machine.actions.length);
machine.actions.forEach((action) => {
expect(
within(screen.getByLabelText("submenu")).getByRole("button", {
name: action,
})
).toBeInTheDocument();
});
});
});

it("does not render table menu if onToggleMenu not provided", () => {
const store = mockStore(state);
const wrapper = mount(
<Provider store={store}>
<MemoryRouter
initialEntries={[{ pathname: "/machines", key: "testKey" }]}
>
<CompatRouter>
<StatusColumn systemId="abc123" />
</CompatRouter>
</MemoryRouter>
</Provider>
);

expect(wrapper.find("TableMenu").exists()).toBe(false);
it("does not render table menu if onToggleMenu not provided", () => {
renderWithBrowserRouter(<StatusColumn systemId="abc123" />, {
state,
route: "/machines",
});
expect(
screen.queryByRole("button", { name: /take action/i })
).not.toBeInTheDocument();
});
});
});
4 changes: 0 additions & 4 deletions src/setupTests.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import "@testing-library/react";
import "@testing-library/jest-dom";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import Enzyme from "enzyme";
import { enableFetchMocks } from "jest-fetch-mock";

Enzyme.configure({ adapter: new Adapter() });

enableFetchMocks();
Loading

0 comments on commit f4701a1

Please sign in to comment.