@pomwik/afterdb-react 0.0.0-stage → 0.20.1

package/src/__tests__/useObjectRender.test.tsx

@@ -0,0 +1,630 @@
+////////////////////////////////////////////////////////////////////////////
+//
+// Copyright 2022 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 { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import React, { useEffect, useState } from "react";
+import { FlatList, ListRenderItem, Text, TextInput, TouchableHighlight, View } from "react-native";
+import Realm from "realm";
+
+import { createUseObject } from "../useObject";
+import { randomRealmPath } from "./helpers";
+
+export class ListItem extends Realm.Object {
+  id!: Realm.BSON.ObjectId;
+  name!: string;
+  lists!: Realm.List<List>;
+
+  static schema: Realm.ObjectSchema = {
+    name: "ListItem",
+    properties: {
+      id: "objectId",
+      name: "string",
+      lists: {
+        type: "linkingObjects",
+        objectType: "List",
+        property: "items",
+      },
+    },
+    primaryKey: "id",
+  };
+}
+
+export class List extends Realm.Object {
+  id!: Realm.BSON.ObjectId;
+  title!: string;
+  items!: Realm.List<ListItem>;
+  favoriteItem?: ListItem;
+  tags!: Realm.List<string>;
+
+  static schema: Realm.ObjectSchema = {
+    name: "List",
+    properties: {
+      id: "objectId",
+      title: "string",
+      items: "ListItem[]",
+      favoriteItem: "ListItem",
+      tags: "string[]",
+    },
+    primaryKey: "id",
+  };
+}
+
+const configuration: Realm.Configuration = {
+  schema: [List, ListItem],
+  deleteRealmIfMigrationNeeded: true,
+  path: randomRealmPath(),
+};
+
+// 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 itemRenderCounter = jest.fn();
+const listRenderCounter = jest.fn();
+const objectChangeCounter = jest.fn();
+const listChangeCounter = jest.fn();
+
+const testRealm: Realm = new Realm(configuration);
+
+const testCollection = [...new Array(100)].map(() => {
+  const id = new Realm.BSON.ObjectId();
+  return { id, name: id.toHexString() };
+});
+
+const useRealm = () => {
+  return testRealm;
+};
+
+const useObject = createUseObject(useRealm);
+
+// setting renderItems to false will invoke `useObject` but not actual display the data
+// this is to test that the changes to the object is still trigger a rerender, even when not displayed
+// see https://github.com/realm/realm-js/issues/5185
+const App = ({ renderItems = true, targetPrimaryKey = parentObjectId }) => {
+  return (
+    <SetupComponent>
+      <TestComponent testID="testContainer" renderItems={renderItems} targetPrimaryKey={targetPrimaryKey} />
+    </SetupComponent>
+  );
+};
+
+const parentObjectId = new Realm.BSON.ObjectId();
+
+const SetupComponent = ({ children }: { children: JSX.Element }): JSX.Element | null => {
+  const realm = useRealm();
+
+  /*
+  useEffect(() => {
+    return () => {
+      realm.close();
+    };
+  }, [realm]);
+  */
+
+  const [setupComplete, setSetupComplete] = useState(false);
+  useEffect(() => {
+    realm.write(() => {
+      realm.deleteAll();
+    });
+    setSetupComplete(true);
+  }, [realm]);
+
+  if (!setupComplete) {
+    return null;
+  }
+
+  return children;
+};
+
+const Item: React.FC<{ item: ListItem }> = React.memo(({ item }) => {
+  itemRenderCounter();
+  const realm = useRealm();
+  const idString = item.id.toHexString();
+
+  return (
+    <View testID={`result${idString}`}>
+      <View testID={`name${idString}`}>
+        <Text>{item.name}</Text>
+      </View>
+      <TextInput
+        testID={`input${idString}`}
+        value={item.name}
+        onChangeText={(text) => {
+          realm.write(() => {
+            item.name = text;
+          });
+        }}
+      ></TextInput>
+      <TouchableHighlight
+        testID={`deleteButton${idString}`}
+        onPress={() => {
+          realm.write(() => {
+            realm.delete(item);
+          });
+        }}
+      >
+        <Text>Delete</Text>
+      </TouchableHighlight>
+    </View>
+  );
+});
+
+const keyExtractor = (item: ListItem) => `${item.id}`;
+
+const renderItem: ListRenderItem<ListItem> = ({ item }) => <Item item={item} />;
+
+const ItemList: React.FC<{ list: Realm.List<ListItem> }> = React.memo(({ list }) => {
+  const [counter, setCounter] = useState(0);
+
+  // This useEffect is to test that the list object reference is not changing when
+  // the component is re-rendered.
+  useEffect(() => {
+    listChangeCounter();
+  }, [list]);
+
+  return (
+    <>
+      <FlatList data={list} keyExtractor={keyExtractor} renderItem={renderItem} />
+      <TouchableHighlight
+        testID={`rerenderListButton`}
+        onPress={() => {
+          setCounter(counter + 1);
+        }}
+      >
+        <Text>Rerender</Text>
+      </TouchableHighlight>
+    </>
+  );
+});
+
+const TestComponent: React.FC<{ testID?: string; renderItems?: boolean; targetPrimaryKey: Realm.BSON.ObjectId }> = ({
+  testID,
+  renderItems,
+  targetPrimaryKey,
+}) => {
+  const list = useObject(List, targetPrimaryKey);
+  const realm = useRealm();
+  const [counter, setCounter] = useState(0);
+
+  // This useEffect is to test that the list object reference is not changing when
+  // the component is re-rendered.
+  useEffect(() => {
+    objectChangeCounter();
+  }, [list]);
+
+  if (list === null) {
+    return <View testID={testID} />;
+  }
+
+  listRenderCounter();
+
+  const listIdString = list.id.toHexString();
+
+  return (
+    <View testID={testID}>
+      <View testID="list">{renderItems && <ItemList list={list.items} />}</View>
+      <View testID={`list${listIdString}`}>
+        <View testID={`listTitle${listIdString}`}>
+          <Text>{list.title}</Text>
+        </View>
+        <TextInput
+          testID={`listTitleInput${listIdString}`}
+          value={list.title}
+          onChangeText={(text) => {
+            realm.write(() => {
+              list.title = text;
+            });
+          }}
+        ></TextInput>
+        <TouchableHighlight
+          testID={`deleteListButton${listIdString}`}
+          onPress={() => {
+            realm.write(() => {
+              realm.delete(list);
+            });
+          }}
+        >
+          <Text>Delete</Text>
+        </TouchableHighlight>
+      </View>
+      {list?.favoriteItem && (
+        <View testID={`favoriteItem-${list?.favoriteItem.name}`}>
+          <Text>{list?.favoriteItem.name}</Text>
+        </View>
+      )}
+      <Text>{list?.tags[0]}</Text>
+      <TouchableHighlight
+        testID={`rerenderObjectButton`}
+        onPress={() => {
+          setCounter(counter + 1);
+        }}
+      >
+        <Text>Rerender</Text>
+      </TouchableHighlight>
+    </View>
+  );
+};
+
+async function setupTest() {
+  const { getByTestId, getByText, debug, rerender } = render(<App />);
+  await waitFor(() => getByTestId("testContainer"));
+
+  // In order to test that `useObject` brings the non-existing object into view when it's created,
+  // we do the creation after the app is rendered.
+  testRealm.write(() => {
+    testRealm.create(List, { id: parentObjectId, title: "List", items: testCollection });
+  });
+
+  const object = testRealm.objectForPrimaryKey(List, parentObjectId);
+  if (!object) throw new Error("Object not found in Realm");
+  await waitFor(() => getByTestId("list"));
+  const collection = object.items;
+
+  expect(listRenderCounter).toHaveBeenCalledTimes(1);
+  expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+
+  return { getByTestId, getByText, debug, object, collection, rerender };
+}
+
+describe("useObject: rendering objects with a Realm.List property", () => {
+  afterEach(() => {
+    listRenderCounter.mockClear();
+    itemRenderCounter.mockClear();
+    objectChangeCounter.mockClear();
+    listChangeCounter.mockClear();
+  });
+
+  afterAll(() => {
+    testRealm.close();
+  });
+
+  describe("rendering single object", () => {
+    it("renders an object in one render cycle", async () => {
+      const { getByTestId } = render(<App />);
+
+      // In order to test that `useObject` brings the non-existing object into view when it's created,
+      // we do the creation after the app is rendered.
+      testRealm.write(() => {
+        testRealm.create(List, { id: parentObjectId, title: "List", items: testCollection });
+      });
+
+      await waitFor(() => getByTestId("list"));
+
+      expect(listRenderCounter).toHaveBeenCalledTimes(1);
+    });
+
+    it("only re-renders the changed object when a property changes", async () => {
+      const { getByTestId, getByText, object } = await setupTest();
+
+      const idString = object.id.toHexString();
+
+      const titleElement = getByTestId(`listTitle${idString}`);
+      const inputComponent = getByTestId(`listTitleInput${idString}`);
+
+      expect(titleElement).toHaveTextContent("List");
+      expect(listRenderCounter).toHaveBeenCalledTimes(1);
+
+      fireEvent.changeText(inputComponent, "ChangedList");
+
+      await waitFor(() => getByText("ChangedList"));
+
+      expect(titleElement).toHaveTextContent("ChangedList");
+      expect(listRenderCounter).toHaveBeenCalledTimes(2);
+    });
+
+    it("it nullifies the object when it is deleted", async () => {
+      const { getByTestId, object } = await setupTest();
+
+      const idString = object.id.toHexString();
+
+      const deleteButton = getByTestId(`deleteListButton${idString}`);
+
+      fireEvent.press(deleteButton);
+
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(object.isValid()).toBe(false);
+
+      expect(testRealm.objectForPrimaryKey(List, parentObjectId)).toBe(null);
+
+      const testContainer = getByTestId("testContainer");
+      expect(testContainer).toBeEmptyElement();
+
+      // List is now gone, so it wasn't detected as a render
+      expect(listRenderCounter).toHaveBeenCalledTimes(1);
+    });
+
+    it("test changes to linked object", async () => {
+      const { getByTestId } = await setupTest();
+      const object = testRealm.objectForPrimaryKey(List, parentObjectId);
+      if (!object) throw new Error("Object not found in Realm");
+
+      await act(async () => {
+        testRealm.write(() => {
+          object.favoriteItem = object.items[0];
+        });
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(getByTestId(`favoriteItem-${object.items[0].name}`)).toBeTruthy();
+
+      await act(async () => {
+        testRealm.write(() => {
+          object.favoriteItem = object.items[1];
+        });
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(getByTestId(`favoriteItem-${object.items[1].name}`)).toBeTruthy();
+
+      await act(async () => {
+        testRealm.write(() => {
+          object.items[1].name = "apple";
+        });
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(getByTestId(`favoriteItem-${object.items[1].name}`)).toBeTruthy();
+
+      // We should only have re-rendered once, as only the last change actually modified an item
+      expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+    });
+
+    it("renders a different list if the target primary key changes", async () => {
+      const { rerender, getByTestId } = await setupTest();
+
+      const secondListId = new Realm.BSON.ObjectId();
+
+      testRealm.write(() => {
+        testRealm.create(List, { id: secondListId, title: "Second List", items: [] });
+      });
+
+      rerender(<App targetPrimaryKey={secondListId} />);
+
+      let titleElement = getByTestId(`listTitle${secondListId.toHexString()}`);
+      expect(titleElement).toHaveTextContent("Second List");
+
+      const thirdListId = new Realm.BSON.ObjectId();
+
+      testRealm.write(() => {
+        testRealm.create(List, { id: thirdListId, title: "Third List", items: [] });
+      });
+
+      rerender(<App targetPrimaryKey={thirdListId} />);
+
+      titleElement = getByTestId(`listTitle${thirdListId.toHexString()}`);
+      expect(titleElement).toHaveTextContent("Third List");
+
+      // Render the old id
+      rerender(<App targetPrimaryKey={secondListId} />);
+
+      await waitFor(() => getByTestId(`listTitle${secondListId.toHexString()}`));
+      titleElement = getByTestId(`listTitle${secondListId.toHexString()}`);
+      expect(titleElement).toHaveTextContent("Second List");
+    });
+    it("will return the same reference when state changes", async () => {
+      const { getByTestId } = await setupTest();
+
+      // Force a rerender
+      const rerenderButton = getByTestId("rerenderObjectButton");
+
+      // We expect the object to be re-rendered 3 times, once for the initial render, once for the
+      // object itself coming into existence, and once adding list of items to the list
+      const expectedCount = 3;
+
+      // Update the state twice to ensure the object reference is the same and we don't have a false positive
+      fireEvent.press(rerenderButton);
+      expect(objectChangeCounter).toHaveBeenCalledTimes(expectedCount);
+
+      fireEvent.press(rerenderButton);
+      expect(objectChangeCounter).toHaveBeenCalledTimes(expectedCount);
+    });
+    it("will rerender when the realm database is cleared", async () => {
+      await setupTest();
+
+      const initialCount = 2;
+
+      expect(objectChangeCounter).toHaveBeenCalledTimes(initialCount);
+
+      await act(async () => {
+        testRealm.write(() => {
+          testRealm.deleteAll();
+        });
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(objectChangeCounter).toHaveBeenCalledTimes(initialCount + 1);
+    });
+  });
+
+  describe("rendering objects with a Realm.List property", () => {
+    it("renders each visible item in the list once", async () => {
+      const { getByTestId } = render(<App />);
+
+      testRealm.write(() => {
+        testRealm.create(List, { id: parentObjectId, title: "List", items: testCollection });
+      });
+
+      await waitFor(() => getByTestId("list"));
+
+      expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+    });
+
+    it("only re-renders the changed item when a list item's data changes", async () => {
+      const { getByTestId, getByText, collection } = await setupTest();
+
+      const id = collection[0].id;
+
+      const idString = id.toHexString();
+
+      const nameElement = getByTestId(`name${idString}`);
+      const input = getByTestId(`input${idString}`);
+
+      expect(nameElement).toHaveTextContent(idString);
+
+      fireEvent.changeText(input, "apple");
+
+      await waitFor(() => getByText("apple"));
+
+      expect(nameElement).toHaveTextContent("apple");
+      expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+    });
+
+    // This is a restriction of the current implementation as we do not know the
+    // id of a deleted item, ideally this would only re-render once
+    it("re-renders every visible item in the list when an item is deleted", async () => {
+      const { getByTestId, collection } = await setupTest();
+
+      const firstItem = collection[0];
+      const id = firstItem.id;
+
+      const idString = id.toHexString();
+
+      const nextVisible = collection[10];
+
+      const deleteButton = getByTestId(`deleteButton${idString}`);
+      const nameElement = getByTestId(`name${idString}`);
+
+      expect(nameElement).toHaveTextContent(idString);
+      expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+
+      fireEvent.press(deleteButton);
+
+      const nextIdString = nextVisible.id.toHexString();
+
+      await waitFor(() => getByTestId(`name${nextIdString}`));
+
+      expect(itemRenderCounter).toHaveBeenCalledTimes(20);
+    });
+
+    it("only re-renders the changed item when a visible list item is modified without a UI interaction", async () => {
+      const { collection } = await setupTest();
+      testRealm.write(() => {
+        collection[0].name = "apple";
+      });
+
+      // Force Realm listeners to fire rather than waiting for the text "apple"
+      // to appear, in order to match how the subsequent "does not re-render"
+      // test works.
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+    });
+
+    it("only renders the new item when a list item is added", async () => {
+      const { collection } = await setupTest();
+      testRealm.write(() => {
+        collection.unshift(testRealm.create(ListItem, { id: new Realm.BSON.ObjectId(), name: "apple" }));
+      });
+
+      // Force Realm listeners to fire rather than waiting for the text "apple"
+      // to appear, in order to match how the subsequent "does not re-render"
+      // test works.
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(itemRenderCounter).toHaveBeenCalledTimes(11);
+    });
+
+    it("does not re-render if an invisible list item is modified without a UI interaction", async () => {
+      const { collection } = await setupTest();
+
+      testRealm.write(() => {
+        const lastIndex = collection.length - 1;
+        collection[lastIndex].name = "apple";
+      });
+
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(itemRenderCounter).toHaveBeenCalledTimes(10);
+    });
+
+    it("test that primitive lists render correctly", async () => {
+      const { object } = await setupTest();
+
+      testRealm.write(() => {
+        const tags = ["apple", "banana", "cherry", "durian", "eggplant"];
+        object.tags.push(...tags);
+      });
+
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      // no assertion here, just checking that the test doesn't crash
+    });
+
+    it("re-renders the list even if the list items have not been rendered", async () => {
+      const { getByTestId } = render(<App renderItems={false} />);
+
+      const list = testRealm.write(() => {
+        return testRealm.create(List, { id: parentObjectId, title: "List" });
+      });
+
+      await waitFor(() => getByTestId("list"));
+
+      expect(listRenderCounter).toHaveBeenCalledTimes(1);
+
+      testRealm.write(() => {
+        list.items.push(testRealm.create(ListItem, testCollection[0]));
+      });
+
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+
+      expect(listRenderCounter).toHaveBeenCalledTimes(2);
+
+      testRealm.write(() => {
+        list.items.push(testRealm.create(ListItem, testCollection[1]));
+      });
+
+      await act(async () => {
+        forceSynchronousNotifications(testRealm);
+      });
+      expect(listRenderCounter).toHaveBeenCalledTimes(3);
+    });
+  });
+  it("will return the same reference when state changes", async () => {
+    const { getByTestId } = await setupTest();
+
+    // Force a rerender
+    const rerenderButton = getByTestId("rerenderListButton");
+
+    // We expect the object to be re-rendered 2 times, once for the initial render
+    // and once for adding list of items to the list
+    const expectedCount = 2;
+
+    // Update the state twice to ensure the object reference is the same and we don't have a false positive
+    fireEvent.press(rerenderButton);
+    expect(objectChangeCounter).toHaveBeenCalledTimes(expectedCount);
+    fireEvent.press(rerenderButton);
+    expect(objectChangeCounter).toHaveBeenCalledTimes(expectedCount);
+  });
+});