@dxos/react-ui 0.1.28 → 0.1.29-next.b1a9bc6

package/src/playwright/invitations-manager.ts

@@ -0,0 +1,210 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+import type { Browser, ConsoleMessage, Page } from 'playwright';
+import waitForExpect from 'wait-for-expect';
+
+import { Trigger } from '@dxos/async';
+import type { InvitationsOptions } from '@dxos/client';
+import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
+import { setupPage } from '@dxos/test/playwright';
+
+// TODO(wittjosiah): Factor out.
+// TODO(burdon): No hard-coding of ports; reconcile all DXOS tools ports.
+const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+
+export type PanelType = number | 'identity' | 'devices' | 'spaces' | 'join';
+
+export class InvitationsManager {
+  page!: Page;
+
+  private _initialized = false;
+  private _invitationCode = new Trigger<string>();
+  private _authenticationCode = new Trigger<string>();
+
+  constructor(private readonly _browser: Browser) {}
+
+  async init() {
+    if (this._initialized) {
+      return;
+    }
+
+    const { page } = await setupPage(this._browser, {
+      url: storybookUrl('invitations--default'),
+      waitFor: (page) => page.getByTestId('invitations.identity-header').nth(0).isVisible()
+    });
+
+    this.page = page;
+    this.page.on('console', (message) => this._onConsoleMessage(message));
+    this._initialized = true;
+  }
+
+  // Getters
+
+  async getDisplayName(id: number) {
+    // TODO(wittjosiah): Update id.
+    return this._peer(id).getByTestId('identity-list-item').nth(0).textContent();
+  }
+
+  async getSpaceName(id: number, nth: number) {
+    // TODO(wittjosiah): Update id.
+    return this._peer(id).getByTestId('space-list-item').nth(nth).textContent();
+  }
+
+  authenticatorIsVisible(id: number, type: 'device' | 'space') {
+    // TODO(wittjosiah): Update id.
+    return this._peer(id)
+      .getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`)
+      .isVisible();
+  }
+
+  invitationFailed(id: number) {
+    // TODO(wittjosiah): Update id.
+    return this._peer(id).getByTestId('invitation-rescuer-reset').isVisible();
+  }
+
+  // Actions
+
+  async setConnectionState(id: number, state: ConnectionState) {
+    await this.page.evaluate(
+      ({ id, state }) => {
+        (window as any)[`peer${id}client`].mesh.setConnectionState(state);
+      },
+      { id, state }
+    );
+  }
+
+  async openPanel(id: number, panel: PanelType) {
+    const peer = this._peer(id);
+
+    if (typeof panel === 'number') {
+      // TODO(wittjosiah): Update id.
+      await peer.getByTestId('space-list-item').nth(panel).click();
+    }
+
+    switch (panel) {
+      case 'identity':
+        await peer.getByTestId('invitations.open-join-identity').click();
+        break;
+
+      case 'devices':
+        await peer.getByTestId('invitations.open-devices').click();
+        break;
+
+      case 'spaces':
+        await peer.getByTestId('invitations.list-spaces').click();
+        break;
+
+      case 'join':
+        await peer.getByTestId('invitations.open-join-space').click();
+        break;
+    }
+  }
+
+  async createIdentity(id: number) {
+    const createIdentity = this._peer(id).getByTestId('invitations.create-identity');
+    // TODO(wittjosiah): Clicking on buttons wrapped in tooltips is flaky in webkit playwright.
+    await createIdentity.click();
+    await waitForExpect(async () => {
+      expect(await createIdentity.isDisabled()).to.be.true;
+    });
+  }
+
+  async createSpace(id: number) {
+    await this._peer(id).getByTestId('invitations.create-space').click();
+  }
+
+  async createInvitation(id: number, type: 'device' | 'space', options?: InvitationsOptions): Promise<string> {
+    if (!options) {
+      const peer = this._peer(id);
+      this._invitationCode = new Trigger<string>();
+      await peer.getByTestId(`${type}s-panel.create-invitation`).click();
+      return this._invitationCode.wait();
+    }
+
+    this._invitationCode = new Trigger<string>();
+    await this.page.evaluate(
+      ({ id, type, options }) => {
+        if (type === 'device') {
+          (window as any)[`peer${id}client`].halo.createInvitation(options);
+        } else {
+          (window as any)[`peer${id}space`].createInvitation(options);
+        }
+      },
+      { id, type, options }
+    );
+    return this._invitationCode.wait();
+  }
+
+  async acceptInvitation(id: number, type: 'device' | 'space', invitation: string) {
+    const peer = this._peer(id);
+    // TODO(wittjosiah): Update ids.
+    await peer.getByTestId(type === 'device' ? 'join-identity' : 'select-identity').click();
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).type(invitation);
+    await this.page.keyboard.press('Enter');
+  }
+
+  async cancelInvitation(id: number, type: 'device' | 'space', kind: 'host' | 'guest') {
+    const peer = this._peer(id);
+    if (kind === 'guest') {
+      await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-authenticator-cancel`).click();
+    }
+  }
+
+  async invitationInputContinue(id: number, type: 'device' | 'space') {
+    // TODO(wittjosiah): Update ids.
+    await this._peer(id)
+      .getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input-continue`)
+      .click();
+  }
+
+  async getAuthenticationCode(): Promise<string> {
+    this._authenticationCode = new Trigger<string>();
+    return await this._authenticationCode.wait();
+  }
+
+  async authenticateInvitation(id: number, type: 'device' | 'space', authenticationCode: string) {
+    const peer = this._peer(id);
+    // TODO(wittjosiah): Update ids.
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).type(authenticationCode);
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-authenticator-next`).click();
+  }
+
+  async clearAuthenticationCode(id: number, type: 'device' | 'space') {
+    const peer = this._peer(id);
+    // TODO(wittjosiah): Update ids.
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).fill('');
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).focus();
+  }
+
+  async resetInvitation(id: number) {
+    const peer = this._peer(id);
+    // TODO(wittjosiah): Update ids.
+    await peer.getByTestId('invitation-rescuer-reset').click();
+  }
+
+  // TODO(wittjosiah): Remove.
+  async doneInvitation(id: number, type: 'device' | 'space') {
+    const peer = this._peer(id);
+    // TODO(wittjosiah): Update ids.
+    await peer.getByTestId(type === 'device' ? 'identity-added-done' : 'space-invitation-accepted-done').click();
+  }
+
+  // TODO(wittjosiah): Peer manager?
+  private _peer(id: number) {
+    return this.page.getByTestId(`peer-${id}`);
+  }
+
+  private async _onConsoleMessage(message: ConsoleMessage) {
+    try {
+      const json = JSON.parse(message.text());
+      if (json.invitationCode) {
+        this._invitationCode.wake(json.invitationCode);
+      } else if (json.authenticationCode) {
+        this._authenticationCode.wake(json.authenticationCode);
+      }
+    } catch {}
+  }
+}

