GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-16 13:46:16 +02:00
Code Issues Releases Activity

Wi-Fi settings form

Browse Source
This commit is contained in:
Maciej Lenartowicz
2020-01-09 11:25:29 +01:00
parent 9dcc689491
commit 5fd0d3626a
33 changed files with 2913 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/form/__tests__/hooks.test.js
View File

@ -5,99 +5,98 @@
* See /LICENSE for more information.
*/
import React from 'react';
import React from "react";
import { act, fireEvent, render, waitForElement } from 'customTestRender';
import mockAxios from 'jest-mock-axios';
import { ForisForm } from "../components/ForisForm";
import {
act, fireEvent, render, waitForElement,
} from "customTestRender";
import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets";
import { ForisForm } from "../components/ForisForm";
// It's possible to unittest each hooks via react-hooks-testing-library.
// But it's better and easier to test it by test components which uses this hooks.
const TestForm = ({formData, formErrors, setFormValue}) => {
return <>
const TestForm = ({ formData, formErrors, setFormValue }) => (
<>
<input
data-testid='test-input'
data-testid="test-input"
value={formData.field}
onChange={setFormValue(value => ({field: {$set: value}}))}
onChange={setFormValue((value) => ({ field: { $set: value } }))}
/>
<p>{formErrors.field}</p>
</>
};
);
describe('useForm hook.', () => {
describe("useForm hook.", () => {
let mockValidator;
let mockPrepData;
let mockPrepDataToSubmit;
let input;
let form;
const Child = jest.fn(props => <TestForm {...props}/>);
const Child = jest.fn((props) => <TestForm {...props} />);
beforeEach(async () => {
mockPrepData = jest.fn(() => ({field: 'preparedData'}));
mockPrepDataToSubmit = jest.fn(() => ({field: 'preparedDataToSubmit'}));
mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {});
const {getByTestId, container} = render(
mockPrepData = jest.fn(() => ({ field: "preparedData" }));
mockPrepDataToSubmit = jest.fn(() => ({ field: "preparedDataToSubmit" }));
mockValidator = jest.fn((data) => (data.field === "invalidValue" ? { field: "Error" } : {}));
const { getByTestId, container } = render(
<ForisForm
ws={new WebSockets()}
// Just some module which exists...
forisConfig={{
endpoint: 'testEndpoint',
wsModule: 'testWSModule'
endpoint: "testEndpoint",
wsModule: "testWSModule",
}}
prepData={mockPrepData}
prepDataToSubmit={mockPrepDataToSubmit}
validator={mockValidator}
>
<Child/>
</ForisForm>
<Child />
</ForisForm>,
);
mockAxios.mockResponse({field: 'fetchedData'});
mockAxios.mockResponse({ field: "fetchedData" });
input = await waitForElement(() =>
getByTestId('test-input')
);
input = await waitForElement(() => getByTestId("test-input"));
form = container.firstChild.firstChild;
});
it('Validation on changing.', () => {
it("Validation on changing.", () => {
expect(mockValidator).toHaveBeenCalledTimes(1);
expect(Child).toHaveBeenCalledTimes(1);
expect(Child.mock.calls[0][0].formErrors).toMatchObject({});
act(() => {
fireEvent.change(input, {target: {value: 'invalidValue', type: 'text'}});
fireEvent.change(input, { target: { value: "invalidValue", type: "text" } });
});
expect(Child).toHaveBeenCalledTimes(2);
expect(mockValidator).toHaveBeenCalledTimes(2);
expect(Child.mock.calls[1][0].formErrors).toMatchObject({field: 'Error'});
expect(Child.mock.calls[1][0].formErrors).toMatchObject({ field: "Error" });
});
it('Update text value.', () => {
fireEvent.change(input, {target: {value: 'newValue', type: 'text'}})
expect(input.value).toBe('newValue');
it("Update text value.", () => {
fireEvent.change(input, { target: { value: "newValue", type: "text" } });
expect(input.value).toBe("newValue");
});
it('Update text value.', () => {
fireEvent.change(input, {target: {value: 123, type: 'number'}})
expect(input.value).toBe('123');
it("Update text value.", () => {
fireEvent.change(input, { target: { value: 123, type: "number" } });
expect(input.value).toBe("123");
});
it('Update checkbox value.', () => {
fireEvent.change(input, {target: {checked: true, type: 'checkbox'}})
it("Update checkbox value.", () => {
fireEvent.change(input, { target: { checked: true, type: "checkbox" } });
expect(input.checked).toBe(true);
});
it('Fetch data.', () => {
expect(mockAxios.get).toHaveBeenCalledWith('testEndpoint', expect.anything());
it("Fetch data.", () => {
expect(mockAxios.get).toHaveBeenCalledWith("testEndpoint", expect.anything());
expect(mockPrepData).toHaveBeenCalledTimes(1);
expect(Child.mock.calls[0][0].formData).toMatchObject({field: 'preparedData'});
expect(Child.mock.calls[0][0].formData).toMatchObject({ field: "preparedData" });
});
it('Submit.', () => {
it("Submit.", () => {
expect(mockAxios.get).toHaveBeenCalledTimes(1);
expect(mockPrepDataToSubmit).toHaveBeenCalledTimes(0);
@ -106,8 +105,8 @@ describe('useForm hook.', () => {
expect(mockPrepDataToSubmit).toHaveBeenCalledTimes(1);
expect(mockAxios.post).toHaveBeenCalledTimes(1);
expect(mockAxios.post).toHaveBeenCalledWith(
'testEndpoint',
{'field': 'preparedDataToSubmit'},
"testEndpoint",
{ field: "preparedDataToSubmit" },
expect.anything(),
);
});