Merge branch 'add-customization-context' into 'dev'

Draft: Add CustomizationContext and custom hook

See merge request turris/reforis/foris-js!183

Makefile

@@ -97,6 +97,8 @@ test-js-watch:
 .PHONY: test-js-update-snapshots
 test-js-update-snapshots:
 	npm test -- -u
+test-js-watch:
+	npm test -- --watch
 
 
 # Translations

package-lock.json

@@ -4874,20 +4874,14 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001441",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
-            "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
+            "version": "1.0.30001309",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
+            "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==",
             "dev": true,
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/browserslist"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-                }
-            ]
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/browserslist"
+            }
         },
         "node_modules/capture-exit": {
             "version": "2.0.0",
@@ -22837,9 +22831,9 @@
             "dev": true
         },
         "caniuse-lite": {
-            "version": "1.0.30001441",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
-            "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
+            "version": "1.0.30001309",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
+            "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==",
             "dev": true
         },
         "capture-exit": {

src/alertContext/AlertContext.js

@@ -8,8 +8,8 @@
 import React, { useState, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { Alert, ALERT_TYPES } from "../../bootstrap/Alert";
-import { Portal } from "../../utils/Portal";
+import { Alert, ALERT_TYPES } from "../bootstrap/Alert";
+import { Portal } from "../utils/Portal";
 
 AlertContextProvider.propTypes = {
     children: PropTypes.oneOfType([

src/common/RebootButton.js

@@ -14,7 +14,7 @@ import { ForisURLs } from "../utils/forisUrls";
 
 import { Button } from "../bootstrap/Button";
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
-import { useAlert } from "../context/alertContext/AlertContext";
+import { useAlert } from "../alertContext/AlertContext";
 
 export function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -9,7 +9,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
 import { Button } from "../../bootstrap/Button";
-import { useAlert } from "../../context/alertContext/AlertContext";
+import { useAlert } from "../../alertContext/AlertContext";
 import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";

src/customizationContext/CustomizationContext.js

@@ -8,10 +8,10 @@
 import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { useAPIGet } from "../../api/hooks";
-import { ForisURLs } from "../../utils/forisUrls";
+import { useAPIGet } from "../api/hooks";
+import { ForisURLs } from "../utils/forisUrls";
 
-import { Spinner } from "../../bootstrap/Spinner";
+import { Spinner } from "../bootstrap/Spinner";
 
 CustomizationContextProvider.propTypes = {
     children: PropTypes.oneOfType([

src/customizationContext/__tests__/CustomizationContext.test.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { render, wait, getByText } from "customTestRender";
+import { render, wait } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 
 import {
@@ -18,35 +18,39 @@ import {
 const CUSTOM = "Description / component for customized reForis (Shield)";
 const ORIGINAL = "Description / component for original reForis (other devices)";
 
-const CustomizationTest = () => {
-    const { isCustomized } = useCustomizationContext();
+function CustomizationTest() {
+    const isCustomized = useCustomizationContext();
 
     return <p>{isCustomized ? CUSTOM : ORIGINAL}</p>;
-};
+}
 
 describe("CustomizationContext", () => {
     let componentContainer;
-    beforeEach(() => {
-        const { container } = render(
+
+    it("should render component without customization", async () => {
+        const { container, getByText } = render(
             <CustomizationContextProvider>
                 <CustomizationTest />
             </CustomizationContextProvider>
         );
         componentContainer = container;
-    });
 
-    it("should render component without customization", async () => {
         mockAxios.mockResponse({ data: {} });
-
-        await wait(() => getByText(componentContainer, ORIGINAL));
+        await wait(() => getByText(ORIGINAL));
 
         expect(componentContainer).toMatchSnapshot();
     });
 
     it("should render customized component", async () => {
-        mockAxios.mockResponse({ data: { customization: "shield" } });
+        const { container, getByText } = render(
+            <CustomizationContextProvider>
+                <CustomizationTest />
+            </CustomizationContextProvider>
+        );
+        componentContainer = container;
 
-        await wait(() => getByText(componentContainer, CUSTOM));
+        mockAxios.mockResponse({ data: { customization: "shield" } });
+        await wait(() => getByText(CUSTOM));
 
         expect(componentContainer).toMatchSnapshot();
     });

src/form/components/ForisForm.js

@@ -13,7 +13,7 @@ import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { API_STATE } from "../../api/utils";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
-import { useAlert } from "../../context/alertContext/AlertContext";
+import { useAlert } from "../../alertContext/AlertContext";
 import { useAPIPost } from "../../api/hooks";
 
 import { useForisModule, useForm } from "../hooks";

src/index.js

@@ -90,13 +90,10 @@ export {
 } from "./utils/validations";
 
 // Alert context
-export {
-    AlertContextProvider,
-    useAlert,
-} from "./context/alertContext/AlertContext";
+export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";
 
 // Customization context
 export {
     CustomizationContextProvider,
     useCustomizationContext,
-} from "./context/customizationContext/CustomizationContext";
+} from "./customizationContext/CustomizationContext";

src/testUtils/cutomizationContextMock.js

@@ -9,12 +9,11 @@ import React from "react";
 
 window.CustomizationContext = React.createContext();
 
-const deviceDetails = {};
 const isCustomized = jest.fn();
 
 function CustomizationContextMock({ children }) {
     return (
-        <CustomizationContext.Provider value={(deviceDetails, isCustomized)}>
+        <CustomizationContext.Provider value={isCustomized}>
             {children}
         </CustomizationContext.Provider>
     );

styleguide.config.js

@@ -43,7 +43,7 @@ module.exports = {
                 },
                 {
                     name: "Alert Context",
-                    components: ["src/context/alertContext/AlertContext.js"],
+                    components: ["src/alertContext/AlertContext.js"],
                     exampleMode: "expand",
                     usageMode: "expand",
                 },
@@ -53,9 +53,7 @@ module.exports = {
 
         {
             name: "Customization Context",
-            components: [
-                "src/context/customizationContext/CustomizationContext.js",
-            ],
+            components: ["src/customizationContext/CustomizationContext.js"],
             exampleMode: "expand",
             usageMode: "expand",
         },