package/src/playwright/invitations.spec.ts

@@ -0,0 +1,363 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { test } from '@playwright/test';
+import { expect } from 'chai';
+
+import { sleep } from '@dxos/async';
+import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
+import { AuthMethod } from '@dxos/protocols/proto/dxos/halo/invitations';
+
+import { InvitationsManager } from './invitations-manager';
+
+test.describe('Invitations', () => {
+  let manager: InvitationsManager;
+
+  test.beforeEach(async ({ browser }) => {
+    manager = new InvitationsManager(browser);
+    await manager.init();
+  });
+
+  test.describe('device', () => {
+    test('happy path', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+
+      await manager.openPanel(1, 'identity');
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'device', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'device', authenticationCode);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    // TODO(wittjosiah): Auth method not hooked up?
+    test.skip('no auth method', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device', { authMethod: AuthMethod.NONE });
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    // TODO(wittjosiah): Invalid auth code cannot retry.
+    test.skip('invalid & retry auth code', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+
+      await manager.openPanel(1, 'identity');
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'device', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'device', '000000');
+      await manager.clearAuthenticationCode(1, 'device');
+      await manager.authenticateInvitation(1, 'device', authenticationCode);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    // TODO(wittjosiah): Invalid auth code cannot retry.
+    test.skip('invalid & max auth code retries reached, retry invitation', async () => {});
+
+    // TODO(wittjosiah): Trigger timeout.
+    test.skip('invitation timeout & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device', { timeout: 100 });
+
+      await manager.openPanel(1, 'identity');
+      await sleep(100);
+
+      // TODO(wittjosiah): Retry here.
+
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'device', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'device', authenticationCode);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    // TODO(wittjosiah): Propagate cancel to guest.
+    test.skip('invitation cancelled by host', async () => {});
+
+    test('invitation cancelled by guest & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      await manager.cancelInvitation(1, 'device', 'guest');
+      await manager.resetInvitation(1);
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.invitationInputContinue(1, 'device')
+      ]);
+      await manager.authenticateInvitation(1, 'device', authenticationCode);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    test('recover from network failure during invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      await sleep(100);
+      await manager.setConnectionState(0, ConnectionState.OFFLINE);
+      await sleep(100);
+      await manager.setConnectionState(0, ConnectionState.ONLINE);
+      await manager.resetInvitation(1);
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.invitationInputContinue(1, 'device')
+      ]);
+      await manager.authenticateInvitation(1, 'device', authenticationCode);
+      await manager.doneInvitation(1, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+    });
+
+    test('multiple concurrent invitations', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation1 = await manager.createInvitation(0, 'device');
+      const invitation2 = await manager.createInvitation(0, 'device');
+
+      await manager.openPanel(1, 'identity');
+      await manager.openPanel(2, 'identity');
+      const [authenticationCode1] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'device', invitation1)
+      ]);
+      // Prevent auth code from being reused.
+      await sleep(100);
+      const [authenticationCode2] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(2, 'device', invitation2)
+      ]);
+      await manager.authenticateInvitation(1, 'device', authenticationCode1);
+      await manager.authenticateInvitation(2, 'device', authenticationCode2);
+      await manager.doneInvitation(1, 'device');
+      await manager.doneInvitation(2, 'device');
+
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(2));
+      expect(await manager.getDisplayName(1)).to.equal(await manager.getDisplayName(2));
+    });
+  });
+
+  test.describe('space', () => {
+    test('happy path', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'space', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    test('no auth method', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space', { authMethod: AuthMethod.NONE });
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    test('invalid & retry auth code', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'space', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'space', '000000');
+
+      expect(await manager.authenticatorIsVisible(1, 'space')).to.be.true;
+
+      await manager.clearAuthenticationCode(1, 'space');
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    test('invalid & max auth code retries reached, retry invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+
+      await manager.authenticateInvitation(1, 'space', '000001');
+      await manager.clearAuthenticationCode(1, 'space');
+      await manager.authenticateInvitation(1, 'space', '000002');
+      await manager.clearAuthenticationCode(1, 'space');
+      await manager.authenticateInvitation(1, 'space', '000003');
+
+      expect(await manager.invitationFailed(1)).to.be.true;
+
+      await manager.resetInvitation(1);
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.invitationInputContinue(1, 'space')
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    // TODO(wittjosiah): Trigger timeout.
+    test.skip('invitation timeout & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space', { timeout: 100 });
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await sleep(100);
+
+      // TODO(wittjosiah): Retry here.
+
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'space', invitation)
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    // TODO(wittjosiah): Propagate cancel to guest.
+    test.skip('invitation cancelled by host', async () => {});
+
+    test('invitation cancelled by guest & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+      await manager.cancelInvitation(1, 'space', 'guest');
+      await manager.resetInvitation(1);
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.invitationInputContinue(1, 'space')
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    test('recover from network failure during invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+      await sleep(100);
+      await manager.setConnectionState(0, ConnectionState.OFFLINE);
+      await sleep(100);
+      await manager.setConnectionState(0, ConnectionState.ONLINE);
+      await manager.resetInvitation(1);
+      const [authenticationCode] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.invitationInputContinue(1, 'space')
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode);
+      await manager.doneInvitation(1, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+    });
+
+    test('multiple concurrent invitations', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
+      const invitation1 = await manager.createInvitation(0, 'space');
+      const invitation2 = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.createIdentity(2);
+      await manager.openPanel(1, 'join');
+      await manager.openPanel(2, 'join');
+      const [authenticationCode1] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(1, 'space', invitation1)
+      ]);
+      // Prevent auth code from being reused.
+      await sleep(100);
+      const [authenticationCode2] = await Promise.all([
+        manager.getAuthenticationCode(),
+        manager.acceptInvitation(2, 'space', invitation2)
+      ]);
+      await manager.authenticateInvitation(1, 'space', authenticationCode1);
+      await manager.authenticateInvitation(2, 'space', authenticationCode2);
+      await manager.doneInvitation(1, 'space');
+      await manager.doneInvitation(2, 'space');
+
+      await manager.openPanel(0, 'spaces');
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(1, 0));
+      expect(await manager.getSpaceName(0, 0)).to.equal(await manager.getSpaceName(2, 0));
+      expect(await manager.getSpaceName(1, 0)).to.equal(await manager.getSpaceName(2, 0));
+    });
+  });
+});

package/src/playwright/playwright.config.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+
+export default defaultPlaywrightConfig;