feat(ct): vue type safe mount props

[sand4rt]

partial fix for: #17206

https://www.npmjs.com/package/vue-component-type-helpers has been released last month and is maintained by Vue. It's also used in Vue Test Utils: https://github.com/vuejs/test-utils/blob/main/package.json#L26

related: #23194

[pavelfeldman]

do you think this will break existing clients? or do we want to break them with these stricter types?

[sand4rt]

do you think this will break existing clients?

A subset of existing clients using the Vue object API could see some type errors:

1. When the prop is manually passed to the mount<_, Props>() generic.

2. When a required prop is missing or when a wrong prop type passed to the mount().

3. When a invalid prop or non existing type is passed to component.update()

do we want to break them with these stricter types?

IMO yes. It is cumbersome to specify prop types manually.

When a wrong prop type is passed I think it would be good to know that immediately instead of running the test and checking if Vue logged anything to the console.

I think it's also useful to have autocompletion on both mount() and component.update().

[sand4rt]

related to: testing-library/vue-testing-library#305

[pavelfeldman]

👋 @sand4rt what should we do with this one?

[github-actions]

Test results for "tests 1"

2 interrupted
⚠️ [playwright-test-windows-latest-node16] › reporter-html.spec.ts:1632:7 › created › labels › if label contains similar words only one label should be selected
⚠️ [playwright-test-windows-latest-node16] › reporter-html.spec.ts:1710:7 › created › labels › handling of meta or ctrl key

62 passed, 524 skipped
✔️✔️✔️

Merge workflow run.

[github-actions]

Test results for "tests 1"

1 failed
❌ [playwright-test-macos-latest-node16] › reporter-html.spec.ts:1452:7 › created › labels › filter should update stats

10 flaky
⚠️ [chromium-ubuntu-22.04-node20] › page/page-event-request.spec.ts:129:3 › should report navigation requests and responses handled by service worker with routing
⚠️ [chromium-ubuntu-20.04-chromium-tip-of-tree] › library/tracing.spec.ts:239:5 › should not include trace resources from the previous chunks
⚠️ [chromium-ubuntu-20.04-chromium-tip-of-tree] › page/page-event-request.spec.ts💯3 › should report navigation requests and responses handled by service worker
⚠️ [webkit-ubuntu-22.04-node16] › library/browsercontext-reuse.spec.ts:50:1 › should reset serviceworker
⚠️ [webkit-ubuntu-22.04-node16] › library/inspector/cli-codegen-pytest.spec.ts:56:5 › should save the codegen output to a file if specified
⚠️ [playwright-test-macos-latest-node16] › ui-mode-test-progress.spec.ts:167:5 › should update tracing network live
⚠️ [playwright-test-macos-latest-node16] › ui-mode-trace.spec.ts:22:5 › should merge trace events
⚠️ [playwright-test-macos-latest-node16] › ui-mode-trace.spec.ts:126:5 › should show snapshots for sync assertions
⚠️ [playwright-test-windows-latest-node16] › ui-mode-test-progress.spec.ts:22:5 › should update trace live
⚠️ [playwright-test-windows-latest-node16] › ui-mode-trace.spec.ts:22:5 › should merge trace events

25022 passed, 583 skipped
✔️✔️✔️

❌ [playwright-test-macos-latest-node16] › reporter-html.spec.ts:1452:7 › created › labels › filter should update stats

Error: expect(received).toBe(expected) // Object.is equality

Expected: "Total time: 1424ms"
Received: "Total time: 1.4s"

  1774 |         await expect(page.locator('.chip', { hasText: 'c.test.js' })).toHaveCount(1);
  1775 |
> 1776 |         await flakyButton.click();
       |                                 ^
  1777 |
  1778 |         await expect(searchInput).toHaveValue('@regression @flaky');
  1779 |         await expect(page).toHaveURL(/@regression%20@flaky/);

    at checkTotalDuration (/Users/runner/work/playwright/playwright/tests/playwright-test/reporter-html.spec.ts:1776:33)
    at /Users/runner/work/playwright/playwright/tests/playwright-test/reporter-html.spec.ts:1782:9

Merge workflow run.

[sand4rt]

👋 @sand4rt what should we do with this one?

I resolved the merge conflicts and comment. Would really like to see this merged. @vue/test-utils decided to do this as well and playwright-ct-svelte also has typed props.

[github-actions]

Test results for "tests 1"

6 flaky
⚠️ [chromium-ubuntu-22.04-node20] › library/tracing.spec.ts:239:5 › should not include trace resources from the previous chunks
⚠️ [chromium-ubuntu-22.04-node20] › page/page-event-request.spec.ts:129:3 › should report navigation requests and responses handled by service worker with routing
⚠️ [webkit-ubuntu-22.04-node16] › library/browsercontext-reuse.spec.ts:50:1 › should reset serviceworker
⚠️ [chromium-ubuntu-22.04-node16] › library/tracing.spec.ts:239:5 › should not include trace resources from the previous chunks
⚠️ [firefox-ubuntu-22.04-node16] › page/frame-goto.spec.ts:46:3 › should continue after client redirect
⚠️ [playwright-test-macos-latest-node16] › ui-mode-trace.spec.ts:53:5 › should merge web assertion events

25027 passed, 583 skipped
✔️✔️✔️

Merge workflow run.