docs: add development guide
add development guide Change-Id: Id8fcac77eb5691e297f99cfe845c1b53bf1709bf
This commit is contained in:
yangshaoxue
parent
2f4eb2d36b
commit
c069ce5aaf
@ -1,2 +1,346 @@
|
||||
Catalog Introduction
|
||||
~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Introduction to the first-level directory
|
||||
-----------------------------------------
|
||||
|
||||
- :guilabel:`Gruntfile.js`: Used to collect i18n
|
||||
|
||||
- :guilabel:`LICENSE`: This project uses Apache License
|
||||
|
||||
- :guilabel:`Makefile`
|
||||
|
||||
- :guilabel:`README.rst`: A brief description of the front-end startup,
|
||||
please refer to the docs for details
|
||||
|
||||
- :guilabel:`config`: webpack configuration, which contains webpack
|
||||
configuration in public, development environment, test environment,
|
||||
and build environment
|
||||
|
||||
- :guilabel:`cypress.json`: E2E test configuration file
|
||||
|
||||
- :guilabel:`docker`: Contains the docker configuration used in the
|
||||
development environment, generation environment, and test environment
|
||||
|
||||
- :guilabel:`docs`: Documentation introduction, including Chinese, English,
|
||||
development documentation, testing documentation
|
||||
|
||||
- :guilabel:`jest.config.js`: Unit test configuration file
|
||||
|
||||
- :guilabel:`jsconfig.json`: javascript code configuration file
|
||||
|
||||
- :guilabel:`package.json`: Configuration files such as installation
|
||||
packages and commands
|
||||
|
||||
- :guilabel:`yarn.lock`: The version lock file of the package
|
||||
|
||||
- :guilabel:`.babelrc`: Babel configuration file
|
||||
|
||||
- :guilabel:`.dockerignore`: File configuration ignored by docker
|
||||
|
||||
- :guilabel:`.eslintignore`: File configuration ignored by eslint
|
||||
|
||||
- :guilabel:`.eslint`: Eslint configuration
|
||||
|
||||
- :guilabel:`.gitignore`: File configuration ignored by git
|
||||
|
||||
- :guilabel:`.gitreview`: Gitreview configuration
|
||||
|
||||
- :guilabel:`.prettierignore`: File configuration ignored by prettier
|
||||
|
||||
- :guilabel:`.prettierrc`: Prettier configuration
|
||||
|
||||
- :guilabel:`src`: **The folder where the development code is located**
|
||||
|
||||
- :guilabel:`test`: **The folder where the test code is located,
|
||||
contains e2e test code and basic code for unit testing**
|
||||
|
||||
- :guilabel:`tools`: Other tools folder, containing git tools
|
||||
|
||||
Catalog Introduction-Image Version
|
||||
-----------------------------------
|
||||
|
||||
.. code-block:: text
|
||||
|
||||
.
|
||||
├── Gruntfile.js (Used to collect i18n)
|
||||
├── LICENSE
|
||||
├── Makefile
|
||||
├── README.rst
|
||||
├── config
|
||||
│ ├── theme.js
|
||||
│ ├── webpack.common.js
|
||||
│ ├── webpack.dev.js (Webpack configuration used during development)
|
||||
│ ├── webpack.e2e.js (The webpack configuration used during e2e testing can generate a package for testing coverage)
|
||||
│ └── webpack.prod.js (Webpack packaging configuration used by the generation environment)
|
||||
├── cypress.json (E2E configuration)
|
||||
├── docker
|
||||
│ ├── dev.dockerfile
|
||||
│ ├── nginx.conf
|
||||
│ ├── prod.dockerfile
|
||||
│ └── test.dockerfile
|
||||
├── docs (Documents)
|
||||
├── jest.config.js (Unit testing configuration)
|
||||
├── jsconfig.json
|
||||
├── package.json
|
||||
├── src
|
||||
│ ├── api (Api summary, not used yet)
|
||||
│ ├── asset
|
||||
│ │ ├── image (Images placement)
|
||||
│ │ └── template
|
||||
│ │ └── index.html
|
||||
│ ├── components (Public components)
|
||||
│ ├── containers
|
||||
│ │ ├── Action
|
||||
│ │ │ ├── ConfirmAction (Confirmed action base class)
|
||||
│ │ │ ├── FormAction (Single page action base class)
|
||||
│ │ │ ├── ModalAction (Pop-up action base class)
|
||||
│ │ │ ├── StepAction (Multi-step single-page action, for example: create a cloud host)
|
||||
│ │ │ └── index.jsx
|
||||
│ │ ├── BaseDetail (Detail page base class with detailed information)
|
||||
│ │ ├── List (The base class of the list page, for example: cloud host)
|
||||
│ │ ├── TabDetail (The base class of the detail page with tab switching, for example: instance details)
|
||||
│ │ └── TabList (List page with tab switch)
|
||||
│ ├── core
|
||||
│ │ ├── App.jsx
|
||||
│ │ ├── i18n.js
|
||||
│ │ ├── index.jsx (Entry)
|
||||
│ │ └── routes.js (Routing configuration by module)
|
||||
│ ├── layouts
|
||||
│ │ ├── Base (Layout used after login)
|
||||
│ │ ├── Blank (Blank layout)
|
||||
│ │ ├── User (Layout used for login)
|
||||
│ │ ├── admin-menu.jsx (Menu configuration used by the management platform)
|
||||
│ │ └── menu.jsx (Menu configuration used by the console)
|
||||
│ ├── locales (Translation)
|
||||
│ │ ├── en.json
|
||||
│ │ ├── index.js
|
||||
│ │ └── zh.json
|
||||
│ ├── pages (The page-directory structure is assigned according to: menu item-secondary menu, where the pages of the secondary menu are placed in the containers folder)
|
||||
│ │ ├── base
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── 404 (404 page)
|
||||
│ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ ├── AdminOverview (Management platform home page)
|
||||
│ │ │ │ │ ├── components
|
||||
│ │ │ │ │ │ ├── ComputeService.jsx
|
||||
│ │ │ │ │ │ ├── NetworkService.jsx
|
||||
│ │ │ │ │ │ ├── PlatformInfo.jsx
|
||||
│ │ │ │ │ │ ├── ResourceOverview.jsx
|
||||
│ │ │ │ │ │ └── VirtualResource.jsx
|
||||
│ │ │ │ │ ├── index.jsx
|
||||
│ │ │ │ │ └── style.less
|
||||
│ │ │ │ └── Overview (Console home page)
|
||||
│ │ │ │ ├── components
|
||||
│ │ │ │ │ ├── ProjectInfo.jsx
|
||||
│ │ │ │ │ ├── QuotaOverview.jsx
|
||||
│ │ │ │ │ └── ResourceStatistic.jsx
|
||||
│ │ │ │ ├── index.jsx
|
||||
│ │ │ │ └── style.less
|
||||
│ │ │ └── routes (Routing configuration)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── compute
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── BareMetalNode (Bare metal configuration)
|
||||
│ │ │ │ ├── Flavor (Instance type)
|
||||
│ │ │ │ ├── HostAggregate (Host Aggregate)
|
||||
│ │ │ │ │ ├── Aggregate (Host Aggregate)
|
||||
│ │ │ │ │ ├── AvailabilityZone (Availability zone)
|
||||
│ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ ├── Hypervisors (Hypervisors management)
|
||||
│ │ │ │ │ ├── ComputeHost (Compute host)
|
||||
│ │ │ │ │ ├── Hypervisor (Hypervisor manager)
|
||||
│ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ ├── Image (Image)
|
||||
│ │ │ │ ├── Instance (Instance)
|
||||
│ │ │ │ │ ├── Detail (Detail page)
|
||||
│ │ │ │ │ │ ├── BaseDetail (Base info)
|
||||
│ │ │ │ │ │ ├── SecurityGroup (Security group)
|
||||
│ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ ├── actions (Actions)
|
||||
│ │ │ │ │ │ ├── AssociateFip.jsx (Associate fip ip)
|
||||
│ │ │ │ │ │ ├── AttachInterface.jsx (Attach interface)
|
||||
│ │ │ │ │ │ ├── AttachIsoVolume.jsx (Attach iso volume)
|
||||
│ │ │ │ │ │ ├── AttachVolume.jsx (Attach volume)
|
||||
│ │ │ │ │ │ ├── ChangePassword.jsx (Change password)
|
||||
│ │ │ │ │ │ ├── Console.jsx (Console)
|
||||
│ │ │ │ │ │ ├── CreateImage.jsx (Create Image)
|
||||
│ │ │ │ │ │ ├── CreateIronic (Create ironic-Step-by-step Form)
|
||||
│ │ │ │ │ │ │ ├── BaseStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── ConfirmStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── NetworkStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── SystemStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── index.jsx
|
||||
│ │ │ │ │ │ │ └── index.less
|
||||
│ │ │ │ │ │ ├── CreateSnapshot.jsx (Create snapshot)
|
||||
│ │ │ │ │ │ ├── Delete.jsx (Delete instance)
|
||||
│ │ │ │ │ │ ├── DeleteIronic.jsx (Delete ironic)
|
||||
│ │ │ │ │ │ ├── DetachInterface.jsx (Detach interface)
|
||||
│ │ │ │ │ │ ├── DetachIsoVolume.jsx (Detach iso volume)
|
||||
│ │ │ │ │ │ ├── DetachVolume.jsx (Detach volume)
|
||||
│ │ │ │ │ │ ├── DisassociateFip.jsx (Disassociate fip iP)
|
||||
│ │ │ │ │ │ ├── Edit.jsx (Edit instance)
|
||||
│ │ │ │ │ │ ├── ExtendRootVolume.jsx (Expand the root disk)
|
||||
│ │ │ │ │ │ ├── LiveMigrate.jsx (Live migrate)
|
||||
│ │ │ │ │ │ ├── Lock.jsx (Lock instance)
|
||||
│ │ │ │ │ │ ├── ManageSecurityGroup.jsx (Manage security group)
|
||||
│ │ │ │ │ │ ├── Migrate.jsx (Migrate)
|
||||
│ │ │ │ │ │ ├── Pause.jsx (Pause instance)
|
||||
│ │ │ │ │ │ ├── Reboot.jsx (Reboot instance)
|
||||
│ │ │ │ │ │ ├── Rebuild.jsx (Rebuild instance)
|
||||
│ │ │ │ │ │ ├── RebuildSelect.jsx (Select the image to rebuild the instance)
|
||||
│ │ │ │ │ │ ├── Resize.jsx (Change configuration)
|
||||
│ │ │ │ │ │ ├── ResizeOnline.jsx (Modify configuration online)
|
||||
│ │ │ │ │ │ ├── Resume.jsx (Resume instance)
|
||||
│ │ │ │ │ │ ├── Shelve.jsx (Shelve instance)
|
||||
│ │ │ │ │ │ ├── SoftDelete.jsx (Soft delete instance)
|
||||
│ │ │ │ │ │ ├── SoftReboot.jsx (Soft reboot instance)
|
||||
│ │ │ │ │ │ ├── Start.jsx (Start instance)
|
||||
│ │ │ │ │ │ ├── StepCreate (Create a instance-step by step creation)
|
||||
│ │ │ │ │ │ │ ├── BaseStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── ConfirmStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── NetworkStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── SystemStep
|
||||
│ │ │ │ │ │ │ │ └── index.jsx
|
||||
│ │ │ │ │ │ │ ├── index.jsx
|
||||
│ │ │ │ │ │ │ └── index.less
|
||||
│ │ │ │ │ │ ├── Stop.jsx (Stop instance)
|
||||
│ │ │ │ │ │ ├── Suspend.jsx (Suspend instance)
|
||||
│ │ │ │ │ │ ├── Unlock.jsx (Unlock instance)
|
||||
│ │ │ │ │ │ ├── Unpause.jsx (Unpause instance)
|
||||
│ │ │ │ │ │ ├── Unshelve.jsx (Unshelve instance)
|
||||
│ │ │ │ │ │ ├── index.jsx
|
||||
│ │ │ │ │ │ └── index.less
|
||||
│ │ │ │ │ ├── components (Component)
|
||||
│ │ │ │ │ │ ├── FlavorSelectTable.jsx
|
||||
│ │ │ │ │ │ └── index.less
|
||||
│ │ │ │ │ ├── index.jsx
|
||||
│ │ │ │ │ └── index.less
|
||||
│ │ │ │ ├── Keypair (Key pair)
|
||||
│ │ │ │ └── ServerGroup (Instance group)
|
||||
│ │ │ └── routes (Routing configuration under the compute menu)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── configuration (Platform configuration)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── Metadata (Metadata definition)
|
||||
│ │ │ │ ├── Setting (System configuration)
|
||||
│ │ │ │ └── SystemInfo (System info)
|
||||
│ │ │ └── routes (Routing configuration under the platform configuration menu)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── heat (Resource orchestration)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ └── Stack (Stack)
|
||||
│ │ │ └── routes (Routing configuration under the resource arrangement menu)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── identity (Identity management)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── Domain (Domain)
|
||||
│ │ │ │ ├── Project (Project)
|
||||
│ │ │ │ ├── Role (Role)
|
||||
│ │ │ │ ├── User (User)
|
||||
│ │ │ │ └── UserGroup (User group)
|
||||
│ │ │ └── routes (Routing configuration)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── management (Operation and maintenance management)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ └── RecycleBin (Recycle bin)
|
||||
│ │ │ └── routes (Routing configuration)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── network (Network)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── FloatingIp (Floating ip)
|
||||
│ │ │ │ ├── LoadBalancers (Load balancing)
|
||||
│ │ │ │ ├── Network (Network)
|
||||
│ │ │ │ ├── QoSPolicy (Qos policy)
|
||||
│ │ │ │ ├── Router (Routing)
|
||||
│ │ │ │ ├── SecurityGroup (Security group)
|
||||
│ │ │ │ ├── Topology (Network topology)
|
||||
│ │ │ │ ├── VPN (VPN)
|
||||
│ │ │ │ └── VirtualAdapter (Virtual Adapter)
|
||||
│ │ │ └── routes (Routing configuration)
|
||||
│ │ │ └── index.js
|
||||
│ │ ├── storage (Storage)
|
||||
│ │ │ ├── App.jsx
|
||||
│ │ │ ├── containers
|
||||
│ │ │ │ ├── Backup (Backup)
|
||||
│ │ │ │ ├── Snapshot (Volume snapshot)
|
||||
│ │ │ │ ├── Storage (Storage backend)
|
||||
│ │ │ │ ├── Volume (Volume)
|
||||
│ │ │ │ └── VolumeType (Volume type)
|
||||
│ │ │ │ ├── QosSpec (QoS)
|
||||
│ │ │ │ ├── VolumeType (Volume type)
|
||||
│ │ │ │ └── index.jsx
|
||||
│ │ │ └── routes ()
|
||||
│ │ │ └── index.js
|
||||
│ │ └── user (Login page)
|
||||
│ │ ├── App.jsx
|
||||
│ │ ├── containers
|
||||
│ │ │ ├── ChangePassword (Change password-according to system configuration)
|
||||
│ │ │ │ ├── index.jsx
|
||||
│ │ │ │ └── index.less
|
||||
│ │ │ └── Login (Login)
|
||||
│ │ │ ├── index.jsx
|
||||
│ │ │ └── index.less
|
||||
│ │ └── routes (Routing configuration)
|
||||
│ │ └── index.js
|
||||
│ ├── resources (Store the public functions and status of each resource used by itself)
|
||||
│ ├── stores (Data processing, divide folders by resource type)
|
||||
│ │ ├── base-list.js (Base class for list data)
|
||||
│ │ ├── base.js (Base class for data manipulation)
|
||||
│ │ ├── cinder
|
||||
│ │ ├── glance
|
||||
│ │ ├── heat
|
||||
│ │ ├── ironic
|
||||
│ │ ├── keystone
|
||||
│ │ ├── neutron
|
||||
│ │ ├── nova
|
||||
│ │ ├── octavia
|
||||
│ │ ├── overview-admin.js
|
||||
│ │ ├── project.js
|
||||
│ │ ├── root.js
|
||||
│ │ └── skyline
|
||||
│ ├── styles (Public styles)
|
||||
│ │ ├── base.less
|
||||
│ │ ├── main.less
|
||||
│ │ ├── reset.less
|
||||
│ │ └── variables.less
|
||||
│ └── utils (Public functions)
|
||||
│ ├── RouterConfig.jsx
|
||||
│ ├── constants.js
|
||||
│ ├── cookie.js
|
||||
│ ├── file.js
|
||||
│ ├── file.spec.js
|
||||
│ ├── index.js
|
||||
│ ├── index.test.js (Unit testing)
|
||||
│ ├── local-storage.js
|
||||
│ ├── local-storage.spec.js (Unit testing)
|
||||
│ ├── request.js
|
||||
│ ├── table.jsx
|
||||
│ ├── time.js
|
||||
│ ├── time.spec.js
|
||||
│ ├── translate.js
|
||||
│ ├── translate.spec.js
|
||||
│ ├── validate.js
|
||||
│ ├── yaml.js
|
||||
│ └── yaml.spec.js
|
||||
├── test
|
||||
│ ├── e2e (E2E testing)
|
||||
│ └── unit (Unit testing)
|
||||
├── tools
|
||||
│ └── git_config
|
||||
│ └── commit_message.txt
|
||||
└── yarn.lock
|
||||
|
||||
@ -1,2 +1,121 @@
|
||||
Ready To Work
|
||||
~~~~~~~~~~~~~~
|
||||
|
||||
For more information about installation, refer to the :ref:`source-install-ubuntu`
|
||||
|
||||
Preparation before development
|
||||
------------------------------
|
||||
|
||||
- Node environment
|
||||
|
||||
- Requirement in package.json: ``"node": ">=10.22.0"``
|
||||
- Verify nodejs version
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
node -v
|
||||
|
||||
- Yarn
|
||||
|
||||
- Install yarn
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
npm install -g yarn
|
||||
|
||||
- Install dependencies
|
||||
|
||||
- Execute in the project root directory, which is the same level as
|
||||
``package.json``, and wait patiently for the installation to complete
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
yarn install
|
||||
|
||||
- Prepare a usable backend
|
||||
|
||||
- Prepare an accessible backend, for example: ``https://172.20.154.250``
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``:
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'https://172.20.154.250',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
- Configure access host and port
|
||||
|
||||
- Modify :guilabel:`devServer.host` and :guilabel:`devServer.port`
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
disableHostCheck: true,
|
||||
// progress: true
|
||||
};
|
||||
|
||||
- Completed
|
||||
|
||||
- Execute in the project root directory, which is the same level
|
||||
as ``package.json``
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
yarn run dev
|
||||
|
||||
- Use the :guilabel:`host` and :guilabel:`port` configured in
|
||||
``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
|
||||
|
||||
- The front-end real-time update environment used for development is done.
|
||||
|
||||
Front-end package used in production environment
|
||||
------------------------------------------------
|
||||
|
||||
Have the required ``nodejs`` and ``yarn``
|
||||
|
||||
Execute in the project root directory, which is the same level
|
||||
as ``package.json``
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
yarn run build
|
||||
|
||||
The packaged files are in the ``dist`` directory and handed over
|
||||
to the deployment personnel.
|
||||
|
||||
Front-end package used for testing
|
||||
-----------------------------------
|
||||
|
||||
Have the required ``nodejs`` and ``yarn``
|
||||
|
||||
Execute in the project root directory, which is the same level
|
||||
as ``package.json``
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
yarn run build:test
|
||||
|
||||
The packaged files are in the ``dist`` directory
|
||||
|
||||
.. note::
|
||||
|
||||
This test package is designed to measure code coverage
|
||||
|
||||
It is recommended to use nginx to complete the E2E test with code coverage
|
||||
|
||||
@ -1,99 +1,99 @@
|
||||
Catalog Introduction
|
||||
~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
.. code-block:: text
|
||||
.. code-block:: text
|
||||
|
||||
test
|
||||
├── e2e (E2E code storage location)
|
||||
│ ├── config
|
||||
│ │ ├── config.yaml (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information)
|
||||
│ │ └── local_config.yaml (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information, which is gitignore and has a higher priority than config.yaml)
|
||||
│ ├── fixtures (Store upload files, read files, etc. required during operation)
|
||||
│ │ ├── keypair (Test file read by key)
|
||||
│ │ ├── metadata.json (Test metadata read file)
|
||||
│ │ ├── stack-content.yaml (Files read by the test stack)
|
||||
│ │ └── stack-params.yaml (Files read by the test stack)
|
||||
│ ├── integration (Store unit test)
|
||||
│ │ └── pages (Adjust the directory according to the webpage menu structure)
|
||||
│ │ ├── compute (compute)
|
||||
│ │ │ ├── aggregate.spec.js (aggregate)
|
||||
│ │ │ ├── baremetal.spec.js (baremetal)
|
||||
│ │ │ ├── flavor.spec.js (instance flavor)
|
||||
│ │ │ ├── hypervisor.spec.js (hypervisor)
|
||||
│ │ │ ├── image.spec.js (image)
|
||||
│ │ │ ├── instance.spec.js (instance)
|
||||
│ │ │ ├── ironic.spec.js (ironic)
|
||||
│ │ │ ├── keypair.spec.js (keypair)
|
||||
│ │ │ └── server-group.spec.js (server group)
|
||||
│ │ ├── configuration (Platform configuration)
|
||||
│ │ │ ├── metadata.spec.js (metadata)
|
||||
│ │ │ └── system.spec.js (system info)
|
||||
│ │ ├── error.spec.js (error page)
|
||||
│ │ ├── heat (heat)
|
||||
│ │ │ └── stack.spec.js (stack)
|
||||
│ │ ├── identity (identity)
|
||||
│ │ │ ├── domain.spec.js (Domain)
|
||||
│ │ │ ├── project.spec.js (Project)
|
||||
│ │ │ ├── role.spec.js (Role)
|
||||
│ │ │ ├── user-group.spec.js (User group)
|
||||
│ │ │ └── user.spec.js (User)
|
||||
│ │ ├── login.spec.js (Login)
|
||||
│ │ ├── management (Operation management)
|
||||
│ │ │ └── recycle-bin.spec.js (Recycle)
|
||||
│ │ ├── network (Network)
|
||||
│ │ │ ├── floatingip.spec.js (Floating ip)
|
||||
│ │ │ ├── lb.spec.js (Loadbalance)
|
||||
│ │ │ ├── network.spec.js (Network)
|
||||
│ │ │ ├── qos-policy.spec.js (Qos policy)
|
||||
│ │ │ ├── router.spec.js (Router)
|
||||
│ │ │ ├── security-group.spec.js (Security group)
|
||||
│ │ │ ├── topology.spec.js (Network topology)
|
||||
│ │ │ ├── port.spec.js (Virtual Adapter)
|
||||
│ │ │ └── vpn.spec.js (VPN)
|
||||
│ │ └── storage (Storage)
|
||||
│ │ ├── backup.spec.js (Backup)
|
||||
│ │ ├── qos.spec.js (QoS)
|
||||
│ │ ├── snapshot.spec.js (Volume snapshot)
|
||||
│ │ ├── storage.spec.js (Storage)
|
||||
│ │ ├── volume-type.spec.js (Volume type)
|
||||
│ │ └── volume.spec.js (Volume)
|
||||
│ ├── plugins (Cypress plugins)
|
||||
│ │ └── index.js (Configured to read the configuration file, configured to use the code coverage function)
|
||||
│ ├── report (Store E2E test report)
|
||||
│ │ ├── merge-report.html (The final test report that records the execution of each use case)
|
||||
│ │ └── merge-report.json (Summary of test results in the results directory)
|
||||
│ ├── results (Store test result files)
|
||||
│ ├── screenshots (Store a snapshot of the test error)
|
||||
│ ├── support (When writing a test case, double-wrapped function)
|
||||
│ │ ├── commands.js (Store login, logout and other operation functions)
|
||||
│ │ ├── common.js (Store base functions)
|
||||
│ │ ├── constants.js (Store the route of each resource)
|
||||
│ │ ├── detail-commands.js (Store the functions related to the resource detail page, based on the framework, the operation of the detail page is consistent)
|
||||
│ │ ├── form-commands.js (Stores form-related functions, based on the framework, consistent with the operation of form items)
|
||||
│ │ ├── index.js
|
||||
│ │ ├── resource-commands.js (Store functions related to resource operations, such as creating instance, creating router, deleting resources, etc.)
|
||||
│ │ └── table-commands.js (Store the functions related to the resource list based on the framework, and it has consistency in the operation of the lis)
|
||||
│ └── utils (Store the read function for the configuration file)
|
||||
│ └── index.js
|
||||
└── unit (Unit test)
|
||||
├── local-storage-mock.js ( Storage mock function in local)
|
||||
├── locales (Translation files used when testing internationalization)
|
||||
│ ├── en-US.js
|
||||
│ └── zh-CN.js
|
||||
├── setup-tests.js (setup uni test)
|
||||
└── svg-mock.js (Mock of image loading)
|
||||
test
|
||||
├── e2e (E2E code storage location)
|
||||
│ ├── config
|
||||
│ │ ├── config.yaml (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information)
|
||||
│ │ └── local_config.yaml (Part of the configuration when E2E running, mainly configures the test case file list, login account and other information, which is gitignore and has a higher priority than config.yaml)
|
||||
│ ├── fixtures (Store upload files, read files, etc. required during operation)
|
||||
│ │ ├── keypair (Test file read by key)
|
||||
│ │ ├── metadata.json (Test metadata read file)
|
||||
│ │ ├── stack-content.yaml (Files read by the test stack)
|
||||
│ │ └── stack-params.yaml (Files read by the test stack)
|
||||
│ ├── integration (Store unit test)
|
||||
│ │ └── pages (Adjust the directory according to the webpage menu structure)
|
||||
│ │ ├── compute (compute)
|
||||
│ │ │ ├── aggregate.spec.js (aggregate)
|
||||
│ │ │ ├── baremetal.spec.js (baremetal)
|
||||
│ │ │ ├── flavor.spec.js (instance flavor)
|
||||
│ │ │ ├── hypervisor.spec.js (hypervisor)
|
||||
│ │ │ ├── image.spec.js (image)
|
||||
│ │ │ ├── instance.spec.js (instance)
|
||||
│ │ │ ├── ironic.spec.js (ironic)
|
||||
│ │ │ ├── keypair.spec.js (keypair)
|
||||
│ │ │ └── server-group.spec.js (server group)
|
||||
│ │ ├── configuration (Platform configuration)
|
||||
│ │ │ ├── metadata.spec.js (metadata)
|
||||
│ │ │ └── system.spec.js (system info)
|
||||
│ │ ├── error.spec.js (error page)
|
||||
│ │ ├── heat (heat)
|
||||
│ │ │ └── stack.spec.js (stack)
|
||||
│ │ ├── identity (identity)
|
||||
│ │ │ ├── domain.spec.js (Domain)
|
||||
│ │ │ ├── project.spec.js (Project)
|
||||
│ │ │ ├── role.spec.js (Role)
|
||||
│ │ │ ├── user-group.spec.js (User group)
|
||||
│ │ │ └── user.spec.js (User)
|
||||
│ │ ├── login.spec.js (Login)
|
||||
│ │ ├── management (Operation management)
|
||||
│ │ │ └── recycle-bin.spec.js (Recycle)
|
||||
│ │ ├── network (Network)
|
||||
│ │ │ ├── floatingip.spec.js (Floating ip)
|
||||
│ │ │ ├── lb.spec.js (Loadbalance)
|
||||
│ │ │ ├── network.spec.js (Network)
|
||||
│ │ │ ├── qos-policy.spec.js (Qos policy)
|
||||
│ │ │ ├── router.spec.js (Router)
|
||||
│ │ │ ├── security-group.spec.js (Security group)
|
||||
│ │ │ ├── topology.spec.js (Network topology)
|
||||
│ │ │ ├── port.spec.js (Virtual Adapter)
|
||||
│ │ │ └── vpn.spec.js (VPN)
|
||||
│ │ └── storage (Storage)
|
||||
│ │ ├── backup.spec.js (Backup)
|
||||
│ │ ├── qos.spec.js (QoS)
|
||||
│ │ ├── snapshot.spec.js (Volume snapshot)
|
||||
│ │ ├── storage.spec.js (Storage)
|
||||
│ │ ├── volume-type.spec.js (Volume type)
|
||||
│ │ └── volume.spec.js (Volume)
|
||||
│ ├── plugins (Cypress plugins)
|
||||
│ │ └── index.js (Configured to read the configuration file, configured to use the code coverage function)
|
||||
│ ├── report (Store E2E test report)
|
||||
│ │ ├── merge-report.html (The final test report that records the execution of each use case)
|
||||
│ │ └── merge-report.json (Summary of test results in the results directory)
|
||||
│ ├── results (Store test result files)
|
||||
│ ├── screenshots (Store a snapshot of the test error)
|
||||
│ ├── support (When writing a test case, double-wrapped function)
|
||||
│ │ ├── commands.js (Store login, logout and other operation functions)
|
||||
│ │ ├── common.js (Store base functions)
|
||||
│ │ ├── constants.js (Store the route of each resource)
|
||||
│ │ ├── detail-commands.js (Store the functions related to the resource detail page, based on the framework, the operation of the detail page is consistent)
|
||||
│ │ ├── form-commands.js (Stores form-related functions, based on the framework, consistent with the operation of form items)
|
||||
│ │ ├── index.js
|
||||
│ │ ├── resource-commands.js (Store functions related to resource operations, such as creating instance, creating router, deleting resources, etc.)
|
||||
│ │ └── table-commands.js (Store the functions related to the resource list based on the framework, and it has consistency in the operation of the lis)
|
||||
│ └── utils (Store the read function for the configuration file)
|
||||
│ └── index.js
|
||||
└── unit (Unit test)
|
||||
├── local-storage-mock.js ( Storage mock function in local)
|
||||
├── locales (Translation files used when testing internationalization)
|
||||
│ ├── en-US.js
|
||||
│ └── zh-CN.js
|
||||
├── setup-tests.js (setup uni test)
|
||||
└── svg-mock.js (Mock of image loading)
|
||||
|
||||
#. E2E test code, stored in the ``test/e2e`` directory
|
||||
E2E test code, stored in the ``test/e2e`` directory
|
||||
|
||||
- Other global configurations of E2E are stored in ``cypress.json``
|
||||
- Other global configurations of E2E are stored in ``cypress.json``
|
||||
|
||||
#. The basic code of the unit test is stored in the ``test/unit`` directory
|
||||
The basic code of the unit test is stored in the ``test/unit`` directory
|
||||
|
||||
- Other global configuration of unit test, stored in ``jest.config.js``
|
||||
- Other global configuration of unit test, stored in ``jest.config.js``
|
||||
|
||||
- The test code of the unit test is usually placed in the same directory
|
||||
as the file to be tested, and has a suffix of ``test.js`` or ``spec.js``
|
||||
- The test code of the unit test is usually placed in the same directory
|
||||
as the file to be tested, and has a suffix of ``test.js`` or ``spec.js``
|
||||
|
||||
- case: ``src/utils/index.js`` and ``src/utils/index.test.js``
|
||||
- case: ``src/utils/index.js`` and ``src/utils/index.test.js``
|
||||
|
||||
- case: ``src/utils/local-storage.js`` and ``src/utils/local-storage.spec.js``
|
||||
- case: ``src/utils/local-storage.js`` and ``src/utils/local-storage.spec.js``
|
||||
|
||||
@ -13,118 +13,128 @@ The following is an introduction, taking the instance use case
|
||||
Generally, when testing the corresponding functions of a resource,
|
||||
follow the following order
|
||||
|
||||
#. Prepare relevant variables in text
|
||||
1. Prepare relevant variables in text
|
||||
-------------------------------------
|
||||
|
||||
- Required parameters when creating a resource, such as: name, password
|
||||
- Required parameters when creating a resource, such as: name, password
|
||||
|
||||
- Required parameters when editing resources, such as: new name
|
||||
- Required parameters when editing resources, such as: new name
|
||||
|
||||
- When creating an associated resource, the name of the associated resource,
|
||||
such as: network name, router name, volume name
|
||||
- When creating an associated resource, the name of the associated resource,
|
||||
such as: network name, router name, volume name
|
||||
|
||||
.. code-block:: javascript
|
||||
.. code-block:: javascript
|
||||
|
||||
const uuid = Cypress._.random(0, 1e6);
|
||||
const name = `e2e-instance-${uuid}`;
|
||||
const newname = `${name}-1`;
|
||||
const password = 'passW0rd_1';
|
||||
const volumeName = `e2e-instance-attach-volume-${uuid}`;
|
||||
const networkName = `e2e-network-for-instance-${uuid}`;
|
||||
const routerName = `e2e-router-for-instance-${uuid}`;
|
||||
const uuid = Cypress._.random(0, 1e6);
|
||||
const name = `e2e-instance-${uuid}`;
|
||||
const newname = `${name}-1`;
|
||||
const password = 'passW0rd_1';
|
||||
const volumeName = `e2e-instance-attach-volume-${uuid}`;
|
||||
const networkName = `e2e-network-for-instance-${uuid}`;
|
||||
const routerName = `e2e-router-for-instance-${uuid}`;
|
||||
|
||||
#. Login before operation
|
||||
2. Login before operation
|
||||
-------------------------
|
||||
|
||||
- If you are operating console resources, please use :guilabel:`cy.login`
|
||||
- If you are operating console resources, please use :guilabel:`cy.login`
|
||||
|
||||
- If you are operating administrator resource, please use :guilabel:`cy.loginAdmin`
|
||||
- If you are operating administrator resource, please use :guilabel:`cy.loginAdmin`
|
||||
|
||||
- Generally, the variable :guilabel:`listUrl` is used in the
|
||||
:guilabel:`login` and :guilabel:`loginAdmin` functions, that is,
|
||||
directly access the page where the resource is located after logging in
|
||||
- Generally, the variable :guilabel:`listUrl` is used in the
|
||||
:guilabel:`login` and :guilabel:`loginAdmin` functions, that is,
|
||||
directly access the page where the resource is located after logging in
|
||||
|
||||
.. code-block:: javascript
|
||||
.. code-block:: javascript
|
||||
|
||||
beforeEach(() => {
|
||||
cy.login(listUrl);
|
||||
});
|
||||
beforeEach(() => {
|
||||
cy.login(listUrl);
|
||||
});
|
||||
|
||||
#. Create associated resources, use the resource creation function provided in
|
||||
``resource-commands.js``, take the test instance as an example
|
||||
3. Create associated resources
|
||||
------------------------------
|
||||
|
||||
- Create a network for testing to create a instance, attach interface
|
||||
Create associated resources, use the resource creation function provided in
|
||||
``resource-commands.js``, take the test instance as an example
|
||||
|
||||
.. code-block:: javascript
|
||||
- Create a network for testing to create a instance, attach interface
|
||||
|
||||
cy.createNetwork({ name: networkName });
|
||||
.. code-block:: javascript
|
||||
|
||||
- Create router :guilabel:`cy.createRouter` to ensure that the
|
||||
floating IP is reachable when testing the associated floating IP
|
||||
cy.createNetwork({ name: networkName });
|
||||
|
||||
- The router created in the following way will open the external network
|
||||
gateway and bind the subnet of the :guilabel:`networkName` network
|
||||
- Create router :guilabel:`cy.createRouter` to ensure that the
|
||||
floating IP is reachable when testing the associated floating IP
|
||||
|
||||
.. code-block:: javascript
|
||||
- The router created in the following way will open the external network
|
||||
gateway and bind the subnet of the :guilabel:`networkName` network
|
||||
|
||||
cy.createRouter({ name: routerName, network: networkName });
|
||||
.. code-block:: javascript
|
||||
|
||||
- Create floating ip :guilabel:`cy.createFip`,
|
||||
Used to test associate floating ip
|
||||
cy.createRouter({ name: routerName, network: networkName });
|
||||
|
||||
.. code-block:: javascript
|
||||
- Create floating ip :guilabel:`cy.createFip`,
|
||||
Used to test associate floating ip
|
||||
|
||||
cy.createFip();
|
||||
.. code-block:: javascript
|
||||
|
||||
- Create volume :guilabel:`cy.createVolume` (Used to test attach volume)
|
||||
cy.createFip();
|
||||
|
||||
.. code-block:: javascript
|
||||
- Create volume :guilabel:`cy.createVolume` (Used to test attach volume)
|
||||
|
||||
cy.createVolume(volumeName);
|
||||
.. code-block:: javascript
|
||||
|
||||
#. Write cases for creating resources
|
||||
cy.createVolume(volumeName);
|
||||
|
||||
#. Write use cases for accessing resource details
|
||||
4. Write cases
|
||||
--------------
|
||||
|
||||
#. Write use cases corresponding to all operations of resources separately
|
||||
- Write cases for creating resources
|
||||
- Write use cases for accessing resource details
|
||||
- Write use cases corresponding to all operations of resources separately
|
||||
|
||||
Generally, the use case of the :guilabel:`edit` operation is written later,
|
||||
and then the use case of the :guilabel:`delete` operation is written,
|
||||
so that you can test whether the editing is effective
|
||||
|
||||
#. To delete associated resources, use the resource-deleting function provided
|
||||
in ``resource-commands.js``, this is to make the resources in the test
|
||||
account as clean as possible after the test case is executed
|
||||
5. delete associated resources
|
||||
-------------------------------
|
||||
|
||||
- Delete Floating IP
|
||||
To delete associated resources, use the resource-deleting function provided
|
||||
in ``resource-commands.js``, this is to make the resources in the test
|
||||
account as clean as possible after the test case is executed
|
||||
|
||||
.. code-block:: javascript
|
||||
- Delete Floating IP
|
||||
|
||||
cy.deleteAll('fip');
|
||||
.. code-block:: javascript
|
||||
|
||||
- Delete Router :guilabel:`routerName`
|
||||
cy.deleteAll('fip');
|
||||
|
||||
.. code-block:: javascript
|
||||
- Delete Router :guilabel:`routerName`
|
||||
|
||||
cy.deleteRouter(routerName, networkName);
|
||||
.. code-block:: javascript
|
||||
|
||||
- Delete Network :guilabel:`networkName`
|
||||
cy.deleteRouter(routerName, networkName);
|
||||
|
||||
.. code-block:: javascript
|
||||
- Delete Network :guilabel:`networkName`
|
||||
|
||||
cy.deleteAll('network', networkName);
|
||||
.. code-block:: javascript
|
||||
|
||||
- Delete Volume :guilabel:`volumeName`
|
||||
cy.deleteAll('network', networkName);
|
||||
|
||||
.. code-block:: javascript
|
||||
- Delete Volume :guilabel:`volumeName`
|
||||
|
||||
cy.deleteAll('volume', volumeName);
|
||||
.. code-block:: javascript
|
||||
|
||||
- Delete all available volume
|
||||
cy.deleteAll('volume', volumeName);
|
||||
|
||||
.. code-block:: javascript
|
||||
- Delete all available volume
|
||||
|
||||
cy.deleteAllAvailableVolume();
|
||||
.. code-block:: javascript
|
||||
|
||||
The ``4``, ``5``, and ``6`` in the above steps are mainly used
|
||||
cy.deleteAllAvailableVolume();
|
||||
|
||||
Reference
|
||||
----------
|
||||
|
||||
- The function operation form in ``test/e2e/support/form-commands.js``,
|
||||
please refer to the detailed introduction
|
||||
|
||||
Loading…
Reference in New Issue
Block a user