98a9c06c40
* wip * wip * Adding required icons and strings for spec list * adding icons with some duplication * wip * fixing the colors and classes * removing the Icon from usage in the button and input * green => jade * wip * Fixes * wip * merge * fixing no projects state * Adding better spec pattern parsing * Adding routing for the runner * adding more tests * update tests * chore: lint * update types * types * chore: align vue-i18n version * update findSpecs * remove old spec * omit new properties returned from findSpecs * fix test * use different type Co-authored-by: Jessica Sachs <jess@jessicasachs.io> Co-authored-by: Tim Griesser <tgriesser10@gmail.com>
Launchpad
Launchpad is next-gen Vue application that is rendered by Electron. This acts as the visual user interface you see when running: cypress open.
It replaces the original electron app, desktop-gui.
Launchpad has the following responsibilities:
- Allow users to log in through the Dashboard Service
- Onboarding for new users (configure Component Testing dev server, install dependencies, etc)
- Select testing mode (E2E, Component, Node.js)
It is using the following technologies:
- Vue 3 for the UI framework
- code is written with the Composition API
- uses the new
<script setup>syntax for beter TypeScript support
- Vite for the dev server
- TypeScript
- Urql for the GraphQL client
Cypress' entire back-end is powered by the @packages/server package. Launchpad interfaces with it via a GraphQL layer, found in @packages/graphql.
Here is a short tutorial building a simple app using the same technologies we are using for launchpad. There are a lot of moving pieces; understanding how everything works will help you contribute to Launchpad.
Building
For development
## from repo root
yarn workspace @packages/launchpad build
Developing
For the best development experience, you will want to use VS Code with the Volar extension. This will give you type completion inside vue files.
## from repo root
yarn dev
This starts Vite in watch mode. It also starts the GraphQL Server. You can access it on http://localhost:52200/graphql.
If you notice your IDE has not updated and is showing errors, even after yarn watch has run`, you might need to reopen your IDE. With the amount of code generation running, sometimes the IDE does not recognize that the code has changed.
Testing
In Cypress
This project is tested with Cypress itself. It acts exactly like any other Cypress project. It has more component tests than E2E, as we are using Launchpad to dogfood Component Testing.
Component Tests:
## from repo root
yarn workspace @packages/launchpad cypress:open:ct
E2E tests:
## from repo root
yarn workspace @packages/launchpad cypress:open
Utility class usage
Windi CSS can create an awesome interactive summary showing our usage of utility classes and design tokens. Running this command will generate this report and serve it on localhost.
## from launchpad directory
yarn windi