@dxos/react-client 2.31.1-dev.b7e357e5 → 2.31.2-dev.ab9a89e2

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.31.1-dev.b7e357e5",
+  "version": "2.31.2-dev.ab9a89e2",
   "description": "React client API",
   "license": "MIT",
   "author": "DXOS.org",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "dependencies": {
-    "@dxos/async": "2.31.1-dev.b7e357e5",
-    "@dxos/bot-factory-client": "2.31.1-dev.b7e357e5",
-    "@dxos/client": "2.31.1-dev.b7e357e5",
-    "@dxos/config": "2.31.1-dev.b7e357e5",
-    "@dxos/credentials": "2.31.1-dev.b7e357e5",
-    "@dxos/crypto": "2.31.1-dev.b7e357e5",
-    "@dxos/debug": "2.31.1-dev.b7e357e5",
-    "@dxos/echo-db": "2.31.1-dev.b7e357e5",
-    "@dxos/network-manager": "2.31.1-dev.b7e357e5",
-    "@dxos/util": "2.31.1-dev.b7e357e5",
+    "@dxos/async": "2.31.2-dev.ab9a89e2",
+    "@dxos/bot-factory-client": "2.31.2-dev.ab9a89e2",
+    "@dxos/client": "2.31.2-dev.ab9a89e2",
+    "@dxos/config": "2.31.2-dev.ab9a89e2",
+    "@dxos/credentials": "2.31.2-dev.ab9a89e2",
+    "@dxos/crypto": "2.31.2-dev.ab9a89e2",
+    "@dxos/debug": "2.31.2-dev.ab9a89e2",
+    "@dxos/echo-db": "2.31.2-dev.ab9a89e2",
+    "@dxos/network-manager": "2.31.2-dev.ab9a89e2",
+    "@dxos/util": "2.31.2-dev.ab9a89e2",
     "assert": "^2.0.0",
     "debug": "^4.3.3",
     "use-subscription": "^1.4.1"
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@dxos/esbuild-plugins": "~2.28.7",
     "@dxos/eslint-plugin": "~1.0.27",
-    "@dxos/protocols-toolchain": "2.31.0",
+    "@dxos/protocols-toolchain": "2.31.1",
     "@mui/material": "^5.4.2",
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "5.1.2",
@@ -33,19 +33,23 @@
     "@types/mocha": "~8.2.2",
     "@types/node": "^14.0.9",
     "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
     "@types/testing-library__jest-dom": "~5.9.5",
     "@types/use-subscription": "^1.0.0",
     "eslint": "^7.12.1",
     "expect": "~27.0.2",
     "fork-ts-checker-webpack-plugin": "~6.2.5",
     "level-js": "^5.0.2",
+    "raf": "^3.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "wait-for-expect": "^3.0.2"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"

package/src/hooks/echo-selections/useSelection.test.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import expect from 'expect';
+import 'raf/polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import waitForExpect from 'wait-for-expect';
+
+import { Client, Party } from '@dxos/client';
+
+import { useSelection } from './useSelection';
+
+const count = 10;
+const TYPE_EXAMPLE = 'example:type/org';
+
+const useTestComponents = async () => {
+  const config = {};
+  const client = new Client(config);
+  await client.initialize();
+  await client.halo.createProfile();
+
+  const party = await client.echo.createParty();
+  const items = await Promise.all(Array.from({ length: count }).map(async () => {
+    return await party.database.createItem({ type: TYPE_EXAMPLE });
+  }));
+  expect(items.length).toBe(count);
+
+  return { client, party };
+};
+
+const UseSelectionTestComponent = ({ party }: { party: Party}) => {
+  const items = useSelection(party?.select().filter({ type: TYPE_EXAMPLE }), []);
+
+  const addItem = async () => await party.database.createItem({ type: TYPE_EXAMPLE });
+
+  return (
+    <ul onClick={addItem}>
+      {items?.map(item => <li key={item.id}>{item.id}</li>)}
+    </ul>
+  );
+};
+
+let rootContainer: any;
+
+beforeEach(() => {
+  rootContainer = document.createElement('div');
+  document.body.appendChild(rootContainer);
+});
+
+afterEach(() => {
+  document.body.removeChild(rootContainer);
+  rootContainer = null;
+});
+
+describe.only('useSelection', () => {
+  it('gets updated items selection', async () => {
+    const { party } = await useTestComponents();
+    act(() => {
+      ReactDOM.render(<UseSelectionTestComponent party={party} />, rootContainer);
+    });
+
+    const ul = rootContainer.querySelector('ul');
+    await waitForExpect(() => {
+      expect(ul.childNodes.length).toEqual(count);
+    });
+    ul.click();
+    await waitForExpect(() => {
+      expect(ul.childNodes.length).toEqual(count + 1);
+    });
+  });
+});