test: add unit tests for processing swap updates

Author: jamaljsr

app/src/__stories__/ProcessingSwaps.stories.tsx

@@ -47,7 +47,7 @@ const mockSwap = (type: number, state: number, id?: string) => {
   swap.id = `${id || ''}${swap.id}`;
   swap.type = type;
   swap.state = state;
-  swap.initiationTime = Date.now() * 1000 * 1000;
+  swap.lastUpdateTime = Date.now() * 1000 * 1000;
   return swap;
 };
 // create a list of swaps to use for stories

app/src/__tests__/components/loop/ProcessingSwaps.spec.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import * as LOOP from 'types/generated/loop_pb';
+import { fireEvent } from '@testing-library/react';
+import { ellipseInside } from 'util/strings';
+import { renderWithProviders } from 'util/tests';
+import { loopListSwaps } from 'util/tests/sampleData';
+import { createStore, Store } from 'store';
+import { Swap } from 'store/models';
+import ProcessingSwaps from 'components/loop/processing/ProcessingSwaps';
+
+const { LOOP_IN, LOOP_OUT } = LOOP.SwapType;
+const {
+  INITIATED,
+  PREIMAGE_REVEALED,
+  HTLC_PUBLISHED,
+  SUCCESS,
+  INVOICE_SETTLED,
+  FAILED,
+} = LOOP.SwapState;
+const width = (el: any) => window.getComputedStyle(el).width;
+
+describe('ProcessingSwaps component', () => {
+  let store: Store;
+
+  const addSwap = (type: number, state: number, id?: string) => {
+    const swap = new Swap(loopListSwaps.swapsList[0]);
+    swap.id = `${id || ''}${swap.id}`;
+    swap.type = type;
+    swap.state = state;
+    swap.lastUpdateTime = Date.now() * 1000 * 1000;
+    store.swapStore.swaps.set(swap.id, swap);
+    return swap;
+  };
+
+  beforeEach(async () => {
+    store = createStore();
+  });
+
+  const render = () => {
+    return renderWithProviders(<ProcessingSwaps />, store);
+  };
+
+  it('should display the title', async () => {
+    const { getByText } = render();
+    expect(getByText('Processing Loops')).toBeInTheDocument();
+  });
+
+  it('should display an INITIATED Loop In', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_IN, INITIATED);
+    expect(getByText('dot.svg')).toHaveClass('warn');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('25%');
+  });
+
+  it('should display an HTLC_PUBLISHED Loop In', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_IN, HTLC_PUBLISHED);
+    expect(getByText('dot.svg')).toHaveClass('warn');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('50%');
+  });
+
+  it('should display an INVOICE_SETTLED Loop In', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_IN, INVOICE_SETTLED);
+    expect(getByText('dot.svg')).toHaveClass('warn');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('75%');
+  });
+
+  it('should display an SUCCESS Loop In', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_IN, SUCCESS);
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('100%');
+  });
+
+  it('should display an FAILED Loop In', () => {
+    const { getByText } = render();
+    const swap = addSwap(LOOP_IN, FAILED);
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.stateLabel)).toBeInTheDocument();
+    expect(getByText('close.svg')).toBeInTheDocument();
+  });
+
+  it('should display an INITIATED Loop Out', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_OUT, INITIATED);
+    expect(getByText('dot.svg')).toHaveClass('warn');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('33%');
+  });
+
+  it('should display an PREIMAGE_REVEALED Loop Out', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_OUT, PREIMAGE_REVEALED);
+    expect(getByText('dot.svg')).toHaveClass('warn');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('66%');
+  });
+
+  it('should display an SUCCESS Loop Out', () => {
+    const { getByText, getByTitle } = render();
+    const swap = addSwap(LOOP_OUT, SUCCESS);
+    expect(getByText('dot.svg')).toHaveClass('success');
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
+    expect(width(getByTitle(swap.stateLabel))).toBe('100%');
+  });
+
+  it('should display an FAILED Loop Out', () => {
+    const { getByText } = render();
+    const swap = addSwap(LOOP_OUT, FAILED);
+    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.stateLabel)).toBeInTheDocument();
+    expect(getByText('close.svg')).toBeInTheDocument();
+  });
+
+  it('should dismiss a failed Loop', () => {
+    const { getByText } = render();
+    addSwap(LOOP_OUT, FAILED);
+    expect(store.swapStore.dismissedSwapIds).toHaveLength(0);
+    fireEvent.click(getByText('close.svg'));
+    expect(store.swapStore.dismissedSwapIds).toHaveLength(1);
+  });
+});

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

@@ -1,4 +1,5 @@
 import * as LOOP from 'types/generated/loop_pb';
+import { waitFor } from '@testing-library/react';
 import { loopListSwaps } from 'util/tests/sampleData';
 import { createStore, SwapStore } from 'store';
 
@@ -55,4 +56,37 @@ describe('SwapStore', () => {
     swap.type = type;
     expect(swap.typeName).toEqual(label);
   });
+
+  it('should poll for swap updates', async () => {
+    await store.fetchSwaps();
+    const swap = store.sortedSwaps[0];
+    // create a pending swap to trigger auto-polling
+    swap.state = LOOP.SwapState.INITIATED;
+    expect(store.pendingSwaps).toHaveLength(1);
+    // wait for polling to start
+    await waitFor(() => {
+      expect(store.pollingInterval).toBeDefined();
+    });
+    // change the swap to complete
+    swap.state = LOOP.SwapState.SUCCESS;
+    expect(store.pendingSwaps).toHaveLength(0);
+    // confirm polling has stopped
+    await waitFor(() => {
+      expect(store.pollingInterval).toBeUndefined();
+    });
+  });
+
+  it('should handle startPolling when polling is already running', () => {
+    expect(store.pollingInterval).toBeUndefined();
+    store.startPolling();
+    expect(store.pollingInterval).toBeDefined();
+    store.startPolling();
+    expect(store.pollingInterval).toBeDefined();
+  });
+
+  it('should handle stopPolling when polling is already stopped', () => {
+    expect(store.pollingInterval).toBeUndefined();
+    store.stopPolling();
+    expect(store.pollingInterval).toBeUndefined();
+  });
 });

app/src/store/stores/swapStore.ts

@@ -9,7 +9,7 @@ import {
   toJS,
   values,
 } from 'mobx';
-import { IS_PROD } from 'config';
+import { IS_PROD, IS_TEST } from 'config';
 import { Store } from 'store';
 import { Swap } from '../models';
 
@@ -69,11 +69,6 @@ export default class SwapStore {
     return this.sortedSwaps.filter(s => s.isPending);
   }
 
-  /** swaps that were completed in the past 5 minutes */
-  @computed get recentSwaps() {
-    return this.sortedSwaps.filter(s => s.isRecent);
-  }
-
   @action.bound
   dismissSwap(swapId: string) {
     this.dismissedSwapIds.push(swapId);
@@ -113,7 +108,7 @@ export default class SwapStore {
   startPolling() {
     if (this.pollingInterval) this.stopPolling();
     this._store.log.info('start polling for swap updates');
-    const ms = IS_PROD ? 60 * 1000 : 1000;
+    const ms = IS_PROD ? 60 * 1000 : IS_TEST ? 100 : 1000;
     this.pollingInterval = setInterval(this.fetchSwaps, ms);
   }