web tests for viewmode

web/src/components/__tests__/ViewOption.test.jsx

@@ -0,0 +1,71 @@
+import { h } from 'preact';
+import { render, screen, waitFor } from '@testing-library/preact';
+import { set as setData } from 'idb-keyval';
+import ViewOption from '../ViewOption';
+import { ViewModeProvider } from '../../context';
+import { ViewModeTypes } from '../ViewOptionEnum';
+import * as WS from '../../api/ws';
+
+describe('ViewOption', () => {
+  beforeEach(() => {
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
+  });
+
+  test('make sure children are visible with same modes', async () => {
+    const maxViewMode = (Object.keys(ViewModeTypes).filter(isNaN).length-1);
+    const maxViewModeHR = ViewModeTypes[maxViewMode];
+    setData('view-mode', maxViewMode);
+
+    render(
+      <ViewModeProvider>
+        <ViewOption requiredmode={maxViewModeHR}>
+          <div data-testid='children'>stuff</div>
+        </ViewOption>
+      </ViewModeProvider>
+    );
+
+    const el = await screen.findByTestId('children');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('make sure children are visible with max viewmode, and a small requiredmode', async () => {
+    const maxViewMode = (Object.keys(ViewModeTypes).filter(isNaN).length-1);
+    const lowViewModeHR = ViewModeTypes[1];
+    setData('view-mode', maxViewMode);
+
+    render(
+      <ViewModeProvider>
+        <ViewOption requiredmode={lowViewModeHR}>
+          <div data-testid='children'>stuff</div>
+        </ViewOption>
+      </ViewModeProvider>
+    );
+
+    const el = await screen.findByTestId('children');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('make sure children are hidden, due to failed requiredmode', async () => {
+    const maxViewMode = (Object.keys(ViewModeTypes).filter(isNaN).length-1);
+    const maxViewModeHR = ViewModeTypes[maxViewMode];
+    setData('view-mode', '0');
+
+    render(
+      <ViewModeProvider>
+        <ViewOption requiredmode={maxViewModeHR}>
+          <div data-testid='children'>stuff</div>
+        </ViewOption>
+        <div>bugfix</div>
+      </ViewModeProvider>
+    );
+
+    //without this, the test will always pass, even if setData('view-mode', '2') ... really strange behavior
+    await screen.findByText('bugfix');
+
+    await waitFor(() => {
+      expect(screen.queryByText('stuff')).not.toBeInTheDocument()
+    }, { timeout: 100 });
+    
+  });
+
+});

web/src/context/__tests__/index.test.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
-import { set as setData } from 'idb-keyval';
-import { DarkModeProvider, useDarkMode, usePersistence } from '..';
+import { set as setData, get as getData } from 'idb-keyval';
+import { DarkModeProvider, useDarkMode, usePersistence, ViewModeProvider, useViewMode } from '..';
+import { ViewModeTypes } from '../../components/ViewOptionEnum'
 import { fireEvent, render, screen } from 'testing-library';
 import { useCallback } from 'preact/hooks';
 import * as WS from '../../api/ws';
@@ -195,3 +196,79 @@ describe('usePersistence', () => {
     `);
   });
 });
+
+function ViewModeChecker() {
+  const { currentViewMode } = useViewMode();
+  return <div data-testid={currentViewMode}>{currentViewMode}</div>;
+}
+
+describe('ViewMode', () => {
+  beforeEach(() => {
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
+  });
+
+  test('uses admin mode (max of enum) due to invalid config', async () => {
+    setData('view-mode', null);
+
+    render(
+      <ViewModeProvider>
+        <ViewModeChecker />
+      </ViewModeProvider>
+    );
+
+    const maxViewMode = (Object.keys(ViewModeTypes).filter(isNaN).length-1);
+    const el = await screen.findByTestId(maxViewMode);
+    expect(el).toBeInTheDocument();
+  });
+
+  Object.keys(ViewModeTypes).filter((v) => !isNaN(Number(v))).map(key => 
+    test(`uses a viewmode option that is stored in idb - ${ViewModeTypes[key]}`, async () => {
+      setData('view-mode', key);
+
+      render(
+        <ViewModeProvider>
+          <ViewModeChecker />
+        </ViewModeProvider>
+      );
+
+      const el = await screen.findByTestId(key);
+      expect(el).toBeInTheDocument();
+    })
+  )
+
+  test('update viewmode live, using setViewMode from context and verify idb save', async () => {
+    setData('view-mode', null);
+
+    function Updater() {
+      const { setViewMode } = useViewMode();
+      const handleClick = useCallback((value) => {
+        setViewMode(value.button.toString());
+      }, [setViewMode]);
+      return <div onClick={handleClick}>click me</div>;
+    }
+
+    render(
+      <ViewModeProvider>
+        <ViewModeChecker />
+        <Updater />
+      </ViewModeProvider>
+    );
+
+    const button = await screen.findByText('click me');
+    const maxViewMode = (Object.keys(ViewModeTypes).filter(isNaN).length-1);
+
+    fireEvent.click(button, {button: '0'});
+    const minmode = await screen.findByTestId('0');
+    expect(minmode).toBeInTheDocument();
+
+    const minmodeidb = await getData('view-mode');
+    expect(minmodeidb).toEqual('0')
+
+    fireEvent.click(button, {button: maxViewMode});
+    const maxmode = await screen.findByTestId(maxViewMode);
+    expect(maxmode).toBeInTheDocument();
+
+    const maxmodeidb = await getData('view-mode');
+    expect(maxmodeidb).toEqual(maxViewMode.toString());
+  });
+});