web: add tests for new tab button

apps/web/__e2e__/models/editor.model.ts

@@ -38,6 +38,7 @@ export class EditorModel {
   private readonly tabsList: Locator;
   private readonly goBackButton: Locator;
   private readonly goForwardButton: Locator;
+  private readonly newTabButton: Locator;
   readonly savedIcon: Locator;
   readonly notSavedIcon: Locator;
 
@@ -63,6 +64,7 @@ export class EditorModel {
     this.tabsList = page.locator(getTestId("tabs"));
     this.goBackButton = page.locator(getTestId("go-back"));
     this.goForwardButton = page.locator(getTestId("go-forward"));
+    this.newTabButton = page.locator(getTestId("new-tab"));
   }
 
   async waitForLoading(title?: string, content?: string) {
@@ -263,6 +265,10 @@ export class EditorModel {
     await this.goForwardButton.click();
   }
 
+  async newTab() {
+    await this.newTabButton.click();
+  }
+
   async attachImage() {
     await this.page
       .context()

apps/web/__e2e__/tabs.test.ts

@@ -111,3 +111,16 @@ test("go forward should open next note", async ({ page }) => {
   await notes.editor.goForward();
   expect(await tabs[0].title()).toBe("Note 3");
 });
+
+test("new tab button should open a new tab", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  await notes.createNote({ title: "Note 1" });
+
+  await notes.editor.newTab();
+
+  const tabs = await notes.editor.getTabs();
+  expect(await tabs[0].title()).toBe("Note 1");
+  expect(await tabs[1].title()).toBe("Untitled");
+});

apps/web/src/components/editor/action-bar.tsx

@@ -443,6 +443,7 @@ function TabStrip() {
           variant="secondary"
           sx={{ p: 1, bg: "transparent", alignSelf: "center", ml: 1 }}
           onClick={() => useEditorStore.getState().addTab()}
+          data-test-id="new-tab"
         >
           <Plus size={18} />
         </Button>