stories: add stories for the Settings page

app/src/__stories__/SettingsPage.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Layout } from 'components/layout';
+import SettingsPage from 'components/settings/SettingsPage';
+
+export default {
+  title: 'Pages/Settings',
+  component: SettingsPage,
+  parameters: { contained: true },
+};
+
+export const Default = () => {
+  return <SettingsPage />;
+};
+
+export const InsideLayout = () => {
+  return (
+    <Layout>
+      <SettingsPage />
+    </Layout>
+  );
+};

app/src/__stories__/StoryWrapper.tsx

@@ -1,8 +1,9 @@
 import React, { CSSProperties, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
-import MockAppStorage from 'util/tests/mockAppStorage';
+import { BalanceMode, Unit } from 'util/constants';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
+import { PersistentSettings } from 'store/stores/settingsStore';
 import { Background } from 'components/common/base';
 import { ThemeProvider } from 'components/theme';
 
@@ -17,9 +18,19 @@ const grpc = {
   },
 };
 
+// fake the AppStorage dependency so that settings aren't shared across stories
+class StoryAppStorage {
+  set = () => undefined;
+  get = (): PersistentSettings => ({
+    sidebarVisible: true,
+    unit: Unit.sats,
+    balanceMode: BalanceMode.receive,
+  });
+}
+
 // Create a store that pulls data from the mock GRPC and doesn't use
 // the real localStorage to save settings
-const createStoryStore = () => createStore(grpc, new MockAppStorage());
+const createStoryStore = () => createStore(grpc, new StoryAppStorage());
 
 /**
  * This component is used to wrap every story. It provides the app theme

app/src/__tests__/store/settingsStore.spec.ts

@@ -1,6 +1,9 @@
+import AppStorage from 'util/appStorage';
 import { BalanceMode, Unit } from 'util/constants';
-import { mockStorageGet } from 'util/tests/mockAppStorage';
 import { createStore, SettingsStore } from 'store';
+import { PersistentSettings } from 'store/stores/settingsStore';
+
+const appStorageMock = AppStorage as jest.Mock<AppStorage<PersistentSettings>>;
 
 describe('SettingsStore', () => {
   let store: SettingsStore;
@@ -10,7 +13,8 @@ describe('SettingsStore', () => {
   });
 
   it('should load settings', async () => {
-    mockStorageGet.mockImplementation(() => ({
+    const getMock = appStorageMock.mock.instances[0].get as jest.Mock;
+    getMock.mockImplementation(() => ({
       sidebarVisible: false,
       unit: Unit.bits,
       balanceMode: BalanceMode.routing,
@@ -24,7 +28,8 @@ describe('SettingsStore', () => {
   });
 
   it('should do nothing if nothing is saved in storage', () => {
-    mockStorageGet.mockReturnValue(undefined as any);
+    const getMock = appStorageMock.mock.instances[0].get as jest.Mock;
+    getMock.mockReturnValue(undefined as any);
 
     store.load();
 

app/src/setupTests.ts

@@ -9,10 +9,9 @@ import '@testing-library/jest-dom/extend-expect';
 import './i18n';
 // adds support for lottie-web animations in unit test env
 import 'jest-canvas-mock';
-// don't use the real localStorage in unit tests
-import MockAppStorage from 'util/tests/mockAppStorage';
 
-jest.mock('util/appStorage', () => MockAppStorage);
+// don't use the real localStorage in unit tests
+jest.mock('util/appStorage');
 
 beforeEach(() => {
   jest.clearAllMocks();