chore: add TrustedHTML to sanitizer output to fix build errors for CSP

[ghiscoding]

No description provided.

[github-actions]

🎭 Playwright Summary - Failure 🚨

Playwright Report

[email protected] test:e2e /home/runner/work/multiple-select-vanilla/multiple-select-vanilla
playwright test --config playwright/playwright.config.ts

Running 69 tests using 1 worker
·················×T···········································×T×T··×F···

1. [chromium] › example13.spec.ts:4:7 › Example 13 - Destroy Select › creating & destroying select multiple times

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for getByRole('button', { name: '1, 3, 4' })
============================================================

   5 |     await page.goto('#/example13');
   6 |     await page.getByRole('button', { name: 'Dynamically Create' }).click();
>  7 |     await page.getByRole('button', { name: '1, 3, 4' }).click();
     |                                                         ^
   8 |     await page.getByRole('button', { name: 'Destroy' }).click();
   9 |     expect(page.locator['[data-test="select1"]']).toBeUndefined();
  10 |

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/example13.spec.ts:7:57

attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/example13-Example-13---Destroy-Select-creating-destroying-select-multiple-times-chromium/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/example13-Example-13---Destroy-Select-creating-destroying-select-multiple-times-chromium/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for getByRole('button', { name: '1, 3, 4' })
============================================================

   5 |     await page.goto('#/example13');
   6 |     await page.getByRole('button', { name: 'Dynamically Create' }).click();
>  7 |     await page.getByRole('button', { name: '1, 3, 4' }).click();
     |                                                         ^
   8 |     await page.getByRole('button', { name: 'Destroy' }).click();
   9 |     expect(page.locator['[data-test="select1"]']).toBeUndefined();
  10 |

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/example13.spec.ts:7:57

attachment #1: video (video/webm) ──────────────────────────────────────────────────────────────
test-results/example13-Example-13---Destroy-Select-creating-destroying-select-multiple-times-chromium-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────

attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/example13-Example-13---Destroy-Select-creating-destroying-select-multiple-times-chromium-retry1/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/example13-Example-13---Destroy-Select-creating-destroying-select-multiple-times-chromium-retry1/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

2. [chromium] › options27.spec.ts:4:7 › Options 27 - Text Template › option labels & selected options shows as html

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for locator('div[data-test=select1] .ms-drop ul li').first()
============================================================

   7 |     await page.locator('div[data-test=select1].ms-parent').click();
   8 |     const optionLoc1 = await page.locator('div[data-test=select1] .ms-drop ul li').nth(0);
>  9 |     await optionLoc1.click();
     |                      ^
  10 |     await expect(optionLoc1.locator('label span')).toHaveText('January');
  11 |     const spanLoc1 = await optionLoc1.locator('span').innerHTML();
  12 |     await expect(spanLoc1).toBe('<i class="fa fa-star"></i>January');

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options27.spec.ts:9:22

attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options27-Options-27---Text-Template-option-labels-selected-options-shows-as-html-chromium/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options27-Options-27---Text-Template-option-labels-selected-options-shows-as-html-chromium/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for locator('div[data-test=select1] .ms-drop ul li').first()
============================================================

   7 |     await page.locator('div[data-test=select1].ms-parent').click();
   8 |     const optionLoc1 = await page.locator('div[data-test=select1] .ms-drop ul li').nth(0);
>  9 |     await optionLoc1.click();
     |                      ^
  10 |     await expect(optionLoc1.locator('label span')).toHaveText('January');
  11 |     const spanLoc1 = await optionLoc1.locator('span').innerHTML();
  12 |     await expect(spanLoc1).toBe('<i class="fa fa-star"></i>January');

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options27.spec.ts:9:22

attachment #1: video (video/webm) ──────────────────────────────────────────────────────────────
test-results/options27-Options-27---Text-Template-option-labels-selected-options-shows-as-html-chromium-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────

attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options27-Options-27---Text-Template-option-labels-selected-options-shows-as-html-chromium-retry1/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options27-Options-27---Text-Template-option-labels-selected-options-shows-as-html-chromium-retry1/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

3. [chromium] › options28.spec.ts:4:7 › Options 28 - Label Template › option labels & selected options shows as html

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for locator('.ms-drop ul li label').nth(1)
============================================================

   7 |
   8 |     // await page.locator('.ms-drop li input[data-name="selectItem"]').check();
>  9 |     await page.locator('.ms-drop ul li label').nth(1).click();
     |                                                       ^
  10 |     let parentSpanLoc = await page.locator('.ms-parent .ms-choice span').innerHTML();
  11 |     await expect(parentSpanLoc).toBe('[<i class="fa fa-star"></i>Group 1: Option 1]');
  12 |

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options28.spec.ts:9:55

attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options28-Options-28---Label-Template-option-labels-selected-options-shows-as-html-chromium/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options28-Options-28---Label-Template-option-labels-selected-options-shows-as-html-chromium/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

�[31mTest timeout of 30000ms exceeded.�[39m

Error: locator.click: Page closed
=========================== logs ===========================
waiting for locator('.ms-drop ul li label').nth(1)
============================================================

   7 |
   8 |     // await page.locator('.ms-drop li input[data-name="selectItem"]').check();
>  9 |     await page.locator('.ms-drop ul li label').nth(1).click();
     |                                                       ^
  10 |     let parentSpanLoc = await page.locator('.ms-parent .ms-choice span').innerHTML();
  11 |     await expect(parentSpanLoc).toBe('[<i class="fa fa-star"></i>Group 1: Option 1]');
  12 |

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options28.spec.ts:9:55

attachment #1: video (video/webm) ──────────────────────────────────────────────────────────────
test-results/options28-Options-28---Label-Template-option-labels-selected-options-shows-as-html-chromium-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────

attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options28-Options-28---Label-Template-option-labels-selected-options-shows-as-html-chromium-retry1/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options28-Options-28---Label-Template-option-labels-selected-options-shows-as-html-chromium-retry1/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

4. [chromium] › options31.spec.ts:4:7 › Options 31 - Use Select Option as Label › both select show selected value numbers & 2nd select can also render value number with html

Error: �[2mexpect(�[22m�[31mreceived�[39m�[2m).�[22mtoBe�[2m(�[22m�[32mexpected�[39m�[2m) // Object.is equality�[22m

Expected: �[32m"<i class=\"fa fa-star\"></i>1"�[39m
Received: �[31m""�[39m

  11 |
  12 |     const parentSpanHtml2 = await page.locator('[data-test=select2].ms-parent .ms-choice span').innerHTML();
> 13 |     await expect(parentSpanHtml2).toBe('<i class="fa fa-star"></i>1');
     |                                   ^
  14 |     await page.locator('[data-test=select2].ms-parent').click();
  15 |     const dropSpanHtml2 = await page.locator('[data-test=select2].ms-drop ul li span').nth(0).innerHTML();
  16 |     await expect(dropSpanHtml2).toBe('<i class="fa fa-star"></i> January');

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options31.spec.ts:13:35

attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options31-Options-31---Use-Select-Option-as-La-d5da3-d-select-can-also-render-value-number-with-html-chromium/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options31-Options-31---Use-Select-Option-as-La-d5da3-d-select-can-also-render-value-number-with-html-chromium/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

Error: �[2mexpect(�[22m�[31mreceived�[39m�[2m).�[22mtoBe�[2m(�[22m�[32mexpected�[39m�[2m) // Object.is equality�[22m

Expected: �[32m"<i class=\"fa fa-star\"></i>1"�[39m
Received: �[31m""�[39m

  11 |
  12 |     const parentSpanHtml2 = await page.locator('[data-test=select2].ms-parent .ms-choice span').innerHTML();
> 13 |     await expect(parentSpanHtml2).toBe('<i class="fa fa-star"></i>1');
     |                                   ^
  14 |     await page.locator('[data-test=select2].ms-parent').click();
  15 |     const dropSpanHtml2 = await page.locator('[data-test=select2].ms-drop ul li span').nth(0).innerHTML();
  16 |     await expect(dropSpanHtml2).toBe('<i class="fa fa-star"></i> January');

    at /home/runner/work/multiple-select-vanilla/multiple-select-vanilla/playwright/e2e/options31.spec.ts:13:35

attachment #1: video (video/webm) ──────────────────────────────────────────────────────────────
test-results/options31-Options-31---Use-Select-Option-as-La-d5da3-d-select-can-also-render-value-number-with-html-chromium-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────

attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/options31-Options-31---Use-Select-Option-as-La-d5da3-d-select-can-also-render-value-number-with-html-chromium-retry1/trace.zip
Usage:

    pnpm exec playwright show-trace test-results/options31-Options-31---Use-Select-Option-as-La-d5da3-d-select-can-also-render-value-number-with-html-chromium-retry1/trace.zip

────────────────────────────────────────────────────────────────────────────────────────────────

4 failed
[chromium] › example13.spec.ts:4:7 › Example 13 - Destroy Select › creating & destroying select multiple times
[chromium] › options27.spec.ts:4:7 › Options 27 - Text Template › option labels & selected options shows as html
[chromium] › options28.spec.ts:4:7 › Options 28 - Label Template › option labels & selected options shows as html
[chromium] › options31.spec.ts:4:7 › Options 31 - Use Select Option as Label › both select show selected value numbers & 2nd select can also render value number with html
65 passed (5.6m)
 ELIFECYCLE  Command failed with exit code 1.