refactor: share sample API data between test and storybook

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
+      "cwd": "${workspaceRoot}",
+      "protocol": "inspector",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "env": { "CI": "true" },
+      "disableOptimisticBPs": true
+    }
+  ]
+}

app/.storybook/preview.tsx

@@ -3,11 +3,15 @@ import { action } from 'mobx';
 import { addDecorator } from '@storybook/react';
 import { ThemeProvider } from '../src/components/theme';
 import { Store, StoreProvider } from '../src/store';
+import * as sampleData from '../src/util/sampleData';
 
 /**
  * Create a store with dummy data to use for stories
  */
 const store = new Store();
+store.info = sampleData.lndGetInfo;
+store.channels = sampleData.lndListChannels;
+store.swaps = sampleData.loopListSwaps;
 
 /**
  * Create dummy actions to use for stories

app/src/__mocks__/@improbable-eng/grpc-web.ts

@@ -1,6 +1,7 @@
 import { ProtobufMessage } from '@improbable-eng/grpc-web/dist/typings/message';
 import { UnaryMethodDefinition } from '@improbable-eng/grpc-web/dist/typings/service';
 import { UnaryRpcOptions } from '@improbable-eng/grpc-web/dist/typings/unary';
+import * as samples from 'util/sampleData';
 
 // mock grpc module
 export const grpc = {
@@ -30,88 +31,7 @@ export const grpc = {
 
 // collection of mock API responses
 const mockApiResponses: Record<string, any> = {
-  'lnrpc.Lightning.GetInfo': {
-    version: '0.9.0-beta commit=v0.9.0-beta',
-    identityPubkey: '038b3fc29cfc195c9b190d86ad2d40ce7550a5c6f13941f53c7d7ac5b25c912a6c',
-    alias: 'alice',
-    color: '#cccccc',
-    numPendingChannels: 0,
-    numActiveChannels: 1,
-    numInactiveChannels: 0,
-    numPeers: 1,
-    blockHeight: 185,
-    blockHash: '547d3dcfb7d56532bed2efdeea0d400f11167b34d493bcd45fedb21f2ef7ed43',
-    bestHeaderTimestamp: 1586548672,
-    syncedToChain: false,
-    syncedToGraph: true,
-    testnet: false,
-    chainsList: [{ chain: 'bitcoin', network: 'regtest' }],
-    urisList: [
-      '038b3fc29cfc195c9b190d86ad2d40ce7550a5c6f13941f53c7d7ac5b25c912a6c@172.18.0.7:9735',
-    ],
-    featuresMap: [
-      [0, { name: 'data-loss-protect', isRequired: true, isKnown: true }],
-      [13, { name: 'static-remote-key', isRequired: false, isKnown: true }],
-      [15, { name: 'payment-addr', isRequired: false, isKnown: true }],
-      [17, { name: 'multi-path-payments', isRequired: false, isKnown: true }],
-      [5, { name: 'upfront-shutdown-script', isRequired: false, isKnown: true }],
-      [7, { name: 'gossip-queries', isRequired: false, isKnown: true }],
-      [9, { name: 'tlv-onion', isRequired: false, isKnown: true }],
-    ],
-  },
-  'lnrpc.Lightning.ListChannels': {
-    channelsList: [
-      {
-        active: true,
-        remotePubkey:
-          '037136742c67e24681f36542f7c8916aa6f6fdf665c1dca2a107425503cff94501',
-        channelPoint:
-          '0ef6a4ae3d8f800f4eb736f0776f5d3a72571615a1b7218ab17c9a43f85d8949:0',
-        chanId: '124244814004224',
-        capacity: 15000000,
-        localBalance: 9988660,
-        remoteBalance: 4501409,
-        commitFee: 11201,
-        commitWeight: 896,
-        feePerKw: 12500,
-        unsettledBalance: 498730,
-        totalSatoshisSent: 1338,
-        totalSatoshisReceived: 499929,
-        numUpdates: 6,
-        pendingHtlcsList: [
-          {
-            incoming: false,
-            amount: 498730,
-            hashLock: 'pl8fmsyoSqEQFQCw6Zu9e1aIlFnMz5H+hW2mmh3kRlI=',
-            expirationHeight: 285,
-          },
-        ],
-        csvDelay: 1802,
-        pb_private: false,
-        initiator: true,
-        chanStatusFlags: 'ChanStatusDefault',
-        localChanReserveSat: 150000,
-        remoteChanReserveSat: 150000,
-        staticRemoteKey: true,
-        lifetime: 21802,
-        uptime: 21802,
-        closeAddress: '',
-      },
-    ],
-  },
-  'looprpc.SwapClient.ListSwaps': {
-    swapsList: [...Array(7)].map((x, i) => ({
-      amt: 500000,
-      id: 'f4eb118383c2b09d8c7289ce21c25900cfb4545d46c47ed23a31ad2aa57ce835',
-      idBytes: '9OsRg4PCsJ2MconOIcJZAM+0VF1GxH7SOjGtKqV86DU=',
-      type: i % 3,
-      state: i,
-      initiationTime: 1586390353623905000,
-      lastUpdateTime: 1586398369729857000,
-      htlcAddress: 'bcrt1qzu4077erkr78k52yuf2rwkk6ayr6m3wtazdfz2qqmd7taa5vvy9s5d75gd',
-      costServer: 66,
-      costOnchain: 6812,
-      costOffchain: 2,
-    })),
-  },
+  'lnrpc.Lightning.GetInfo': samples.lndGetInfo,
+  'lnrpc.Lightning.ListChannels': samples.lndListChannels,
+  'looprpc.SwapClient.ListSwaps': samples.loopListSwaps,
 };

app/src/__tests__/App.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './App';
+import App from '../App';
 
 it('renders the App', () => {
   const { getByText } = render(<App />);

app/src/action/channel.ts

@@ -1,6 +1,6 @@
 import { action, toJS } from 'mobx';
 import { actionLog as log } from 'util/log';
-import LndApi from 'api/lnd';
+import { LndApi } from 'api';
 import { Store } from 'store';
 
 /**

app/src/action/node.ts

@@ -1,6 +1,6 @@
 import { action, toJS } from 'mobx';
 import { actionLog as log } from 'util/log';
-import LndApi from 'api/lnd';
+import { LndApi } from 'api';
 import { Store } from 'store';
 
 /**

app/src/action/swap.ts

@@ -1,7 +1,7 @@
 import { action, toJS } from 'mobx';
 import { SwapState, SwapType } from 'types/generated/loop_pb';
 import { actionLog as log } from 'util/log';
-import LoopApi from 'api/loop';
+import { LoopApi } from 'api';
 import { Store } from 'store';
 
 /**

app/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'mobx-react/batchingForReactDom';
+import 'mobx-react-lite/batchingForReactDom';
 import './i18n';
 import './index.css';
 import { log } from 'util/log';

app/src/util/sampleData.ts

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import * as LND from 'types/generated/lnd_pb';
+import * as LOOP from 'types/generated/loop_pb';
+
+//
+// LND API Responses
+//
+
+export const lndGetInfo: LND.GetInfoResponse.AsObject = {
+  version: '0.9.0-beta commit=v0.9.0-beta',
+  identityPubkey: '038b3fc29cfc195c9b190d86ad2d40ce7550a5c6f13941f53c7d7ac5b25c912a6c',
+  alias: 'alice',
+  color: '#cccccc',
+  numPendingChannels: 0,
+  numActiveChannels: 1,
+  numInactiveChannels: 0,
+  numPeers: 1,
+  blockHeight: 185,
+  blockHash: '547d3dcfb7d56532bed2efdeea0d400f11167b34d493bcd45fedb21f2ef7ed43',
+  bestHeaderTimestamp: 1586548672,
+  syncedToChain: false,
+  syncedToGraph: true,
+  testnet: false,
+  chainsList: [{ chain: 'bitcoin', network: 'regtest' }],
+  urisList: [
+    '038b3fc29cfc195c9b190d86ad2d40ce7550a5c6f13941f53c7d7ac5b25c912a6c@172.18.0.7:9735',
+  ],
+  featuresMap: [
+    [0, { name: 'data-loss-protect', isRequired: true, isKnown: true }],
+    [13, { name: 'static-remote-key', isRequired: false, isKnown: true }],
+    [15, { name: 'payment-addr', isRequired: false, isKnown: true }],
+    [17, { name: 'multi-path-payments', isRequired: false, isKnown: true }],
+    [5, { name: 'upfront-shutdown-script', isRequired: false, isKnown: true }],
+    [7, { name: 'gossip-queries', isRequired: false, isKnown: true }],
+    [9, { name: 'tlv-onion', isRequired: false, isKnown: true }],
+  ],
+};
+
+export const lndListChannels: LND.ListChannelsResponse.AsObject = {
+  channelsList: [
+    {
+      active: true,
+      remotePubkey: '037136742c67e24681f36542f7c8916aa6f6fdf665c1dca2a107425503cff94501',
+      channelPoint: '0ef6a4ae3d8f800f4eb736f0776f5d3a72571615a1b7218ab17c9a43f85d8949:0',
+      chanId: '124244814004224',
+      capacity: 15000000,
+      localBalance: 9988660,
+      remoteBalance: 4501409,
+      commitFee: 11201,
+      commitWeight: 896,
+      feePerKw: 12500,
+      unsettledBalance: 498730,
+      totalSatoshisSent: 1338,
+      totalSatoshisReceived: 499929,
+      numUpdates: 6,
+      pendingHtlcsList: [
+        {
+          incoming: false,
+          amount: 498730,
+          hashLock: 'pl8fmsyoSqEQFQCw6Zu9e1aIlFnMz5H+hW2mmh3kRlI=',
+          expirationHeight: 285,
+        },
+      ],
+      csvDelay: 1802,
+      pb_private: false,
+      initiator: true,
+      chanStatusFlags: 'ChanStatusDefault',
+      localChanReserveSat: 150000,
+      remoteChanReserveSat: 150000,
+      staticRemoteKey: true,
+      lifetime: 21802,
+      uptime: 21802,
+      closeAddress: '',
+    },
+  ],
+};
+
+//
+// LND API Responses
+//
+
+export const loopListSwaps: LOOP.ListSwapsResponse.AsObject = {
+  swapsList: [...Array(7)].map((x, i) => ({
+    amt: 500000,
+    id: 'f4eb118383c2b09d8c7289ce21c25900cfb4545d46c47ed23a31ad2aa57ce835',
+    idBytes: '9OsRg4PCsJ2MconOIcJZAM+0VF1GxH7SOjGtKqV86DU=',
+    type: (i % 3) as any,
+    state: i as any,
+    initiationTime: 1586390353623905000,
+    lastUpdateTime: 1586398369729857000,
+    htlcAddress: 'bcrt1qzu4077erkr78k52yuf2rwkk6ayr6m3wtazdfz2qqmd7taa5vvy9s5d75gd',
+    costServer: 66,
+    costOnchain: 6812,
+    costOffchain: 2,
+  })),
+};