memo/e2e/editor-link.spec.ts at 749e1d24d6687127d504cdb404d09c9555dd2cdc · gitpod-io/memo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { test, expect } from "./fixtures/auth";
import { navigateToEditorPage, modifierKey } from "./fixtures/editor-helpers";

const mod = modifierKey();

test.describe("Editor floating link editor", () => {
  test.beforeEach(async ({ authenticatedPage: page }) => {
    await navigateToEditorPage(page);
  });

  test("link button in toolbar creates a link", async ({
    authenticatedPage: page,
  }) => {
    const editor = page.locator('[contenteditable="true"]');
    await expect(editor).toBeVisible({ timeout: 10_000 });

    // Count existing links before we create one
    const linksBefore = await editor.locator("a").count();

    await editor.click();
    await page.keyboard.press("End");
    await page.keyboard.press("Enter");
    await editor.pressSequentially("link text here");
    await page.waitForTimeout(200);

    // Select text
    await page.keyboard.down("Shift");
    await page.keyboard.press("Home");
    await page.keyboard.up("Shift");

    // Click link button in toolbar
    const toolbar = page.locator('[role="toolbar"][aria-label="Text formatting"]');
    await expect(toolbar).toBeVisible({ timeout: 3_000 });

    const linkBtn = toolbar.getByRole("button", { name: /link/i });
    await linkBtn.click();
    await page.waitForTimeout(300);

    // A new link element should be created
    const links = editor.locator("a");
    await expect(links).toHaveCount(linksBefore + 1, { timeout: 2_000 });
  });

  test("link editor appears when cursor is in a link", async ({
    authenticatedPage: page,
  }) => {
    const editor = page.locator('[contenteditable="true"]');
    await expect(editor).toBeVisible({ timeout: 10_000 });

    // Create a link first
    await editor.click();
    await page.keyboard.press("End");
    await page.keyboard.press("Enter");
    await editor.pressSequentially("click me");
    await page.waitForTimeout(200);

    await page.keyboard.down("Shift");
    await page.keyboard.press("Home");
    await page.keyboard.up("Shift");

    // Use Cmd/Ctrl+K to create link
    await page.keyboard.press(`${mod}+k`);
    await page.waitForTimeout(500);

    // The link editor popover should appear with a URL input
    const linkEditor = page.locator('input[type="url"]');
    await expect(linkEditor).toBeVisible({ timeout: 3_000 });

    // Type a URL and save
    await linkEditor.fill("https://example.com");
    await page.keyboard.press("Enter");
    await page.waitForTimeout(300);

    // The link should now have the URL
    const link = editor.locator('a[href="https://example.com"]').last();
    await expect(link).toBeVisible({ timeout: 2_000 });
  });

  test("link can be removed via link editor", async ({
    authenticatedPage: page,
  }) => {
    const editor = page.locator('[contenteditable="true"]');
    await expect(editor).toBeVisible({ timeout: 10_000 });

    // Count existing links before we create one
    const linksBefore = await editor.locator("a").count();

    // Create a link
    await editor.click();
    await page.keyboard.press("End");
    await page.keyboard.press("Enter");
    await editor.pressSequentially("remove me");
    await page.waitForTimeout(200);

    await page.keyboard.down("Shift");
    await page.keyboard.press("Home");
    await page.keyboard.up("Shift");

    await page.keyboard.press(`${mod}+k`);
    await page.waitForTimeout(500);

    const linkInput = page.locator('input[type="url"]');
    await expect(linkInput).toBeVisible({ timeout: 3_000 });
    await linkInput.fill("https://example.com");
    await page.keyboard.press("Enter");
    await page.waitForTimeout(300);

    // Click on the link we just created to show the link editor
    const link = editor.locator('a[href="https://example.com"]').last();
    await expect(link).toBeVisible();
    await link.click();
    await page.waitForTimeout(300);

    // Click remove button
    const removeBtn = page.getByRole("button", { name: /remove link/i });
    await expect(removeBtn).toBeVisible({ timeout: 3_000 });
    await removeBtn.click();
    await page.waitForTimeout(300);

    // The link we created should be gone — count should be back to what it was
    const links = editor.locator("a");
    await expect(links).toHaveCount(linksBefore, { timeout: 2_000 });
  });
});