@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/model/table-model.test.ts

@@ -2,36 +2,42 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed } from '@preact/signals-core';
-import { Schema } from 'effect';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Registry } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
-import { Obj } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
-import { updateCounter } from '@dxos/echo-schema/testing';
-import { registerSignalsRuntime } from '@dxos/echo-signals';
-import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
+import { createEchoSchema } from '@dxos/echo/testing';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
-import { TableModel, type TableModelProps } from './table-model';
-import { TableView } from '../types';
+import { Table } from '../types';
+
+import {
+  TableModel,
+  type TableModelProps,
+  createDirectChangeCallback as createTableDirectChangeCallback,
+} from './table-model';
 
 // TODO(burdon): Tests are disabled in project.json since they bring in plugin deps.
 //  Restore once factored out into react-ui-table.
 
-registerSignalsRuntime();
-
 describe('TableModel', () => {
   let updateCount = 0;
-  let model: TableModel;
+  let model: any;
+  let registry: Registry.Registry;
 
   beforeEach(async () => {
     updateCount = 0;
-    model = createTableModel({
+    registry = Registry.make();
+    model = createTableModel(registry, {
       onCellUpdate: () => updateCount++,
     });
     await model.open();
+    model.setRows([
+      { id: '1', title: 'Test', completed: false },
+      { id: '2', title: 'Test 2', completed: true },
+      { id: '3', title: 'Test 3', completed: false },
+    ]);
   });
 
   afterEach(async () => {
@@ -39,75 +45,106 @@ describe('TableModel', () => {
   });
 
   describe('methods', () => {
-    it('should pin a row', () => {
+    test('should pin a row', () => {
       model.pinRow(1, 'top');
       expect(model.pinnedRows.top).toContain(1);
     });
 
-    it('should unpin a row', () => {
+    test('should unpin a row', () => {
       model.pinRow(1, 'top');
       model.unpinRow(1);
       expect(model.pinnedRows.top).not.toContain(1);
     });
 
-    it('should toggle row selection', () => {
+    test('should toggle row selection', () => {
       model.selection.toggleSelectionForRowIndex(2);
-      expect(model.selection.hasSelection.value).toBe(true);
+      expect(model.selection.hasSelection).toBe(true);
     });
 
-    it('should deselect a row', () => {
+    test('should deselect a row', () => {
       model.selection.toggleSelectionForRowIndex(2);
       model.selection.toggleSelectionForRowIndex(2);
-      expect(model.selection.hasSelection.value).toBe(false);
+      expect(model.selection.hasSelection).toBe(false);
     });
 
-    it('should bulk select rows', () => {
+    test('should bulk select rows', () => {
       model.selection.setSelection('all');
-      expect(model.selection.allRowsSeleted.value).toBe(true);
+      expect(model.selection.allRowsSelected).toBe(true);
       model.selection.setSelection('none');
-      expect(model.selection.hasSelection.value).toBe(false);
+      expect(model.selection.hasSelection).toBe(false);
     });
   });
 
   describe('reactivity', () => {
-    it('pure signals should nest', () => {
-      const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
-
-      const computed$ = computed(() => {
-        return signal$.arr.map((row) =>
-          computed(() => {
-            return row.thingInside;
-          }),
-        );
-      });
-
-      using outerCounter = updateCounter(() => {
-        computed$.value.map((c) => c.value);
-      });
-
-      using innerCounter = updateCounter(() => {
-        computed$.value[0].value;
-      });
+    test('rows should update when setRows is called', () => {
+      model.setRows([{ id: '4', title: 'Test 4', completed: false }]);
+      expect(model.getRows()).toHaveLength(1);
+      expect(model.getRows()[0].id).toBe('4');
+
+      model.setRows([
+        { id: '5', title: 'Test 5', completed: false },
+        { id: '6', title: 'Test 6', completed: true },
+      ]);
+      expect(model.getRows()).toHaveLength(2);
+      expect(model.getRows()[0].id).toBe('5');
+      expect(model.getRows()[1].id).toBe('6');
+    });
 
-      expect(computed$.value.map((v) => v.value)).toEqual([1, 2]);
+    test('selection should update when toggled', () => {
+      model.selection.toggleSelectionForRowIndex(0);
+      expect(model.selection.hasSelection).toBe(true);
+      expect(model.selection.selection.size).toBe(1);
 
-      signal$.arr[0].thingInside = 3;
+      model.selection.toggleSelectionForRowIndex(0);
+      expect(model.selection.hasSelection).toBe(false);
+      expect(model.selection.selection.size).toBe(0);
+    });
 
-      expect(computed$.value.map((v) => v.value)).toEqual([3, 2]);
-      expect(outerCounter.count).toBe(1);
-      expect(innerCounter.count).toBe(1);
+    test('derived atoms should reflect current state', () => {
+      // Set initial rows.
+      model.setRows([
+        { id: '1', title: 'Zebra', completed: false },
+        { id: '2', title: 'Apple', completed: true },
+        { id: '3', title: 'Mango', completed: false },
+      ]);
+
+      // Verify rows are accessible.
+      const rows = model.getRows();
+      expect(rows).toHaveLength(3);
+      expect(rows[0].id).toBeDefined();
     });
   });
 });
 
-class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+const Test = Schema.Struct({
   title: Schema.String,
   completed: Schema.Boolean,
-}) {}
-
-const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
+}).pipe(
+  Type.object({
+    typename: 'example.com/type/Test',
+    version: '0.1.0',
+  }),
+);
+
+const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
-  return new TableModel({ view, schema: schema.jsonSchema, ...props });
+  const view = ViewModel.make({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+  });
+  const object = Table.make({ view });
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: schema.jsonSchema,
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
+  });
+  projection.normalizeView();
+  return new TableModel({
+    registry,
+    object,
+    projection,
+    change: createTableDirectChangeCallback(object),
+    ...props,
+  });
 };