QuantumLab Frontend
π οΈ Environment Setup
Install node_modules
:
npm install
Provided Scripts
Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
Scripts provided in package.json
. It's safe to modify or add additional script:
Start project
npm start
Build project
npm run build
Check code style
npm run lint
You can also use script to auto fix some lint error:
npm run lint:fix
Test code
npm test
π Folder Structure Guide
General
βββ config # umi configuration, includes routes, build, etc.
βββ jest # jest config
βββ cypress # e2e test
βββ mock # mock api for development
βββ public # static resources
βββ src
β βββ assets # local static resources
β βββ components # common components
β βββ layouts # common layouts
β βββ models # global dva models
β βββ pages # page entry points and commonly used templates
β βββ services # backend interface services
β βββ utils # utility library
β βββ locales # internationalization resources
β βββ global.less # global styles
β βββ global.ts # global JS
βββ cypress.config.js # cypress config
βββ README.md
βββ package.json
Pages
Check out the Page Code Structure documentation.
Example:
src
βββ components // Common components
βββ pages
βββ Welcome // Routed Page Component
| βββ components // components only used in this page
| βββ Form.tsx
| βββ index.tsx // Code of page component
| βββ index.less // Page style
βββ Workspace
| βββ components // Workspace page group components
| βββ Create // 'Create' page component under Workspace page group
| βββ util.ts // Workspace page group common utility functions
βββ * // Others
Running Tests with Cypress
Prerequisites
Running Cypress Tests
Before running any tests, make sure you are in the directory of /website
.
-
Open Cypress Test Runner:
- You can open the Cypress Test Runner with the following command:
npx cypress open
- This will open the Cypress GUI where you can select and run individual test files.
-
Run Cypress Tests Headlessly:
- To run Cypress tests in headless mode (without opening the GUI), use the following command:
npx cypress run
- This will execute all the test suites in the background and provide a summary of the results in your terminal.
-
Running Specific Test Files: