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

Format all files with Prettier

Browse Source
This commit is contained in:
Aleksandr Gumroian
2020-08-18 15:39:00 +02:00
parent e41da48b1a
commit f8726e6012
80 changed files with 933 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/form/__tests__/SubmitButton.test.js
View File

@ -13,17 +13,14 @@ import { STATES, SubmitButton } from "../components/SubmitButton";
describe("<SubmitButton/>", () => {
it("Render ready", () => {
const { container } = render(<SubmitButton state={STATES.READY} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
it("Render saving", () => {
const { container } = render(<SubmitButton state={STATES.SAVING} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
it("Render load", () => {
const { container } = render(<SubmitButton state={STATES.LOAD} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
});

6
src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
View File

@ -13,8 +13,6 @@ exports[`<SubmitButton/> Render load 1`] = `
role="status"
/>
Load settings
</button>
</div>
@ -26,8 +24,6 @@ exports[`<SubmitButton/> Render ready 1`] = `
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
type="submit"
>
Save
</button>
</div>
@ -46,8 +42,6 @@ exports[`<SubmitButton/> Render saving 1`] = `
role="status"
/>
Updating
</button>
</div>

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

@ -7,9 +7,7 @@
import React from "react";
import {
act, fireEvent, render, waitForElement,
} from "customTestRender";
import { act, fireEvent, render, waitForElement } from "customTestRender";
import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets";
import { ForisForm } from "../components/ForisForm";
@ -38,8 +36,12 @@ describe("useForm hook.", () => {
beforeEach(async () => {
mockPrepData = jest.fn(() => ({ field: "preparedData" }));
mockPrepDataToSubmit = jest.fn(() => ({ field: "preparedDataToSubmit" }));
mockValidator = jest.fn((data) => (data.field === "invalidValue" ? { field: "Error" } : {}));
mockPrepDataToSubmit = jest.fn(() => ({
field: "preparedDataToSubmit",
}));
mockValidator = jest.fn((data) =>
data.field === "invalidValue" ? { field: "Error" } : {}
);
const { getByTestId, container } = render(
<ForisForm
ws={new WebSockets()}
@ -53,7 +55,7 @@ describe("useForm hook.", () => {
validator={mockValidator}
>
<Child />
</ForisForm>,
</ForisForm>
);
mockAxios.mockResponse({ field: "fetchedData" });
@ -67,16 +69,22 @@ describe("useForm hook.", () => {
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" } });
fireEvent.change(input, {
target: { value: "newValue", type: "text" },
});
expect(input.value).toBe("newValue");
});
@ -86,14 +94,21 @@ describe("useForm hook.", () => {
});
it("Update checkbox value.", () => {
fireEvent.change(input, { target: { checked: true, type: "checkbox" } });
fireEvent.change(input, {
target: { checked: true, type: "checkbox" },
});
expect(input.checked).toBe(true);
});
it("Fetch data.", () => {
expect(mockAxios.get).toHaveBeenCalledWith("testEndpoint", expect.anything());
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.", () => {
@ -107,7 +122,7 @@ describe("useForm hook.", () => {
expect(mockAxios.post).toHaveBeenCalledWith(
"testEndpoint",
{ field: "preparedDataToSubmit" },
expect.anything(),
expect.anything()
);
});
});

131
src/form/__tests__/validation.test.js
View File

@ -16,120 +16,75 @@ import {
describe("Validation functions", () => {
it("validateIPv4Address valid", () => {
expect(validateIPv4Address("192.168.1.1"))
.toBe(undefined);
expect(validateIPv4Address("1.1.1.1"))
.toBe(undefined);
expect(validateIPv4Address("0.0.0.0"))
.toBe(undefined);
expect(validateIPv4Address("192.168.1.1")).toBe(undefined);
expect(validateIPv4Address("1.1.1.1")).toBe(undefined);
expect(validateIPv4Address("0.0.0.0")).toBe(undefined);
});
it("validateIPv4Address invalid", () => {
expect(validateIPv4Address("invalid"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.256.1.1"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.256.1"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.1.256"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.1.256"))
.not
.toBe(undefined);
expect(validateIPv4Address("invalid")).not.toBe(undefined);
expect(validateIPv4Address("192.256.1.1")).not.toBe(undefined);
expect(validateIPv4Address("192.168.256.1")).not.toBe(undefined);
expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
});
it("validateIPv6Address valid", () => {
expect(validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
.toBe(undefined);
expect(validateIPv6Address("0:0:0:0:0:0:0:1"))
.toBe(undefined);
expect(validateIPv6Address("::1"))
.toBe(undefined);
expect(validateIPv6Address("::"))
.toBe(undefined);
expect(
validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
).toBe(undefined);
expect(validateIPv6Address("0:0:0:0:0:0:0:1")).toBe(undefined);
expect(validateIPv6Address("::1")).toBe(undefined);
expect(validateIPv6Address("::")).toBe(undefined);
});
it("validateIPv6Address invalid", () => {
expect(validateIPv6Address("invalid"))
.not
.toBe(undefined);
expect(validateIPv6Address("1.1.1.1"))
.not
.toBe(undefined);
expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313"))
.not
.toBe(undefined);
expect(validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313"))
.not
.toBe(undefined);
expect(validateIPv6Address("invalid")).not.toBe(undefined);
expect(validateIPv6Address("1.1.1.1")).not.toBe(undefined);
expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313")).not.toBe(
undefined
);
expect(
validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313")
).not.toBe(undefined);
});
it("validateIPv6Prefix valid", () => {
expect(validateIPv6Prefix("2002:0000::/16"))
.toBe(undefined);
expect(validateIPv6Prefix("0::/0"))
.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/16")).toBe(undefined);
expect(validateIPv6Prefix("0::/0")).toBe(undefined);
});
it("validateIPv6Prefix invalid", () => {
expect(validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
.not
.toBe(undefined);
expect(validateIPv6Prefix("::1"))
.not
.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/999"))
.not
.toBe(undefined);
expect(
validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
).not.toBe(undefined);
expect(validateIPv6Prefix("::1")).not.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/999")).not.toBe(undefined);
});
it("validateDomain valid", () => {
expect(validateDomain("example.com"))
.toBe(undefined);
expect(validateDomain("one.two.three"))
.toBe(undefined);
expect(validateDomain("example.com")).toBe(undefined);
expect(validateDomain("one.two.three")).toBe(undefined);
});
it("validateDomain invalid", () => {
expect(validateDomain("test/"))
.not
.toBe(undefined);
expect(validateDomain("."))
.not
.toBe(undefined);
expect(validateDomain("test/")).not.toBe(undefined);
expect(validateDomain(".")).not.toBe(undefined);
});
it("validateDUID valid", () => {
expect(validateDUID("abcdefAB"))
.toBe(undefined);
expect(validateDUID("ABCDEF12"))
.toBe(undefined);
expect(validateDUID("ABCDEF12AB"))
.toBe(undefined);
expect(validateDUID("abcdefAB")).toBe(undefined);
expect(validateDUID("ABCDEF12")).toBe(undefined);
expect(validateDUID("ABCDEF12AB")).toBe(undefined);
});
it("validateDUID invalid", () => {
expect(validateDUID("gggggggg"))
.not
.toBe(undefined);
expect(validateDUID("abcdefABa"))
.not
.toBe(undefined);
expect(validateDUID("gggggggg")).not.toBe(undefined);
expect(validateDUID("abcdefABa")).not.toBe(undefined);
});
it("validateMAC valid", () => {
expect(validateMAC("00:D0:56:F2:B5:12"))
.toBe(undefined);
expect(validateMAC("00:26:DD:14:C4:EE"))
.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00"))
.toBe(undefined);
expect(validateMAC("00:D0:56:F2:B5:12")).toBe(undefined);
expect(validateMAC("00:26:DD:14:C4:EE")).toBe(undefined);
expect(validateMAC("06:00:00:00:00:00")).toBe(undefined);
});
it("validateMAC invalid", () => {
expect(validateMAC("00:00:00:00:00:0G"))
.not
.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00:00"))
.not
.toBe(undefined);
expect(validateMAC("00:00:00:00:00:0G")).not.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00:00")).not.toBe(undefined);
});
});

49
src/form/components/ForisForm.js
View File

@ -52,19 +52,25 @@ ForisForm.propTypes = {
onSubmitOverridden: PropTypes.func,
/** Reference to actual form element (useful for programmatically submitting it).
* Pass the output of useRef hook to this prop.
*/
*/
formReference: PropTypes.object,
/** reForis form components. */
children: PropTypes.node.isRequired,
// eslint-disable-next-line react/no-unused-prop-types
customWSProp(props) {
const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
const wsModuleIsSpecified = !!(
props.forisConfig && props.forisConfig.wsModule
);
if (props.ws && !wsModuleIsSpecified) {
return new Error("forisConfig.wsModule should be specified when ws object is passed.");
return new Error(
"forisConfig.wsModule should be specified when ws object is passed."
);
}
if (!props.ws && wsModuleIsSpecified) {
return new Error("forisConfig.wsModule is specified without passing ws object.");
return new Error(
"forisConfig.wsModule is specified without passing ws object."
);
}
},
};
@ -95,7 +101,10 @@ export function ForisForm({
formReference,
children,
}) {
const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
const [formState, onFormChangeHandler, resetFormData] = useForm(
validator,
prepData
);
const [setAlert, dismissAlert] = useAlert();
const [forisModuleState] = useForisModule(ws, forisConfig);
@ -141,29 +150,39 @@ export function ForisForm({
return SUBMIT_BUTTON_STATES.READY;
}
const formIsDisabled = (disabled
|| forisModuleState.state === API_STATE.SENDING
|| postState.state === API_STATE.SENDING);
const formIsDisabled =
disabled ||
forisModuleState.state === API_STATE.SENDING ||
postState.state === API_STATE.SENDING;
const submitButtonIsDisabled = disabled || !!formState.errors;
const childrenWithFormProps = React.Children.map(
children,
(child) => React.cloneElement(child, {
const childrenWithFormProps = React.Children.map(children, (child) =>
React.cloneElement(child, {
initialData: formState.initialData,
formData: formState.data,
formErrors: formState.errors,
setFormValue: onFormChangeHandler,
disabled: formIsDisabled,
}),
})
);
const onSubmit = onSubmitOverridden
? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
? onSubmitOverridden(
formState.data,
onFormChangeHandler,
onSubmitHandler
)
: onSubmitHandler;
function getMessageOnLeavingPage() {
if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData)) return true;
return _("Changes you made may not be saved. Are you sure you want to leave?");
if (
JSON.stringify(formState.data) ===
JSON.stringify(formState.initialData)
)
return true;
return _(
"Changes you made may not be saved. Are you sure you want to leave?"
);
}
return (

53
src/form/components/ForisForm.md
View File

@ -1,8 +1,11 @@
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
This component structure provides comfort API and allows to create typical Foris module forms easily.
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic
and provides with children required props. This component structure provides
comfort API and allows to create typical Foris module forms easily.
## Example of usage of `<ForisForm/>`
You can pass more forms as children.
```js
<ForisForm
ws={ws}
@ -24,7 +27,10 @@ You can pass more forms as children.
```js
export default function MACForm({
formData, formErrors, setFormValue, ...props
formData,
formErrors,
setFormValue,
...props
}) {
const macSettings = formData.mac_settings;
const errors = (formErrors || {}).mac_settings || {};
@ -35,38 +41,33 @@ export default function MACForm({
label={_("Custom MAC address")}
checked={macSettings.custom_mac_enabled}
helpText={HELP_TEXTS.custom_mac_enabled}
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
)}
onChange={setFormValue((value) => ({
mac_settings: { custom_mac_enabled: { $set: value } },
}))}
{...props}
/>
{macSettings.custom_mac_enabled
? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac: { $set: value } } }),
)}
{...props}
/>
)
: null}
{macSettings.custom_mac_enabled ? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue((value) => ({
mac_settings: { custom_mac: { $set: value } },
}))}
{...props}
/>
) : null}
</>
);
}
```
The <ForisForm/> passes subsequent `props` to the child components.
| Prop | Type | Description |
|----------------|--------|----------------------------------------------------------------------------|
| -------------- | ------ | -------------------------------------------------------------------------- |
| `formData` | object | Data returned from API. |
| `formErrors` | object | Errors returned after validation via validator. |
| `setFormValue` | func | Function for data update. It takes update rule as arg (see example above). |

20
src/form/components/SubmitButton.js
View File

@ -18,8 +18,7 @@ export const STATES = {
SubmitButton.propTypes = {
disabled: PropTypes.bool,
state: PropTypes.oneOf(Object.keys(STATES)
.map((key) => STATES[key])),
state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
};
export function SubmitButton({ disabled, state, ...props }) {
@ -28,14 +27,14 @@ export function SubmitButton({ disabled, state, ...props }) {
let labelSubmitButton;
switch (state) {
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
}
return (
@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
loading={loadingSubmitButton}
disabled={disableSubmitButton}
forisFormSize
{...props}
>
{labelSubmitButton}

90
src/form/hooks.js
View File

@ -23,57 +23,61 @@ export function useForm(validator, dataPreprocessor) {
errors: {},
});
const onFormReload = useCallback((data) => {
dispatch({
type: FORM_ACTIONS.resetData,
data,
dataPreprocessor,
validator,
});
}, [dataPreprocessor, validator]);
const onFormReload = useCallback(
(data) => {
dispatch({
type: FORM_ACTIONS.resetData,
data,
dataPreprocessor,
validator,
});
},
[dataPreprocessor, validator]
);
const onFormChangeHandler = useCallback((updateRule) => (event) => {
dispatch({
type: FORM_ACTIONS.updateValue,
value: getChangedValue(event.target),
updateRule,
validator,
});
}, [validator]);
const onFormChangeHandler = useCallback(
(updateRule) => (event) => {
dispatch({
type: FORM_ACTIONS.updateValue,
value: getChangedValue(event.target),
updateRule,
validator,
});
},
[validator]
);
return [
state,
onFormChangeHandler,
onFormReload,
];
return [state, onFormChangeHandler, onFormReload];
}
function formReducer(state, action) {
switch (action.type) {
case FORM_ACTIONS.updateValue: {
const newData = update(state.data, action.updateRule(action.value));
const errors = action.validator(newData);
return {
...state,
data: newData,
errors,
};
}
case FORM_ACTIONS.resetData: {
if (!action.data) {
return { ...state, initialData: state.data };
case FORM_ACTIONS.updateValue: {
const newData = update(state.data, action.updateRule(action.value));
const errors = action.validator(newData);
return {
...state,
data: newData,
errors,
};
}
case FORM_ACTIONS.resetData: {
if (!action.data) {
return { ...state, initialData: state.data };
}
const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
return {
data,
initialData: data,
errors: action.data ? action.validator(data) : undefined,
};
}
default: {
throw new Error();
}
const data = action.dataPreprocessor
? action.dataPreprocessor(action.data)
: action.data;
return {
data,
initialData: data,
errors: action.data ? action.validator(data) : undefined,
};
}
default: {
throw new Error();
}
}
}