upstream-affine/tests/affine-local/e2e/blocksuite/paragraph.spec.ts

import { test } from '@affine-test/kit/playwright';
import { locateToolbar } from '@affine-test/kit/utils/editor';
import {
  pressEnter,
  pressShiftTab,
  pressTab,
  selectAllByKeyboard,
  undoByKeyboard,
} from '@affine-test/kit/utils/keyboard';
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
  clickNewPageButton,
  type,
  waitForEditorLoad,
} from '@affine-test/kit/utils/page-logic';
import type { ParagraphBlockComponent } from '@blocksuite/affine-block-paragraph';
import { expect, type Locator } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await openHomePage(page);
  await clickNewPageButton(page, 'Paragraph Test');
  await waitForEditorLoad(page);
});

async function expectParagraphState(
  paragraphs: Locator,
  index: number,
  expectedType: string,
  expectedText: string
) {
  await expect
    .poll(async () => {
      return await paragraphs
        .nth(index)
        .evaluate(
          (
            block: ParagraphBlockComponent,
            expected: { type: string; text: string }
          ) =>
            block.model.props.type === expected.type &&
            block.model.props.text.toString() === expected.text,
          {
            type: expectedType,
            text: expectedText,
          }
        );
    })
    .toBeTruthy();
}

async function expectParagraphVisibility(
  paragraphs: Locator,
  index: number,
  visible: boolean
) {
  await expect
    .poll(async () => {
      return await paragraphs.nth(index).isVisible();
    })
    .toBe(visible);
}

test('heading icon should be updated after change heading level', async ({
  page,
}) => {
  await page.keyboard.press('Enter');
  await page.keyboard.type('Hello');
  // Hello|
  // empty paragraph

  const paragraph = page.locator('affine-note affine-paragraph').nth(0);

  await selectAllByKeyboard(page);
  const toolbar = locateToolbar(page);
  await toolbar.getByLabel('Conversions').click();
  await toolbar.getByLabel('Heading 1').click();

  await paragraph.hover();
  await expect(page.getByTestId('heading-icon-1')).toBeVisible();

  await selectAllByKeyboard(page);
  await toolbar.getByLabel('Conversions').click();
  await toolbar.getByLabel('Heading 2').click();

  await paragraph.hover();
  await expect(page.getByTestId('heading-icon-1')).toBeHidden();
  await expect(page.getByTestId('heading-icon-2')).toBeVisible();
});

test('basic heading collapsed', async ({ page }) => {
  await pressEnter(page);

  /**
   * # aaa
   * bbb
   * ## ccc
   * ddd
   * ### eee
   * fff
   * ## ggg
   * hhh
   * # iii
   * jjj
   */
  await type(
    page,
    '# aaa\nbbb\n## ccc\nddd\n### eee\nfff\n## ggg\nhhh\n# iii\njjj'
  );
  const a = page.locator('affine-note affine-paragraph').nth(0);
  const b = page.locator('affine-note affine-paragraph').nth(1);
  const c = page.locator('affine-note affine-paragraph').nth(2);
  const d = page.locator('affine-note affine-paragraph').nth(3);
  const e = page.locator('affine-note affine-paragraph').nth(4);
  const f = page.locator('affine-note affine-paragraph').nth(5);
  const g = page.locator('affine-note affine-paragraph').nth(6);
  const h = page.locator('affine-note affine-paragraph').nth(7);
  const i = page.locator('affine-note affine-paragraph').nth(8);
  const j = page.locator('affine-note affine-paragraph').nth(9);

  const assertInitState = async () => {
    expect(await a.isVisible()).toBeTruthy();
    expect(await b.isVisible()).toBeTruthy();
    expect(await c.isVisible()).toBeTruthy();
    expect(await d.isVisible()).toBeTruthy();
    expect(await e.isVisible()).toBeTruthy();
    expect(await f.isVisible()).toBeTruthy();
    expect(await g.isVisible()).toBeTruthy();
    expect(await h.isVisible()).toBeTruthy();
    expect(await i.isVisible()).toBeTruthy();
    expect(await j.isVisible()).toBeTruthy();
  };
  await assertInitState();

  // fold h1 aaa
  await a.hover();
  await page.waitForTimeout(100);
  await a.locator('blocksuite-toggle-button .toggle-icon').click();
  expect(await a.isVisible()).toBeTruthy();
  expect(await b.isVisible()).toBeFalsy();
  expect(await c.isVisible()).toBeFalsy();
  expect(await d.isVisible()).toBeFalsy();
  expect(await e.isVisible()).toBeFalsy();
  expect(await f.isVisible()).toBeFalsy();
  expect(await g.isVisible()).toBeFalsy();
  expect(await h.isVisible()).toBeFalsy();
  expect(await i.isVisible()).toBeTruthy();
  expect(await j.isVisible()).toBeTruthy();
  await undoByKeyboard(page);
  await assertInitState();

  // fold h2 ccc
  await c.hover();
  await page.waitForTimeout(100);
  await c.locator('blocksuite-toggle-button .toggle-icon').click();
  expect(await a.isVisible()).toBeTruthy();
  expect(await b.isVisible()).toBeTruthy();
  expect(await c.isVisible()).toBeTruthy();
  expect(await d.isVisible()).toBeFalsy();
  expect(await e.isVisible()).toBeFalsy();
  expect(await f.isVisible()).toBeFalsy();
  expect(await g.isVisible()).toBeTruthy();
  expect(await h.isVisible()).toBeTruthy();
  expect(await i.isVisible()).toBeTruthy();
  expect(await j.isVisible()).toBeTruthy();
  await undoByKeyboard(page);
  await assertInitState();

  // fold h3 eee
  await e.hover();
  await page.waitForTimeout(100);
  await e.locator('blocksuite-toggle-button .toggle-icon').click();
  expect(await a.isVisible()).toBeTruthy();
  expect(await b.isVisible()).toBeTruthy();
  expect(await c.isVisible()).toBeTruthy();
  expect(await d.isVisible()).toBeTruthy();
  expect(await e.isVisible()).toBeTruthy();
  expect(await f.isVisible()).toBeFalsy();
  expect(await g.isVisible()).toBeTruthy();
  expect(await h.isVisible()).toBeTruthy();
  expect(await i.isVisible()).toBeTruthy();
  expect(await j.isVisible()).toBeTruthy();
  await undoByKeyboard(page);
  await assertInitState();

  // fold h2 ggg
  await g.hover();
  await page.waitForTimeout(100);
  await g.locator('blocksuite-toggle-button .toggle-icon').click();
  expect(await a.isVisible()).toBeTruthy();
  expect(await b.isVisible()).toBeTruthy();
  expect(await c.isVisible()).toBeTruthy();
  expect(await d.isVisible()).toBeTruthy();
  expect(await e.isVisible()).toBeTruthy();
  expect(await f.isVisible()).toBeTruthy();
  expect(await g.isVisible()).toBeTruthy();
  expect(await j.isVisible()).toBeTruthy();
});

