libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Convert MapperDialog test to use React Testing Library

Browse source
This commit is contained in:
Jon Koops 2021-07-07 12:55:36 +02:00 committed by Jon Koops
parent ad7b77503a
commit a2bce22bdc
3 changed files with 77 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/client-scopes/add/MapperDialog.test.tsx Normal file
View file

@ -0,0 +1,75 @@
import { Button } from "@patternfly/react-core";
import { fireEvent, render, screen } from "@testing-library/react";
import type { ServerInfoRepresentation } from "keycloak-admin/lib/defs/serverInfoRepesentation";
import React, { useState } from "react";
import { ServerInfoContext } from "../../context/server-info/ServerInfoProvider";
import serverInfo from "../../context/server-info/__tests__/mock.json";
import { AddMapperDialog, AddMapperDialogModalProps } from "./MapperDialog";
describe("MapperDialog", () => {
const Test = (args: AddMapperDialogModalProps) => {
const [open, setOpen] = useState(false);
return (
<ServerInfoContext.Provider
value={serverInfo as unknown as ServerInfoRepresentation}
>
<AddMapperDialog
{...args}
open={open}
toggleDialog={() => setOpen(!open)}
/>
<Button onClick={() => setOpen(true)}>{!open ? "Show" : "Hide"}</Button>
</ServerInfoContext.Provider>
);
};
it("disables the add button when nothing is selected", () => {
render(<Test filter={[]} protocol="openid-connect" onConfirm={() => {}} />);
fireEvent.click(screen.getByText("Show"));
expect(screen.getByTestId("modalConfirm")).toHaveClass("pf-m-disabled");
});
it("returns array with selected build in protocol mapping", () => {
const onConfirm = jest.fn();
const protocol = "openid-connect";
render(<Test filter={[]} protocol={protocol} onConfirm={onConfirm} />);
fireEvent.click(screen.getByText("Show"));
fireEvent.click(screen.getByLabelText("Select row 0"));
fireEvent.click(screen.getByLabelText("Select row 1"));
fireEvent.click(screen.getByTestId("modalConfirm"));
expect(onConfirm).toBeCalledWith([
serverInfo.builtinProtocolMappers[protocol][0],
serverInfo.builtinProtocolMappers[protocol][1],
]);
});
it("returns selected protocol mapping type on click", () => {
const onConfirm = jest.fn();
const protocol = "openid-connect";
render(<Test protocol={protocol} onConfirm={onConfirm} />);
fireEvent.click(screen.getByText("Show"));
fireEvent.click(screen.getByLabelText("User Realm Role"));
expect(onConfirm).toBeCalledWith(
serverInfo.protocolMapperTypes[protocol][0]
);
});
it("closes the dialog on 'X' click", () => {
render(<Test protocol="openid-connect" onConfirm={() => {}} />);
fireEvent.click(screen.getByText("Show"));
expect(screen.getByText("Hide")).toBeInTheDocument();
fireEvent.click(screen.getByLabelText("Close"));
expect(screen.getByText("Show")).toBeInTheDocument();
});
});

3
src/client-scopes/add/MapperDialog.tsx
View file

@ -81,6 +81,7 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
? [
<Button
id="modal-confirm"
data-testid="modalConfirm"
key="confirm"
isDisabled={rows.length === 0 || selectedRows.length === 0}
onClick={() => {
@ -119,7 +120,7 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
>
{protocolMappers.map((mapper) => (
<DataListItem
aria-labelledby={mapper.name}
aria-label={mapper.name}
key={mapper.id}
id={mapper.id}
>

90
src/client-scopes/add/__tests__/MapperDialog.test.tsx
View file

@ -1,90 +0,0 @@
import React, { useState } from "react";
import { mount } from "enzyme";
import { Button } from "@patternfly/react-core";
import type { ServerInfoRepresentation } from "keycloak-admin/lib/defs/serverInfoRepesentation";
import serverInfo from "../../../context/server-info/__tests__/mock.json";
import { ServerInfoContext } from "../../../context/server-info/ServerInfoProvider";
import { AddMapperDialogModalProps, AddMapperDialog } from "../MapperDialog";
describe("<MapperDialog/>", () => {
const Test = (args: AddMapperDialogModalProps) => {
const [open, setOpen] = useState(false);
return (
<ServerInfoContext.Provider
value={serverInfo as unknown as ServerInfoRepresentation}
>
<AddMapperDialog
{...args}
open={open}
toggleDialog={() => setOpen(!open)}
/>
<Button id="open" onClick={() => setOpen(true)}>
{!open ? "Show" : "Hide"}
</Button>
</ServerInfoContext.Provider>
);
};
it("should have disabled add button when nothing is selected", () => {
const container = mount(
<Test filter={[]} protocol="openid-connect" onConfirm={() => {}} />
);
container.find("button#open").simulate("click");
const button = container.find("button#modal-confirm");
expect(button.hasClass("pf-m-disabled")).toBe(true);
});
it("should return array with selected build in protocol mapping", () => {
const onConfirm = jest.fn();
const protocol = "openid-connect";
const container = mount(
<Test filter={[]} protocol={protocol} onConfirm={onConfirm} />
);
container.find("button#open").simulate("click");
container
.find("input[name='checkrow0']")
.simulate("change", { target: { value: true } });
container
.find("input[name='checkrow1']")
.simulate("change", { target: { value: true } });
container.find("button#modal-confirm").simulate("click");
expect(onConfirm).toBeCalledWith([
serverInfo.builtinProtocolMappers[protocol][0],
serverInfo.builtinProtocolMappers[protocol][1],
]);
});
it("should return selected protocol mapping type on click", () => {
const onConfirm = jest.fn();
const protocol = "openid-connect";
const container = mount(<Test protocol={protocol} onConfirm={onConfirm} />);
container.find("button#open").simulate("click");
container
.find("div.pf-c-data-list__item-content")
.first()
.simulate("click");
expect(onConfirm).toBeCalledWith(
serverInfo.protocolMapperTypes[protocol][0]
);
});
it("should close the dialog on 'X' click", () => {
const container = mount(
<Test protocol="openid-connect" onConfirm={() => {}} />
);
expect(container.find("button#open").text()).toBe("Show");
container.find("button#open").simulate("click");
expect(container.find("button#open").text()).toBe("Hide");
container.find('button[aria-label="Close"]').simulate("click");
expect(container.find("button#open").text()).toBe("Show");
});
});