test: add stress test for note creation & switching

apps/web/__e2e__/notes.test.js

@@ -39,13 +39,17 @@ const { LoremIpsum } = require("lorem-ipsum");
  */
 var page = null;
 
-async function createNoteAndCheckPresence(note = NOTE, viewId = "home") {
+async function createNoteAndCheckPresence(
+  note = NOTE,
+  viewId = "home",
+  index = 0
+) {
   await createNote(note, "notes");
 
   // make sure the note has saved.
   await page.waitForTimeout(200);
 
-  let noteSelector = await checkNotePresence(viewId, 0, note);
+  let noteSelector = await checkNotePresence(viewId, index, note);
 
   await page.click(noteSelector, { button: "left" });
 
@@ -520,7 +524,7 @@ test.describe("stress tests", () => {
         const title = lorem.generateSentences(1);
         const content = lorem.generateSentences(2);
 
-        await createNoteAndCheckPresence({ title, content });
+        await createNoteAndCheckPresence({ title, content }, "home", 0);
 
         expect(await getEditorTitle()).toBe(title);
 
@@ -528,4 +532,56 @@ test.describe("stress tests", () => {
       });
     }
   });
+
+  test("create & switch between 100 notes", async ({ page }, info) => {
+    info.setTimeout(0);
+
+    const lorem = new LoremIpsum({
+      sentencesPerParagraph: {
+        max: 8,
+        min: 4,
+      },
+      wordsPerSentence: {
+        max: 16,
+        min: 4,
+      },
+    });
+
+    const NOTES_COUNT = 100;
+
+    let notes = [];
+    for (let i = 0; i < NOTES_COUNT; ++i) {
+      await test.step(`creating test note ${i + 1}`, async () => {
+        const title = lorem.generateSentences(1);
+        const content = lorem.generateSentences(2);
+
+        await createNoteAndCheckPresence({ title, content }, "home", 0);
+
+        expect(await getEditorTitle()).toBe(title);
+
+        expect(await getEditorContent()).toBe(content);
+
+        notes.push({ title, content });
+      });
+    }
+
+    await page.reload();
+
+    for (let i = NOTES_COUNT - 1; i >= 0; i--) {
+      await test.step(`switching test note ${i + 1}`, async () => {
+        const note = notes[i];
+        let noteSelector = await checkNotePresence(
+          "home",
+          NOTES_COUNT - 1 - i,
+          note
+        );
+
+        await page.click(noteSelector);
+
+        expect(await getEditorTitle()).toBe(note.title);
+
+        expect(await getEditorContent()).toBe(note.content);
+      });
+    }
+  });
 });

apps/web/__e2e__/utils/conditions.js

@@ -29,16 +29,17 @@ async function isToastPresent() {
 }
 
 async function checkNotePresence(viewId, index = 0, note = NOTE) {
-  let noteSelector = List.new("note")
-    .view(viewId)
-    .grouped()
-    .atIndex(index)
-    .title();
-  noteSelector = noteSelector.build();
+  let noteSelector = List.new("note").view(viewId).grouped().atIndex(index);
+  // noteSelector = noteSelector.build();
 
-  await page.waitForSelector(noteSelector, { state: "attached" });
-  await expect(page.innerText(noteSelector)).resolves.toBe(note.title);
-  return noteSelector;
+  await page.waitForSelector(noteSelector.build(), { state: "attached" });
+
+  await (await page.$(noteSelector.build())).scrollIntoViewIfNeeded();
+
+  await expect(page.innerText(noteSelector.title().build())).resolves.toBe(
+    note.title
+  );
+  return noteSelector.build();
 }
 
 module.exports = { isPresent, isAbsent, isToastPresent, checkNotePresence };

apps/web/package.json

@@ -77,6 +77,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "find-process": "^1.4.4",
+    "lorem-ipsum": "^2.0.4",
     "patch-package": "^6.4.7",
     "source-map-explorer": "^2.5.2",
     "typescript": "^4.1.5",