CollapsibleText.spec.ts

CollapsibleText.spec.ts

import { expect, test } from '@playwright/test';
import { storyUrl } from 'utils/navigate';

test.describe('Extranet-ui CollapsibleText', () => {
  const urlLongText = storyUrl('collapsibletext--long-text');
  const urlShortText = storyUrl('collapsibletext--short-text');
  const urlReactElement = storyUrl('collapsibletext--react-element');
  const textDataTestId = 'extranet-ui-collapsible-text';
  const collapseButtonDataTestId = 'extranet-ui-collapsible-collapse-button';
  const defaultText = `
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  `;
  const longText = `
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vivamus lacinia odio vitae vestibulum vestibulum.
    Cras venenatis euismod malesuada. Nulla tincidunt,
    tortor ac tincidunt blandit, quam quam aliquet metus,
    ac bibendum est nisl vel neque. Aenean euismod bibendum laoreet.
    Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
  `;
  const collapseLabel = 'Show less';
  const expandLabel = 'Show more';

  test.describe('Dangerous HTML sanitization', () => {
    const dangerousHTMLExamples = [
      {
        input: '<img src=x onerror=alert(1)//>',
        dangerousPatterns: ['onerror'],
      },
      {
        input: '<svg><g/onload=alert(2)//<p>',
        dangerousPatterns: ['onload', '<p>'],
      },
      {
        input: '<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>',
        dangerousPatterns: ['<iframe', 'jAva&Tab;script:alert(3)'],
      },
      {
        input: '<math><mi//xlink:href="data:x,<script>alert(4)</script>">',
        dangerousPatterns: ['xlink:href', '<script>alert(4)</script>'],
      },
      {
        input: '<TABLE><tr><td>HELLO</tr></TABL>',
        dangerousPatterns: [],
        expectedText: 'HELLO',
      },
      {
        input: '<UL><li><A HREF=//google.com>click</UL>',
        dangerousPatterns: [],
        expectedText: 'click',
      },
    ];

    for (const { input, dangerousPatterns, expectedText } of dangerousHTMLExamples) {
      test(`sanitizes dangerous HTML input: ${input}`, async ({ page }) => {
        await page.goto(urlShortText);
        const frame = page.frameLocator('iframe');
        const textContainer = frame.getByTestId(`${textDataTestId}`);

        let dialogAppeared = false;

        page.on('dialog', async (dialog) => {
          dialogAppeared = true;
          await dialog.dismiss();
        });

        await page.locator('#control-children').fill(input);

        expect(dialogAppeared).toBe(false);

        const sanitizedHTML = await textContainer.evaluate((el) => el.innerHTML);

        for (const pattern of dangerousPatterns) {
          expect(sanitizedHTML).not.toContain(pattern);
        }

        if (expectedText) {
          await expect(textContainer).toContainText(expectedText);
        }
      });
    }
  });
});