@pomwik/afterdb-react 0.0.0-stage → 0.20.1

package/src/__tests__/useQueryHook.test.tsx

@@ -0,0 +1,209 @@
+////////////////////////////////////////////////////////////////////////////
+//
+// Copyright 2021 Realm Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////
+
+import Realm from "realm";
+import { renderHook } from "@testing-library/react-native";
+
+import { createUseQuery } from "../useQuery";
+import { profileHook } from "./profileHook";
+import { createRealmTestContext } from "./createRealmTestContext";
+
+const dogSchema: Realm.ObjectSchema = {
+  name: "dog",
+  primaryKey: "_id",
+  properties: {
+    _id: "int",
+    name: "string",
+    color: "string",
+    age: "int",
+    gender: "string",
+  },
+};
+
+interface IDog {
+  _id: number;
+  name: string;
+  color: string;
+  age: number;
+  gender: string;
+}
+
+const testDataSet = [
+  { _id: 1, name: "Vincent", color: "black and white", gender: "male", age: 4 },
+  { _id: 2, name: "River", color: "brown", gender: "female", age: 12 },
+  { _id: 3, name: "Schatzi", color: "beige", gender: "female", age: 10 },
+  { _id: 4, name: "Victor", color: "dark brown", gender: "male", age: 18 },
+  { _id: 5, name: "Jazz", color: "dark brown", gender: "female", age: 12 },
+  { _id: 6, name: "Sadie", color: "gold", gender: "female", age: 5 },
+];
+
+describe("useQuery", () => {
+  const context = createRealmTestContext({ schema: [dogSchema] });
+  const useQuery = createUseQuery(context.useRealm);
+
+  beforeEach(() => {
+    const realm = context.openRealm();
+    realm.write(() => {
+      realm.deleteAll();
+      testDataSet.forEach((data) => {
+        realm.create("dog", data);
+      });
+    });
+  });
+
+  afterEach(() => {
+    context.cleanup();
+  });
+
+  it("can retrieve collections using useQuery", () => {
+    const { result } = renderHook(() => useQuery<IDog>("dog"));
+    const collection = result.current;
+
+    const [dog1, dog2, dog3] = testDataSet;
+
+    expect(collection).not.toBeNull();
+    expect(collection.length).toBe(6);
+    expect(collection[0]).toMatchObject(dog1);
+    expect(collection[1]).toMatchObject(dog2);
+    expect(collection[2]).toMatchObject(dog3);
+  });
+  it("returns the same collection reference if there are no changes", () => {
+    const { result } = renderHook(() => useQuery<IDog>("dog"));
+    const collection = result.current;
+
+    expect(collection).not.toBeNull();
+    expect(collection.length).toBe(6);
+    expect(collection[0]).toEqual(collection?.[0]);
+  });
+  it("should return undefined indexes that are out of bounds", () => {
+    const { result } = renderHook(() => useQuery<IDog>("dog"));
+    const collection = result.current;
+
+    expect(collection[99]).toBe(undefined);
+  });
+
+  it("can filter objects via type and callback", () => {
+    const { result } = renderHook(() => useQuery<IDog>("dog", (dogs) => dogs.filtered("age > 10")));
+    expect(result.current.length).toBe(3);
+  });
+
+  describe("passing function as 1st argument, deps as 2nd and options as 3rd", () => {
+    it("can filter objects via a 'query' property", () => {
+      const { result, renders } = profileHook(() =>
+        useQuery<IDog>((dogs) => dogs.filtered("age > 10"), [], { type: "dog" }),
+      );
+      expect(result.current.length).toBe(3);
+      expect(renders).toHaveLength(1);
+    });
+  });
+  describe("passing an object of options as argument", () => {
+    it("can filter objects via a 'query' property", () => {
+      const { result, renders } = profileHook(() =>
+        useQuery<IDog>({
+          type: "dog",
+          query: (dogs) => dogs.filtered("age > 10"),
+        }),
+      );
+      expect(result.current.length).toBe(3);
+      expect(renders).toHaveLength(1);
+    });
+
+    it("can update filter objects via a 'query' property", () => {
+      const { result, renders, rerender } = profileHook(
+        ({ age }) =>
+          useQuery<IDog>(
+            {
+              type: "dog",
+              query: (dogs) => dogs.filtered("age > $0", age),
+            },
+            [age],
+          ),
+        { initialProps: { age: 10 } },
+      );
+      expect(result.current.length).toBe(3);
+      expect(renders).toHaveLength(1);
+
+      // Update the query to filter for a different age
+      rerender({ age: 15 });
+      expect(result.current.length).toBe(1);
+      expect(renders).toHaveLength(2);
+    });
+
+    it("can filter notifications using key-path array", async () => {
+      const { write } = context;
+      const { result, renders } = profileHook(() =>
+        useQuery<IDog>({
+          type: "dog",
+          query: (dogs) => dogs.filtered("age > 10"),
+          keyPaths: ["name"],
+        }),
+      );
+
+      const initialCollection = result.current;
+      expect(initialCollection).toHaveLength(3);
+      expect(renders).toHaveLength(1);
+
+      // Updating a name in the database and expect a render
+      const [firstDog] = result.current;
+      expect(firstDog.name).toEqual("River");
+      write(() => {
+        firstDog.name = "Rivery!";
+      });
+      expect(renders).toHaveLength(2);
+      expect(initialCollection).not.toBe(result.current);
+
+      // Updating an age in the database and don't expect a render
+      expect(firstDog.age).toEqual(12);
+      write(() => {
+        firstDog.age = 13;
+      });
+      expect(renders).toHaveLength(2);
+    });
+
+    it("can filter notifications using key-path string", async () => {
+      const { write } = context;
+      const { result, renders } = profileHook(() =>
+        useQuery<IDog>({
+          type: "dog",
+          query: (dogs) => dogs.filtered("name != $0", "Vincent"),
+          keyPaths: "age",
+        }),
+      );
+
+      const initialCollection = result.current;
+      expect(initialCollection).toHaveLength(5);
+      expect(renders).toHaveLength(1);
+
+      // Updating an age in the database and expect a render
+      const [firstDog] = result.current;
+      expect(firstDog.name).toEqual("River");
+      write(() => {
+        firstDog.age = 16;
+      });
+      expect(renders).toHaveLength(2);
+      expect(initialCollection).not.toBe(result.current);
+
+      // Updating a name in the database and don't expect a render
+      expect(firstDog.age).toEqual(16);
+      write(() => {
+        firstDog.name = "Rivery!";
+      });
+      expect(renders).toHaveLength(2);
+    });
+  });
+});

