added more tests (#59)
This commit is contained in:
Erik Jan de Wit
GitHub
parent
ad16ce23d4
commit
050f6aaed5
6 changed files with 454 additions and 0 deletions
|
|
@ -4,6 +4,20 @@
|
|||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
|
||||
i18n.use(initReactI18next).init({
|
||||
lng: 'en',
|
||||
fallbackLng: 'en',
|
||||
|
||||
// have a common namespace used around the full app
|
||||
ns: ['translations'],
|
||||
defaultNS: 'translations',
|
||||
|
||||
resources: { en: { translations: {} } },
|
||||
});
|
||||
|
||||
import { configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
|
|
|
|||
36
src/components/data-loader/DataLoader.test.tsx
Normal file
36
src/components/data-loader/DataLoader.test.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from "react";
|
||||
import { DataLoader } from "./DataLoader";
|
||||
import { act } from "@testing-library/react";
|
||||
import { render, unmountComponentAtNode } from "react-dom";
|
||||
|
||||
let container: HTMLDivElement;
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
unmountComponentAtNode(container);
|
||||
container.remove();
|
||||
});
|
||||
|
||||
describe("<DataLoader />", () => {
|
||||
it("render", async () => {
|
||||
const loader = () => Promise.resolve(["a", "b"]);
|
||||
await act(async () => {
|
||||
render(
|
||||
<DataLoader loader={loader}>
|
||||
{(data) => (
|
||||
<div>
|
||||
{data.map((d, i) => (
|
||||
<i key={i}>{d}</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</DataLoader>,
|
||||
container
|
||||
);
|
||||
});
|
||||
expect(container.textContent).toBe("ab");
|
||||
});
|
||||
});
|
||||
17
src/components/external-link/ExternalLink.test.tsx
Normal file
17
src/components/external-link/ExternalLink.test.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import { ExternalLink } from "./ExternalLink";
|
||||
|
||||
describe("<ExternalLink />", () => {
|
||||
it("render with link", () => {
|
||||
const comp = render(<ExternalLink href="http://hello.nl/" />);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("render with link and title", () => {
|
||||
const comp = render(
|
||||
<ExternalLink href="http://hello.nl/" title="Link to Hello" />
|
||||
);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ExternalLink /> render with link 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
href="http://hello.nl/"
|
||||
>
|
||||
http://hello.nl/
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<ExternalLink /> render with link and title 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
href="http://hello.nl/"
|
||||
>
|
||||
Link to Hello
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
45
src/components/help-enabler/HelpHeader.test.tsx
Normal file
45
src/components/help-enabler/HelpHeader.test.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import React, { useContext } from "react";
|
||||
import { render, act, fireEvent } from "@testing-library/react";
|
||||
import { HelpHeader, HelpContext } from "./HelpHeader";
|
||||
|
||||
describe("<HelpHeader />", () => {
|
||||
it("render", () => {
|
||||
const comp = render(<HelpHeader />);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("open dropdown", () => {
|
||||
const comp = render(<HelpHeader />);
|
||||
const button = document.querySelector("button");
|
||||
act(() => {
|
||||
fireEvent.click(button!);
|
||||
});
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("enable help", () => {
|
||||
const HelpEnabled = () => {
|
||||
const { enabled } = useContext(HelpContext);
|
||||
return <div id="result">{enabled ? "YES" : "NO"}</div>;
|
||||
};
|
||||
const comp = render(
|
||||
<>
|
||||
<HelpHeader />
|
||||
<HelpEnabled />
|
||||
</>
|
||||
);
|
||||
|
||||
const button = document.querySelector("button");
|
||||
act(() => {
|
||||
fireEvent.click(button!);
|
||||
});
|
||||
|
||||
const switchComp = document.querySelector("span.pf-c-switch__toggle");
|
||||
act(() => {
|
||||
fireEvent.click(switchComp!);
|
||||
});
|
||||
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
expect(document.getElementById("result")?.innerHTML).toBe("YES");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<HelpHeader /> enable help 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="pf-c-dropdown pf-m-align-right pf-m-expanded"
|
||||
data-ouia-component-id="5"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 64 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z"
|
||||
transform="rotate(180 0 512) scale(-1 1)"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="help"
|
||||
class="pf-c-dropdown__menu pf-m-align-right"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
id="link"
|
||||
role="menuitem"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
Documentation
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
id="enable"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
Enable help mode
|
||||
<label
|
||||
class="pf-c-switch"
|
||||
data-ouia-component-id="6"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<div>
|
||||
<small
|
||||
class=""
|
||||
data-pf-content="true"
|
||||
>
|
||||
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
id="result"
|
||||
>
|
||||
YES
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<HelpHeader /> open dropdown 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="pf-c-dropdown pf-m-align-right pf-m-expanded"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 64 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z"
|
||||
transform="rotate(180 0 512) scale(-1 1)"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="help"
|
||||
class="pf-c-dropdown__menu pf-m-align-right"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
id="link"
|
||||
role="menuitem"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
Documentation
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
id="enable"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
Enable help mode
|
||||
<label
|
||||
class="pf-c-switch"
|
||||
data-ouia-component-id="3"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<div>
|
||||
<small
|
||||
class=""
|
||||
data-pf-content="true"
|
||||
>
|
||||
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<HelpHeader /> render 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="pf-c-dropdown pf-m-align-right"
|
||||
data-ouia-component-id="0"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 64 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z"
|
||||
transform="rotate(180 0 512) scale(-1 1)"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
Loading…
Reference in a new issue