[Testing] Create a POC for testing Vue Components with Playwright

[unlikelyzero]

Summary

Component testing support was recently added in an alpha version of playwright/test. They've added support for vue2 recently. microsoft/playwright#14143

Here's the guide https://playwright.dev/docs/test-components

We did an initial attempt at a POC and have a branch here: https://github.com/nasa/openmct/tree/vue2-component-testing-poc

FAQ for getting started microsoft/playwright#14298

Findings:

• Able to get vue2 component testing framework installed and initialized. Note: had to override vue2 packages after running the playwright init
• Unable to mount MCT.js Component because of AMD formatting
• Looked at mounting an individual component and ran into an issue with parsing the vue template format:

<template>
^

SyntaxError: Unexpected token '<'

Next steps:

• Continue to read about how to mount vue2 components in vite.
• Possible that we need to import a vite config of our vue2 files after some sort of babel transformation or webpack transformation.
• Mount the simplest vue component.

[unlikelyzero]

Also worth mentioning https://www.cypress.io/blog/2021/04/06/getting-start-with-cypress-component-testing-vue-2-3/