test(unit): minor improvements to some component unit tests

src/components/designer/SidebarCard.tsx

@@ -9,4 +9,5 @@ export default styled(Card)`
   width: 360px;
   border-radius: 2px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 `;

src/components/designer/lightning/actions/ChangeBackendModal.spec.tsx

@@ -128,9 +128,11 @@ describe('ChangeBackendModal', () => {
 
   it('should display an error if form is not valid', async () => {
     await suppressConsoleErrors(async () => {
-      const { getByText, findAllByText } = await renderComponent(Status.Stopped, '', '');
+      const { getByText, getAllByText } = await renderComponent(Status.Stopped, '', '');
       fireEvent.click(getByText('Change Backend'));
-      expect(await findAllByText('required')).toHaveLength(2);
+      await wait(() => {
+        expect(getAllByText('required')).toHaveLength(2);
+      });
     });
   });
 

src/components/designer/lightning/actions/CreateInvoiceModal.tsx

@@ -29,7 +29,7 @@ const CreateInvoiceModal: React.FC<Props> = ({ network }) => {
   const createAsync = useAsyncCallback(async (node: LightningNode, amount: number) => {
     try {
       const invoice = await createInvoice({ node, amount, memo: '' });
-      showCreateInvoice({ nodeName: node.name, amount, invoice });
+      await showCreateInvoice({ nodeName: node.name, amount, invoice });
     } catch (error) {
       notify({ message: l('submitError'), error });
     }
@@ -92,7 +92,7 @@ const CreateInvoiceModal: React.FC<Props> = ({ network }) => {
         title={l('successTitle')}
         subTitle={l('successDesc', { nodeName, amount: format(`${amount}`) })}
         extra={
-          <>
+          <Form>
             <Form.Item>
               <CopyableInput label="Invoice" value={invoice} />
             </Form.Item>
@@ -101,7 +101,7 @@ const CreateInvoiceModal: React.FC<Props> = ({ network }) => {
                 <Button type="primary">{l('copyClose')}</Button>
               </CopyToClipboard>
             </Form.Item>
-          </>
+          </Form>
         }
       />
     );

src/components/designer/lightning/actions/OpenChannelModal.tsx

@@ -23,7 +23,7 @@ const OpenChannelModal: React.FC<Props> = ({ network }) => {
   const { visible, to, from } = useStoreState(s => s.modals.openChannel);
   const [selectedFrom, setSelectedFrom] = useState(from);
   const [selectedTo, setSelectedTo] = useState(to);
-  const [selectedSats, setSelectedSats] = useState(0);
+  const [selectedSats, setSelectedSats] = useState(250000);
   const { hideOpenChannel } = useStoreActions(s => s.modals);
   const { getWalletBalance, openChannel } = useStoreActions(s => s.lightning);
   const { notify } = useStoreActions(s => s.app);
@@ -47,13 +47,18 @@ const OpenChannelModal: React.FC<Props> = ({ network }) => {
 
   const sameNode = selectedFrom === selectedTo;
   useMemo(() => {
-    if (selectedFrom && nodes[selectedFrom] && nodes[selectedFrom].walletBalance) {
+    if (
+      selectedFrom &&
+      nodes[selectedFrom] &&
+      nodes[selectedFrom].walletBalance &&
+      !openChanAsync.loading
+    ) {
       const nodeInfo = nodes[selectedFrom];
       const confirmed = nodeInfo.walletBalance && nodeInfo.walletBalance.confirmed;
       const balance = parseInt(confirmed || '0');
       setShowDeposit(balance <= selectedSats && !sameNode);
     }
-  }, [selectedFrom, selectedSats, nodes, sameNode]);
+  }, [selectedFrom, selectedSats, nodes, sameNode, openChanAsync.loading]);
 
   const handleSubmit = (values: any) => {
     const { lightning } = network.nodes;

src/components/designer/lightning/actions/PayInvoiceModal.spec.tsx

@@ -78,13 +78,13 @@ describe('PayInvoiceModal', () => {
   });
 
   it('should do nothing if an invalid node is selected', async () => {
-    const { getByText, getByLabelText } = await renderComponent(
+    const { getByText, findByText, getByLabelText } = await renderComponent(
       Status.Stopped,
       'invalid',
     );
     fireEvent.change(getByLabelText('BOLT 11 Invoice'), { target: { value: 'lnbc1' } });
-    await wait(() => fireEvent.click(getByText('Pay Invoice')));
+    fireEvent.click(getByText('Pay Invoice'));
-    expect(getByText('Pay Invoice')).toBeInTheDocument();
+    expect(await findByText('Pay Invoice')).toBeInTheDocument();
   });
 
   describe('with form submitted', () => {
@@ -109,11 +109,11 @@ describe('PayInvoiceModal', () => {
 
     it('should display an error when paying the invoice fails', async () => {
       lightningServiceMock.payInvoice.mockRejectedValue(new Error('error-msg'));
-      const { getByText, getByLabelText } = await renderComponent();
+      const { getByText, findByText, getByLabelText } = await renderComponent();
       fireEvent.change(getByLabelText('BOLT 11 Invoice'), { target: { value: 'lnbc1' } });
-      await wait(() => fireEvent.click(getByText('Pay Invoice')));
+      fireEvent.click(getByText('Pay Invoice'));
-      expect(getByText('Unable to pay the Invoice')).toBeInTheDocument();
+      expect(await findByText('Unable to pay the Invoice')).toBeInTheDocument();
-      expect(getByText('error-msg')).toBeInTheDocument();
+      expect(await findByText('error-msg')).toBeInTheDocument();
     });
   });
 });

src/components/designer/lightning/actions/PayInvoiceModal.tsx

@@ -28,7 +28,7 @@ const PayInvoiceModal: React.FC<Props> = ({ network }) => {
         message: l('successTitle'),
         description: l('successDesc', { amount: format(amount), nodeName }),
       });
-      hidePayInvoice();
+      await hidePayInvoice();
     } catch (error) {
       notify({ message: l('submitError'), error });
     }
@@ -42,43 +42,41 @@ const PayInvoiceModal: React.FC<Props> = ({ network }) => {
   };
 
   return (
-    <>
+    <Modal
-      <Modal
+      title={l('title')}
-        title={l('title')}
+      visible={visible}
-        visible={visible}
+      onCancel={() => hidePayInvoice()}
-        onCancel={() => hidePayInvoice()}
+      destroyOnClose
-        destroyOnClose
+      cancelText={l('cancelBtn')}
-        cancelText={l('cancelBtn')}
+      okText={l('okBtn')}
-        okText={l('okBtn')}
+      okButtonProps={{
-        okButtonProps={{
+        loading: payAsync.loading,
-          loading: payAsync.loading,
+      }}
-        }}
+      onOk={form.submit}
-        onOk={form.submit}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        hideRequiredMark
+        colon={false}
+        initialValues={{ node: nodeName }}
+        onFinish={handleSubmit}
       >
-        <Form
+        <LightningNodeSelect
-          form={form}
+          network={network}
-          layout="vertical"
+          name="node"
-          hideRequiredMark
+          label={l('nodeLabel')}
-          colon={false}
+          disabled={payAsync.loading}
-          initialValues={{ node: nodeName }}
+        />
-          onFinish={handleSubmit}
+        <Form.Item
+          name="invoice"
+          label={l('invoiceLabel')}
+          rules={[{ required: true, message: l('cmps.forms.required') }]}
         >
-          <LightningNodeSelect
+          <Input.TextArea rows={6} disabled={payAsync.loading} />
-            network={network}
+        </Form.Item>
-            name="node"
+      </Form>
-            label={l('nodeLabel')}
+    </Modal>
-            disabled={payAsync.loading}
-          />
-          <Form.Item
-            name="invoice"
-            label={l('invoiceLabel')}
-            rules={[{ required: true, message: l('cmps.forms.required') }]}
-          >
-            <Input.TextArea rows={6} disabled={payAsync.loading} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </>
   );
 };