Description
At the top of the specs list, there will be two buttons, one for e2e and one for component testing. Each tab will have the following features:
- Icon for test testing type (always shown)
- Testing type label text
- E2E Specs
- Component Specs
- A question mark icon that is shown when a testing type is unconfigured.
- Active/inactive states
When both testing types are configured
Buttons act as a switcher to put Cypress into the other testing mode.
There are no new side effects of this, the transition happens exactly as it does today when a user switches via the top-left button in the side nav - the browser closes, launchpad displays a spinner, and then the browser re-opens in the new testing type.
When one testing type is not configured
The button for the unconfigured type contains a question mark, and clicking it displays a promo in-place in the specs list page which gives a summary of the testing type and invites users to set it up.
This has a side effect: it records a "campaign viewed" event through the Cloud's /anon-collect endpoint with the following values
- Component testing:
campaign: Specs Switcher CT
medium: Not set up
if a "CT eligible" framework and bundler are detected:
payload: { framework: {framework}, bundler: {bundler} }
(see ComponentTestingBannerAvailable.vue for example) - End-to-End testing
campaign: Specs Switcher E2E
medium: Not set up
payload: { framework: {framework}, bundler: {bundler} }
The implementation of the Promo elements for each unconfigured state are covered under tickets #26837 and #26836. This ticket should handle creation of the switch, switching when target type is configured, and replacing Specs List content with a placeholder when not configured.