notesnook/apps/web/__e2e__/notebooks.test.js

/* eslint-disable no-undef */
const { getTestId, createNote, NOTE, NOTEBOOK } = require("./utils");
const { toMatchImageSnapshot } = require("jest-image-snapshot");
expect.extend({ toMatchImageSnapshot });
const {
  navigateTo,
  openContextMenu,
  useContextMenu,
  clickMenuItem,
  confirmDialog,
} = require("./utils/actions");
const List = require("./utils/listitemidbuilder");
const Menu = require("./utils/menuitemidbuilder");
const { checkNotePresence, isAbsent, isPresent } = require("./utils/conditions");

beforeEach(async () => {
  page = await browser.newPage();
  await page.goto("http://localhost:3000/");
}, 600000);

afterEach(async () => page.close());

async function fillNotebookDialog(notebook) {
  await page.fill(getTestId("dialog-nb-name"), notebook.title);

  await page.fill(getTestId("dialog-nb-description"), notebook.description);

  for (let i = 0; i < notebook.topics.length; ++i) {
    let topic = notebook.topics[i];

    await page.fill(getTestId(`dialog-topic-name-${i}`), topic);

    if (!(await page.$(getTestId(`dialog-topic-name-${i + 1}`))))
      await page.click(getTestId("dialog-add-topic"));
  }

  await page.click(getTestId("dialog-yes"));
}

async function createNotebook(notebook) {
  await page.click(getTestId("notebooks-action-button"));

  await fillNotebookDialog(notebook);
}

async function createNoteAndCheckPresence(note = NOTE) {
  await createNote(note, "notes");

  // make sure the note has saved.
  await page.waitForTimeout(1000);

  return await checkNotePresence(0, false, note);
}

async function checkNotebookPresence(notebook) {
  const notebookIdBuilder = List.new("notebook").atIndex(0);

  await expect(
    page.textContent(notebookIdBuilder.title().build())
  ).resolves.toBe(notebook.title);

  await expect(
    page.textContent(notebookIdBuilder.body().build())
  ).resolves.toBe(notebook.description);

  await page.click(List.new("notebook").atIndex(0).title().build());

  await expect(
    page.textContent(List.new("topic").atIndex(0).title().build())
  ).resolves.toBe("General");

  for (let i = 0; i < notebook.topics.length; ++i) {
    let topic = notebook.topics[i];
    await expect(
      page.textContent(
        List.new("topic")
          .atIndex(i + 1)
          .title()
          .build()
      )
    ).resolves.toBe(topic);
  }

  await page.click(getTestId("go-back"));

  return notebookIdBuilder.build();
}

async function createNotebookAndCheckPresence(notebook = NOTEBOOK) {
  await navigateTo("notebooks");

  await createNotebook(notebook);

  return await checkNotebookPresence(notebook);
}

async function deleteNotebookAndCheckAbsence(notebookSelector) {
  await openContextMenu(notebookSelector);

  await page.click(Menu.new("menuitem").item("delete").build());

  await confirmDialog();

  await page.waitForTimeout(500);

  await expect(
    page.$(notebookSelector)
  ).resolves.toBeFalsy();

  await navigateTo("trash");

  await expect(
    isPresent(List.new("trash").atIndex(0).build())
  ).resolves.toBeTruthy();

  await expect(
    page.textContent(List.new("trash").atIndex(0).title().build())
  ).resolves.toBe(NOTEBOOK.title);

  await expect(
    page.textContent(List.new("trash").atIndex(0).body().build())
  ).resolves.toBe(NOTEBOOK.description);

  await navigateTo("notebooks");
}

test("create a notebook", createNotebookAndCheckPresence);

test("create a note inside a notebook", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await page.click(notebookSelector);

  await page.click(List.new("topic").atIndex(1).build());

  await createNoteAndCheckPresence();
});

test("edit a notebook", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await useContextMenu(notebookSelector, () => clickMenuItem("edit"));

  const editedNotebook = {
    title: "An Edited Notebook",
    description: "A new edited description",
    topics: ["Topic 1", "Topic 2", "Topic 3", "Topic 4", "Topic 5"],
  };

  await fillNotebookDialog(editedNotebook);

  await page.waitForTimeout(1000);

  await checkNotebookPresence(editedNotebook);
});

test("edit topics individually", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await page.click(notebookSelector);

  for (let index = 1; index < 4; index++) {
    await openContextMenu(List.new("topic").atIndex(index).build());

    await page.click(Menu.new("menuitem").item("edit").build());

    const editedTopicTitle = "Topic " + index + " edit 1";
    await page.fill(getTestId("edit-topic-dialog"), editedTopicTitle);

    await page.click(getTestId("dialog-yes"));

    await page.waitForTimeout(500);

    await expect(
      page.textContent(List.new("topic").atIndex(index).title().build())
    ).resolves.toBe(editedTopicTitle);
  }
});

test("delete a notebook", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await deleteNotebookAndCheckAbsence(notebookSelector);
});

test("permanently delete a notebook", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await deleteNotebookAndCheckAbsence(notebookSelector);

  await navigateTo("trash");

  await openContextMenu(List.new("trash").atIndex(0).build());

  await clickMenuItem("delete");

  await confirmDialog();

  await expect(
    page.$(List.new("trash").atIndex(0).build())
  ).resolves.toBeFalsy();
});

test.only("pin a notebook", async () => {
  const notebookSelector = await createNotebookAndCheckPresence();

  await useContextMenu(notebookSelector, () => clickMenuItem("pin"));

  // wait for the menu to properly close
  await page.waitForTimeout(500);

  await useContextMenu(notebookSelector, () => expect(isPresent(Menu.new("menuitem").item("unpin").build())).resolves.toBeTruthy());

  // wait for the menu to properly close
  await page.waitForTimeout(500);

  const notebook = await page.$(List.new("notebook").atIndex(0).build());
  await expect(notebook.screenshot()).resolves.toMatchImageSnapshot({
    failureThreshold: 5,
    failureThresholdType: "percent",
  });
});