chore: add tests for offline mode

Check useIsOnline hook's events
Ensure offlineEnabled correctly handled
Ensure offline badge is displayed

Author: grega

src/components/SaveButton/SaveButton.test.js

@@ -5,13 +5,21 @@ import configureStore from "redux-mock-store";
 import { triggerSave } from "../../redux/EditorSlice";
 import SaveButton from "./SaveButton";
 
+jest.mock("../../hooks/useIsOnline");
+
+import useIsOnline from "../../hooks/useIsOnline";
+
 const logInHandler = jest.fn();
 
 describe("When project is loaded", () => {
   beforeAll(() => {
     document.addEventListener("editor-logIn", logInHandler);
   });
 
+  beforeEach(() => {
+    useIsOnline.mockReturnValue(true);
+  });
+
   describe("With logged in user", () => {
     let store;
 
@@ -204,6 +212,69 @@ describe("When project is loaded", () => {
     });
   });
 
+  describe("offline badge", () => {
+    const offlineState = {
+      editor: {
+        loading: "success",
+        webComponent: true,
+        offlineEnabled: true,
+        project: {},
+      },
+      auth: {},
+    };
+
+    beforeEach(() => {
+      useIsOnline.mockReturnValue(false);
+    });
+
+    test("shows offline badge when offline and offlineEnabled is true", () => {
+      const store = configureStore([])(offlineState);
+      render(
+        <Provider store={store}>
+          <SaveButton />
+        </Provider>,
+      );
+      expect(screen.queryByText("header.offline")).toBeInTheDocument();
+    });
+
+    test("does not show offline badge when offlineEnabled is false", () => {
+      const store = configureStore([])({
+        ...offlineState,
+        editor: { ...offlineState.editor, offlineEnabled: false },
+      });
+      render(
+        <Provider store={store}>
+          <SaveButton />
+        </Provider>,
+      );
+      expect(screen.queryByText("header.offline")).not.toBeInTheDocument();
+    });
+
+    test("does not show offline badge when online, even if offlineEnabled is true", () => {
+      useIsOnline.mockReturnValue(true);
+      const store = configureStore([])(offlineState);
+      render(
+        <Provider store={store}>
+          <SaveButton />
+        </Provider>,
+      );
+      expect(screen.queryByText("header.offline")).not.toBeInTheDocument();
+    });
+
+    test("does not show offline badge when user is logged in", () => {
+      const store = configureStore([])({
+        ...offlineState,
+        auth: { user: { profile: { user: "some-user" } } },
+      });
+      render(
+        <Provider store={store}>
+          <SaveButton />
+        </Provider>,
+      );
+      expect(screen.queryByText("header.offline")).not.toBeInTheDocument();
+    });
+  });
+
   afterAll(() => {
     document.removeEventListener("editor-logIn", logInHandler);
   });

src/hooks/useIsOnline.test.js

@@ -0,0 +1,77 @@
+import { act, renderHook } from "@testing-library/react";
+import useIsOnline from "./useIsOnline";
+
+const dispatchWindowEvent = (type) => {
+  act(() => {
+    window.dispatchEvent(new Event(type));
+  });
+};
+
+describe("useIsOnline", () => {
+  let swEventTarget;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, "onLine", {
+      configurable: true,
+      get: () => true,
+    });
+
+    // jsdom doesn't implement navigator.serviceWorker so provide a minimal stub
+    swEventTarget = new EventTarget();
+    Object.defineProperty(navigator, "serviceWorker", {
+      configurable: true,
+      value: swEventTarget,
+    });
+  });
+
+  const dispatchSWMessage = (data) => {
+    act(() => {
+      swEventTarget.dispatchEvent(new MessageEvent("message", { data }));
+    });
+  };
+
+  test("returns true when navigator.onLine is true", () => {
+    const { result } = renderHook(() => useIsOnline());
+    expect(result.current).toBe(true);
+  });
+
+  test("returns false when navigator.onLine is false", () => {
+    Object.defineProperty(navigator, "onLine", {
+      configurable: true,
+      get: () => false,
+    });
+    const { result } = renderHook(() => useIsOnline());
+    expect(result.current).toBe(false);
+  });
+
+  test("updates to false when the offline window event fires", () => {
+    const { result } = renderHook(() => useIsOnline());
+    expect(result.current).toBe(true);
+    dispatchWindowEvent("offline");
+    expect(result.current).toBe(false);
+  });
+
+  test("updates to true when the online window event fires", () => {
+    Object.defineProperty(navigator, "onLine", {
+      configurable: true,
+      get: () => false,
+    });
+    const { result } = renderHook(() => useIsOnline());
+    expect(result.current).toBe(false);
+    dispatchWindowEvent("online");
+    expect(result.current).toBe(true);
+  });
+
+  test("updates to false when the service worker broadcasts OFFLINE", () => {
+    const { result } = renderHook(() => useIsOnline());
+    expect(result.current).toBe(true);
+    dispatchSWMessage({ type: "OFFLINE" });
+    expect(result.current).toBe(false);
+  });
+
+  test("ignores service worker messages with a different type", () => {
+    const { result } = renderHook(() => useIsOnline());
+    dispatchSWMessage({ type: "OTHER" });
+    expect(result.current).toBe(true);
+  });
+});

src/redux/EditorSlice.test.js

@@ -11,6 +11,7 @@ import reducer, {
   setIsOutputOnly,
   setErrorDetails,
   setReadOnly,
+  setOfflineEnabled,
   addProjectComponent,
   updateProjectComponent,
   setCascadeUpdate,
@@ -113,6 +114,12 @@ test("Action setReadOnly correctly sets readOnly", () => {
   expect(reducer(previousState, setReadOnly(true))).toEqual(expectedState);
 });
 
+test("Action setOfflineEnabled correctly sets offlineEnabled", () => {
+  const previousState = { offlineEnabled: false };
+  const expectedState = { offlineEnabled: true };
+  expect(reducer(previousState, setOfflineEnabled(true))).toEqual(expectedState);
+});
+
 test("Action addProjectComponent adds component to project with correct content", () => {
   const previousState = {
     project: {