test('add new heading when press enter at the end of collapsed heading', async ({
  page,
}) => {
  await pressEnter(page);
  await type(page, '# aaa');
  await page.keyboard.press('ArrowDown');
  await type(page, 'bbb');
  await page.keyboard.press('ArrowUp');
  await page.keyboard.press('ArrowRight');

  const paragraph = page.locator('affine-note affine-paragraph');

  expect(
    await paragraph
      .nth(1)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.text.toString() === 'bbb'
      )
  ).toBeTruthy();
  await pressEnter(page);
  expect(
    await paragraph
      .nth(1)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'text' &&
          block.model.props.text.toString() === ''
      )
  ).toBeTruthy();
  expect(
    await paragraph
      .nth(2)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.text.toString() === 'bbb'
      )
  ).toBeTruthy();

  await undoByKeyboard(page);
  expect(
    await paragraph
      .nth(1)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.text.toString() === 'bbb'
      )
  ).toBeTruthy();
  expect(await paragraph.nth(1).isVisible()).toBeTruthy();
  await paragraph
    .nth(0)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click();
  expect(await paragraph.nth(1).isVisible()).toBeFalsy();

  await paragraph.nth(0).click();
  expect(await paragraph.count()).toBe(2);
  await pressEnter(page);
  expect(await paragraph.count()).toBe(3);
  expect(
    await paragraph
      .nth(2)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'h1' &&
          block.model.props.text.toString() === ''
      )
  ).toBeTruthy();
});

test('unfold collapsed heading when some block indented to be its child', async ({
  page,
}) => {
  await pressEnter(page);
  await type(page, '# aaa\nbbb\n# ccc');
  const paragraph = page.locator('affine-note affine-paragraph');
  await paragraph
    .nth(0)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click();
  expect(await paragraph.nth(1).isVisible()).toBeFalsy();
  await paragraph.nth(2).click();
  await pressTab(page);
  expect(await paragraph.nth(1).isVisible()).toBeTruthy();
});

test('unfold collapsed heading when its siblings changed to text type from heading type', async ({
  page,
}) => {
  await pressEnter(page);
  await type(page, '# aaa\nbbb\n# ccc');
  const paragraph = page.locator('affine-note affine-paragraph');
  await paragraph
    .nth(0)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click();
  expect(await paragraph.nth(1).isVisible()).toBeFalsy();
  await paragraph.nth(2).click();
  await page.keyboard.press('ArrowLeft');
  await page.keyboard.press('ArrowLeft');
  await page.keyboard.press('ArrowLeft');
  expect(
    await paragraph
      .nth(2)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'h1' &&
          block.model.props.text.toString() === 'ccc'
      )
  ).toBeTruthy();
  await page.keyboard.press('Backspace');
  expect(
    await paragraph
      .nth(2)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'text' &&
          block.model.props.text.toString() === 'ccc'
      )
  ).toBeTruthy();
  expect(await paragraph.nth(1).isVisible()).toBeTruthy();
});

