code test

gistfile1.txt

  test.use({ permissions: ['clipboard-read', 'clipboard-write'] });
  test('Can copy code, when click `Copy` button', async ({
    page,
    isPlainText,
  }) => {
    test.skip(isPlainText);
    await focusEditor(page);
    await page.keyboard.type('``` ');
    await page.keyboard.type(`const a = 'Hello'`);
    await page.keyboard.press('Enter');
    await page.keyboard.type(`const b = 'World'`);
    await page.keyboard.press('Enter');

    await assertHTML(
      page,
      `
        <code
        class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
        dir="ltr"
        spellcheck="false"
        data-gutter="123"
        data-highlight-language="javascript">
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">a</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'Hello'
          </span>
          <br />
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">b</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'World'
          </span>
          <br />
          <br />
        </code>
      `,
    );

    await mouseMoveTo(page, 'code.PlaygroundEditorTheme__code');
    // mouse move listener has been debounced
    await sleep(200);

    await click(page,'button[aria-label=copy]');

    const text = await evaluate(page, () => {
      return navigator.clipboard.readText();
    });

    await pasteFromClipboard(page, {
      'text/plain': text,
    });

    await assertHTML(
      page,
      `
        <code
        class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
        dir="ltr"
        spellcheck="false"
        data-gutter="12345"
        data-highlight-language="javascript">
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">a</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'Hello'
          </span>
          <br />
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">b</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'World'
          </span>
          <br />
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">a</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'Hello'
          </span>
          <br />
          <span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
            const
          </span>
          <span data-lexical-text="true">b</span>
          <span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">
            =
          </span>
          <span data-lexical-text="true"></span>
          <span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">
            'World'
          </span>
          <br />
          <br />
        </code>
      `,
    );
  });