-
Maxence Demougeot authoredMaxence Demougeot authored
OCE Scenario Maker
OCE Scenario Maker is an application that aims at creating and editing scenarios for the Opportunistic Composition Engine (see https://gitlab.irit.fr/oppocompo/oppocompo/OCE). More precisely, this tool can be used to create scenarios for the OCE Testing Tool to experiment easier.
Requirements
To run and use OCE Scenario Maker, you must have:
- NodeJS v14.17.0 or higher
- npm v7.14.0 or higher
Dependencies
You can see dependencies in the package.json file but here is an overview of them:
- avj
- bootstrap-vue
- vue
- vuex
Install and run
To install this tool, after cloning the project, you have to use the command
npm install
on the root folder. Then, you can run it in development mode using the command vue-cli-service serve
.
Guide
With this tool, you can create and edit scenarios. When you run the application, on the web page, you can differentiate two parts. On the left side, you can create your own component library by adding components with services. On the right side, you can create scenario cycles, put components in it and link components to others. How does it work? After building your library, drag and drop components in cycles and choose the bindings. When you finish, press the "Save Scenario" button to save the scenario json file on your computer. A demonstration video of OCE Scenario Maker is available here.
Testing
To set up, write and run front-end tests, we use the Cypress tool. Cypress makes us able to create end-to-end tests and check how the front components of this application behave in any case we want to test.
To run available end-to-end tests, use the command vue-cli-service test:e2e
, a window will open, and you can choose which specification you want to run by clicking on it, and you will see the execution of the tests.
In the OCE Scenario Maker project, we try to test the majority of the features. Currently, the tested features are:
- Component creation and deletion
- Library display
- Cycle creation and deletion
- Adding and removing components to cycles
- Linking components
- Adding and removing bindings
Cypress also makes you able to check the generated code coverage report by opening the coverage/lcov-report/index.html
locally page. Currently, around 95% of the features are covered by end-to-end tests.
Warning: when you check a vue component code coverage, there may be an offset between the coverage information and the targeted line of code (offset = html template size)
Contributors
The following people have contributed to the source code of this project:
- Kévin DELCOURT
- Maxence DEMOUGEOT
- Jordan LEVY