Make the slow specs pass against a dev node

Run against a local dev node, both specs failed for reasons in the specs
themselves:

- CreateAccount looked for an "Add account" button that is now "Account",
  and that button only shows when accounts can be stored, which the spec
  never turned on. The page has to be wrapped in KeyringCtxRoot and start
  on its route. The button is awaited for up to 20s: the page draws once
  the api and keyring are ready, which takes longer than the 1s default
  on a busy machine.
- Bounties started outside its route and used a fixed title, so a node
  that already held a bounty from an earlier run had two matches.
- Neither closed its connections, so the test process never exited.

Both stay skipped until the nightly run starts a dev node.

packages/page-accounts/src/CreateAccount.slow.spec.tsx

@@ -5,17 +5,23 @@
 
 import '@pezkuwi/react-components/i18n';
 
-import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
+import { cleanup, fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
 import AccountsApp from '@pezkuwi/app-accounts';
 import { ApiCtxRoot } from '@pezkuwi/react-api';
+import { statics } from '@pezkuwi/react-api/statics';
 import { lightTheme } from '@pezkuwi/react-components';
+import { KeyringCtxRoot } from '@pezkuwi/react-hooks/ctx/Keyring';
 import { BIZINIKIWI_PORT } from '@pezkuwi/test-support/bizinikiwi';
 import { MemoryStore } from '@pezkuwi/test-support/keyring';
 import { WaitForApi } from '@pezkuwi/test-support/react';
+import { settings } from '@pezkuwi/ui-settings';
+
+// the Account button only shows when accounts can be stored
+settings.set({ ...settings.get(), storage: 'on' });
 
 function noop (): void {
   // do nothing
@@ -25,19 +31,21 @@ const renderAccounts = () => {
   const memoryStore = new MemoryStore();
 
   return render(
-    <MemoryRouter>
+    <MemoryRouter initialEntries={['/accounts']}>
       <ThemeProvider theme={lightTheme}>
         <ApiCtxRoot
           apiUrl={`ws://127.0.0.1:${BIZINIKIWI_PORT}`}
           store={memoryStore}
         >
           <WaitForApi>
+            <KeyringCtxRoot>
               <div>
                 <AccountsApp
                   basePath='/accounts'
                   onStatusChange={noop}
                 />
               </div>
+            </KeyringCtxRoot>
           </WaitForApi>
         </ApiCtxRoot>
       </ThemeProvider>
@@ -47,12 +55,17 @@ const renderAccounts = () => {
 
 // eslint-disable-next-line jest/no-disabled-tests
 describe.skip('--SLOW--: Account Create', () => {
+  // each render opens its own connection, and an open one keeps the process alive
+  afterEach(async () => {
+    cleanup();
+    await statics.api.disconnect();
+  });
+
   it('created account is added to list', async () => {
-    const { findByTestId, findByText, queryByText } = renderAccounts();
+    const { findByRole, findByTestId, findByText, queryByText } = renderAccounts();
 
-    const addAccountButton = await findByText('Add account', {});
-
-    fireEvent.click(addAccountButton);
+    // the page draws once the api and keyring are ready, later than the 1s default on a busy machine
+    fireEvent.click(await findByRole('button', { name: 'Account' }, { timeout: 20_000 }));
 
     const isSeedSavedCheckbox = await findByText('I have saved my mnemonic seed safely');
     const hiddenCheckbox = isSeedSavedCheckbox as HTMLInputElement;
@@ -89,11 +102,9 @@ describe.skip('--SLOW--: Account Create', () => {
   });
 
   it('gives an error message when entering invalid derivation path', async () => {
-    const { findByTestId, findByText } = renderAccounts();
+    const { findByRole, findByTestId, findByText } = renderAccounts();
 
-    const addAccountButton = await findByText('Add account', {});
-
-    fireEvent.click(addAccountButton);
+    fireEvent.click(await findByRole('button', { name: 'Account' }, { timeout: 20_000 }));
 
     const showAdvancedOptionsButton = await findByText('Advanced creation options', {});
 

packages/page-bounties/src/Bounties.slow.spec.tsx

@@ -5,12 +5,15 @@
 
 import '@pezkuwi/react-components/i18n';
 
-import { render } from '@testing-library/react';
+import type { ApiPromise } from '@pezkuwi/api';
+
+import { cleanup, render } from '@testing-library/react';
 import React, { Suspense } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
 import { ApiCtxRoot } from '@pezkuwi/react-api';
+import { statics } from '@pezkuwi/react-api/statics';
 import { lightTheme } from '@pezkuwi/react-components';
 import { createApi } from '@pezkuwi/test-support/api';
 import { aliceSigner, MemoryStore } from '@pezkuwi/test-support/keyring';
@@ -27,7 +30,7 @@ const renderBounties = () => {
 
   return render(
     <Suspense fallback='...'>
-      <MemoryRouter>
+      <MemoryRouter initialEntries={['/bounties']}>
         <ThemeProvider theme={lightTheme}>
           <ApiCtxRoot
             apiUrl={`ws://127.0.0.1:${BIZINIKIWI_PORT}`}
@@ -47,13 +50,25 @@ const renderBounties = () => {
 
 // eslint-disable-next-line jest/no-disabled-tests
 describe.skip('--SLOW--: Bounties', () => {
-  it('list shows an existing bounty', async () => {
-    const api = await createApi();
+  let api: ApiPromise | undefined;
 
-    await execute((api.tx.bounties as any).proposeBounty(new BN(500_000_000_000_000), 'a short bounty title'), aliceSigner());
+  // both connections stay open otherwise, and keep the process alive
+  afterAll(async () => {
+    cleanup();
+    await api?.disconnect();
+    await statics.api.disconnect();
+  });
+
+  it('list shows an existing bounty', async () => {
+    // unique, so a node that already holds bounties from an earlier run still has exactly one match
+    const title = `a short bounty title ${Date.now()}`;
+
+    api = await createApi();
+
+    await execute((api.tx.bounties as any).proposeBounty(new BN(500_000_000_000_000), title), aliceSigner());
 
     const { findByText } = renderBounties();
 
-    expect(await findByText('a short bounty title', {}, { timeout: 20_000 })).toBeTruthy();
+    expect(await findByText(title, {}, { timeout: 20_000 })).toBeTruthy();
   });
 });