test('also move children when dedent collapsed heading', async ({ page }) => {
  await pressEnter(page);
  await type(page, 'aaa');
  await page.keyboard.press('ArrowDown');
  await pressTab(page);
  await type(page, '# bbb\nccc');

  const paragraph = page.locator('affine-note affine-paragraph');
  const subParagraph = paragraph.nth(0).locator('affine-paragraph');
  await expect.poll(() => subParagraph.count()).toBe(2);
  await expectParagraphState(subParagraph, 0, 'h1', 'bbb');
  await expectParagraphState(subParagraph, 1, 'text', 'ccc');

  expect(await subParagraph.nth(1).isVisible()).toBeTruthy();
  await subParagraph
    .nth(0)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click();
  expect(await subParagraph.nth(1).isVisible()).toBeFalsy();

  await subParagraph.nth(0).click();
  await pressShiftTab(page);
  expect(await subParagraph.count()).toBe(0);
  await expectParagraphState(paragraph, 1, 'h1', 'bbb');
  await expectParagraphState(paragraph, 2, 'text', 'ccc');
  await expectParagraphVisibility(paragraph, 2, false);
  await paragraph
    .nth(1)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click({
      position: {
        x: 5,
        y: 5,
      },
    });
  await expectParagraphVisibility(paragraph, 2, true);
});

test('also move collapsed siblings when indent collapsed heading', async ({
  page,
}) => {
  await pressEnter(page);
  await type(page, 'aaa');
  await page.keyboard.press('ArrowDown');
  await type(page, '# bbb\nccc');
  await page.keyboard.press('ArrowUp');

  const paragraph = page.locator('affine-note affine-paragraph');
  expect(await paragraph.nth(0).locator('affine-paragraph').count()).toBe(0);
  await pressTab(page);
  expect(await paragraph.nth(0).locator('affine-paragraph').count()).toBe(1);
  expect(
    await paragraph
      .nth(0)
      .locator('affine-paragraph')
      .nth(0)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'h1' &&
          block.model.props.text.toString() === 'bbb'
      )
  ).toBeTruthy();
  await undoByKeyboard(page);

  expect(await paragraph.nth(2).isVisible()).toBeTruthy();
  await paragraph
    .nth(1)
    .locator('blocksuite-toggle-button .toggle-icon')
    .click();
  expect(await paragraph.nth(2).isVisible()).toBeFalsy();
  await paragraph.nth(1).click();
  await pressTab(page);
  expect(await paragraph.nth(2).isVisible()).toBeFalsy();
  expect(await paragraph.nth(0).locator('affine-paragraph').count()).toBe(2);
  expect(
    await paragraph
      .nth(0)
      .locator('affine-paragraph')
      .nth(0)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'h1' &&
          block.model.props.text.toString() === 'bbb'
      )
  ).toBeTruthy();
  expect(
    await paragraph
      .nth(0)
      .locator('affine-paragraph')
      .nth(1)
      .evaluate(
        (block: ParagraphBlockComponent) =>
          block.model.props.type === 'text' &&
          block.model.props.text.toString() === 'ccc'
      )
  ).toBeTruthy();
});

test('unfold collapsed heading when its other blocks indented to be its sibling', async ({
  page,
}) => {
  await pressEnter(page);
  await type(page, 'aaa');
  await page.keyboard.press('ArrowDown');
  await type(page, '# bbb\nddd');
  await page.keyboard.press('ArrowUp');
  await pressTab(page);
  const paragraph = page.locator('affine-note affine-paragraph');
  const subParagraph = paragraph.nth(0).locator('affine-paragraph');
  await expect.poll(() => subParagraph.count()).toBe(1);
  await expectParagraphState(subParagraph, 0, 'h1', 'bbb');
  await subParagraph.nth(0).click();
  await page.keyboard.press('End');
  await pressEnter(page);
  await type(page, 'ccc');

  /**
   * aaa
   *   # bbb
   *   ccc
   * ddd
   */

  await expectParagraphVisibility(paragraph, 2, true);
  await expectParagraphState(paragraph, 2, 'text', 'ccc');
  await paragraph.locator('blocksuite-toggle-button .toggle-icon').click();
  await expectParagraphVisibility(paragraph, 2, false);

  await paragraph.nth(3).click(); // ddd
  await expectParagraphVisibility(paragraph, 2, false);
  await expect
    .poll(() => paragraph.nth(0).locator('affine-paragraph').count())
    .toBe(2);
  await pressTab(page);
  await expect
    .poll(() => paragraph.nth(0).locator('affine-paragraph').count())
    .toBe(3);
  await expectParagraphVisibility(paragraph, 2, true);
});