package/src/__tests__/useQueryRender.test.tsx

@@ -0,0 +1,463 @@
+////////////////////////////////////////////////////////////////////////////
+//
+// Copyright 2021 Realm Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Realm from "realm";
+import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import { FlatList, ListRenderItem, Text, TextInput, TouchableHighlight, View } from "react-native";
+
+import { createRealmContext } from "..";
+import { randomRealmPath } from "./helpers";
+
+class Item extends Realm.Object {
+  id!: number;
+  name!: string;
+  tags!: Realm.List<Tag>;
+
+  static schema = {
+    name: "Item",
+    primaryKey: "id",
+    properties: {
+      id: "int",
+      name: "string",
+      tags: "Tag[]",
+    },
+  };
+}
+
+class Tag extends Realm.Object {
+  id!: number;
+  name!: string;
+
+  static schema = {
+    name: "Tag",
+    primaryKey: "id",
+    properties: {
+      id: "int",
+      name: "string",
+    },
+  };
+}
+
+// TODO: It would be better not to have to rely on this, but at the moment I see no other alternatives
+function forceSynchronousNotifications(realm: Realm) {
+  // Starting a transaction will force all listeners to advance to the latest version
+  // and deliver notifications. We don't need to commit the transaction for this to work.
+  realm.beginTransaction();
+  realm.cancelTransaction();
+}
+
+const testCollection = [...new Array(30)].map((_, index) => ({ id: index, name: `${index}` }));
+
+const configuration: Realm.Configuration = {
+  schema: [Item, Tag],
+  inMemory: true,
+  path: randomRealmPath(),
+};
+
+const itemRenderCounter = jest.fn();
+const tagRenderCounter = jest.fn();
+const queryObjectChangeCounter = jest.fn();
+
+let testRealm: Realm = new Realm(configuration);
+
+const { useQuery, useObject, RealmProvider, useRealm } = createRealmContext(configuration);
+
+enum QueryType {
+  filtered,
+  sorted,
+  normal,
+}
+
+const App = ({ queryType = QueryType.normal, useUseObject = false }) => {
+  return (
+    <RealmProvider>
+      <SetupComponent>
+        <View testID="testContainer">
+          <TestComponent queryType={queryType} useUseObject={useUseObject} />
+        </View>
+      </SetupComponent>
+    </RealmProvider>
+  );
+};
+
+const SetupComponent = ({ children }: { children: JSX.Element }): JSX.Element | null => {
+  const realm = useRealm();
+  const [setupComplete, setSetupComplete] = useState(false);
+  useEffect(() => {
+    realm.write(() => {
+      realm.deleteAll();
+      testCollection.forEach((object) => new Item(realm, object));
+    });
+    setSetupComplete(true);
+  }, [realm]);
+
+  if (!setupComplete) {
+    return null;
+  }
+
+  return children;
+};
+
+const UseObjectItemComponent: React.FC<{ item: Item | (Item & Realm.Object) }> = React.memo(({ item }) => {
+  // Testing that useObject also works and properly handles renders
+  const localItem = useObject(Item, item.id);
+  if (!localItem) {
+    return null;
+  }
+  return <ItemComponent item={localItem}></ItemComponent>;
+});
+
+const renderTag: ListRenderItem<Tag> = ({ item }) => <TagComponent tag={item} />;
+const tagKeyExtractor = (item: Tag) => `tag-${item.id}`;
+
+const ItemComponent: React.FC<{ item: Item | (Item & Realm.Object) }> = React.memo(({ item }) => {
+  itemRenderCounter();
+  const realm = useRealm();
+
+  return (
+    <View testID={`result${item.id}`}>
+      <View testID={`name${item.name}`}>
+        <Text>{item.name}</Text>
+      </View>
+      <TextInput
+        testID={`input${item.id}`}
+        value={item.name}
+        onChangeText={(text) => {
+          realm.write(() => {
+            item.name = text;
+          });
+        }}
+      ></TextInput>
+      <TouchableHighlight
+        testID={`deleteButton${item.id}`}
+        onPress={() => {
+          realm.write(() => {
+            realm.delete(item);
+          });
+        }}
+      >
+        <Text>Delete</Text>
+      </TouchableHighlight>
+      <FlatList
+        horizontal={true} // Make this internal list horizontal to avoid invariant error
+        testID={`tagList-${item.id}`}
+        data={item.tags}
+        keyExtractor={tagKeyExtractor}
+        renderItem={renderTag}
+      />
+    </View>
+  );
+});
+
+const TagComponent: React.FC<{ tag: Tag }> = React.memo(({ tag }) => {
+  tagRenderCounter();
+  return (
+    <View testID={`tagResult${tag.id}`}>
+      <View testID={`tagName${tag.id}`}>
+        <Text>{tag.name}</Text>
+      </View>
+    </View>
+  );
+});
+
+const FILTER_ARGS: [string] = ["id < 20"];
+const SORTED_ARGS: [string, boolean] = ["id", true];
+
+const keyExtractor = (item: Item & Realm.Object) => `${item.id}`;
+
+const TestComponent = ({ queryType, useUseObject }: { queryType: QueryType; useUseObject: boolean }) => {
+  const collection = useQuery(Item);
+
+  const [counter, setCounter] = useState(0);
+
+  const result = useMemo(() => {
+    switch (queryType) {
+      case QueryType.filtered:
+        return collection.filtered(...FILTER_ARGS);
+      case QueryType.sorted:
+        return collection.sorted(...SORTED_ARGS);
+      case QueryType.normal:
+        return collection;
+    }
+  }, [queryType, collection]);
+
+  // This useEffect is to test that the list object reference is not changing when
+  // the component is re-rendered.
+  useEffect(() => {
+    queryObjectChangeCounter();
+  }, [result]);
+
+  const renderItem = useCallback<ListRenderItem<Item & Realm.Object>>(
+    ({ item }) => (useUseObject ? <UseObjectItemComponent item={item} /> : <ItemComponent item={item} />),
+    [useUseObject],
+  );
+
+  return (
+    <>
+      <FlatList testID={"list"} data={result} keyExtractor={keyExtractor} renderItem={renderItem} />;
+      <TouchableHighlight
+        testID={`rerenderButton`}
+        onPress={() => {
+          setCounter(counter + 1);
+        }}
+      >
+        <Text>Rerender</Text>
+      </TouchableHighlight>
+    </>
+  );
+};
+
+function getTestCollection(queryType: QueryType) {
+  switch (queryType) {
+    case QueryType.filtered:
+      return testRealm.objects(Item).filtered(...FILTER_ARGS);
+    case QueryType.sorted:
+      return testRealm.objects(Item).sorted(...SORTED_ARGS);
+    case QueryType.normal:
+      return testRealm.objects(Item);
+  }
+}
+
+type setupOptions = {
+  queryType?: QueryType;
+  useUseObject?: boolean;
+};
+
+const setupTest = async ({ queryType = QueryType.normal, useUseObject = false }: setupOptions) => {
+  const renderResult = render(<App queryType={queryType} useUseObject={useUseObject} />);
+  await waitFor(() => renderResult.getByTestId("testContainer"));
+
+  const collection = getTestCollection(queryType);
+  expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+
+  return { ...renderResult, collection };
+};
+
+describe.each`
+  queryTypeName | queryType
+  ${"normal"}   | ${QueryType.normal}
+  ${"filtered"} | ${QueryType.filtered}
+  ${"sorted"}   | ${QueryType.sorted}
+`("useQueryRender: $queryTypeName", ({ queryType }) => {
+  beforeEach(() => {
+    testRealm = new Realm(configuration);
+  });
+  afterEach(() => {
+    itemRenderCounter.mockClear();
+    tagRenderCounter.mockClear();
+    queryObjectChangeCounter.mockClear();
+    Realm.clearTestState();
+  });
+
+  it("renders data in one render cycle per visible object in collection", async () => {
+    const { getByTestId } = render(<App queryType={queryType} />);
+
+    await waitFor(() => getByTestId("list"));
+
+    expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+  });
+  it("change to data will rerender", async () => {
+    const { getByTestId, getByText, collection } = await setupTest({ queryType });
+
+    const firstItem = collection[0];
+    const id = firstItem.id;
+
+    const nameElement = getByTestId(`name${id}`);
+    const input = getByTestId(`input${id}`);
+
+    expect(nameElement).toHaveTextContent(`${id}`);
+
+    fireEvent.changeText(input, "apple");
+
+    // Wait for change events to finish their callbacks
+    await act(async () => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(nameElement).toHaveTextContent("apple");
+    expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+  });
+
+  // TODO:  This is a known issue that we have to live with until it is possible
+  // to retrieve the objectId from a deleted object in a listener callback
+  it.skip("handles deletions", async () => {
+    const { getByTestId, collection } = await setupTest({ queryType });
+
+    const firstItem = collection[0];
+    const id = firstItem.id;
+
+    const nextVisible = collection[10];
+
+    const deleteButton = getByTestId(`deleteButton${id}`);
+    const nameElement = getByTestId(`name${id}`);
+
+    expect(nameElement).toHaveTextContent(`${id}`);
+    expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+
+    fireEvent.press(deleteButton);
+
+    await waitFor(() => getByTestId(`name${nextVisible.id}`));
+
+    expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+  });
+  it("an implicit update to an item in the FlatList view area causes a rerender", async () => {
+    const { collection } = await setupTest({ queryType });
+
+    testRealm.write(() => {
+      collection[0].name = "apple";
+    });
+
+    // One could wait for "apple", but I want to mirror the underlying non-rerender test
+    await act(async () => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+  });
+
+  it("does not rerender if the update is out of the FlatList view area", async () => {
+    const { collection } = await setupTest({ queryType });
+
+    testRealm.write(() => {
+      const lastIndex = collection.length - 1;
+      collection[lastIndex].name = "apple";
+    });
+
+    await act(async () => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+  });
+  it("collection objects rerender on changes to their linked objects", async () => {
+    const { collection, getByText, queryByText } = await setupTest({ queryType });
+
+    // Insert some tags into visible Items
+    testRealm.write(() => {
+      const tag1 = testRealm.create(Tag, { id: 1, name: "a123" });
+      const tag2 = testRealm.create(Tag, { id: 2, name: "b234" });
+      const tag3 = testRealm.create(Tag, { id: 3, name: "c567" });
+
+      collection[0].tags.push(tag1);
+      collection[0].tags.push(tag2);
+
+      collection[1].tags.push(tag1);
+      collection[1].tags.push(tag2);
+
+      collection[2].tags.push(tag1);
+      collection[2].tags.push(tag2);
+      collection[2].tags.push(tag3);
+    });
+
+    act(() => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(getByText("c567")).not.toBeNull();
+
+    expect(tagRenderCounter).toHaveBeenCalledTimes(7);
+
+    // Changes to a linked object will re-render once
+    testRealm.write(() => {
+      collection[2].tags[2].name = "765c";
+    });
+
+    act(() => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(getByText("765c")).not.toBeNull();
+
+    testRealm.write(() => {
+      testRealm.delete(collection[2].tags[2]);
+    });
+
+    act(() => {
+      forceSynchronousNotifications(testRealm);
+    });
+
+    expect(queryByText("756c")).toBeNull();
+  });
+  // This replicates the issue https://github.com/realm/realm-js/issues/4375
+  it("will handle multiple async transactions", async () => {
+    const { queryByTestId, unmount } = await setupTest({ queryType, useUseObject: true });
+    const performTest = async () => {
+      testRealm.write(() => {
+        testRealm.deleteAll();
+      });
+      let i = 0;
+      while (i < 10) {
+        await new Promise<void>((resolve) => setTimeout(resolve, 10));
+        const id = i;
+        testRealm.write(() => {
+          return new Item(testRealm, { id, name: `${id}` });
+        });
+        await new Promise<void>((resolve) => setTimeout(resolve, 0));
+        testRealm.write(() => {
+          const item = testRealm.objectForPrimaryKey(Item, id);
+          if (item) {
+            item.name = `${id + 100}`;
+          }
+        });
+        i++;
+      }
+    };
+
+    await act(async () => {
+      await performTest();
+    });
+
+    await waitFor(() => queryByTestId(`name${109}`));
+
+    unmount();
+  });
+
+  it("will return the same reference when state changes", async () => {
+    const { getByTestId } = await setupTest({ queryType });
+
+    // Force a rerender
+    const rerenderButton = getByTestId("rerenderButton");
+
+    // Update the state twice to ensure the object reference is the same and we don't have a false positive
+    fireEvent.press(rerenderButton);
+    expect(queryObjectChangeCounter).toHaveBeenCalledTimes(1);
+
+    fireEvent.press(rerenderButton);
+    expect(queryObjectChangeCounter).toHaveBeenCalledTimes(1);
+  });
+
+  it("will rerender when the realm database is cleared", async () => {
+    await setupTest({ queryType });
+
+    const initialCount = 1;
+
+    expect(queryObjectChangeCounter).toHaveBeenCalledTimes(initialCount);
+
+    await act(async () => {
+      testRealm.write(() => {
+        testRealm.deleteAll();
+      });
+      forceSynchronousNotifications(testRealm);
+    });
+
+    await new Promise<void>((resolve) => setTimeout(resolve, 1000));
+
+    expect(queryObjectChangeCounter).toHaveBeenCalledTimes(initialCount + 1);
+  });
+});