The Document Validation UI is built using Vue.js version 2.
The entry point of the application is the
main.js, which loads all the Vue libraries and therefore opens the first Vue component, the
App.vue. This component has the responsibility to tell the store to fetch the API data required to load the components. These files can be found under the
This folder is the root of the project and is divided into:
The assets folder contains all the images and styles. Each component has its styles under the
SCSS folder. The application uses the Buefy library, so if you want to edit the application theme you can go to the file
scss/variables.scss and edit all the colors and variables to match the desired design.
The application uses FontAwesome for the icons. If you need to add new ones, you can do so on the
main.js file on the icon library setup.
Vue components that are responsible for making the application work. They are divided into sections related to their function. The different components can be found here.
Here are the directives for manipulating the elements in the HTML.
In this folder you can find the translation files, which consist of key-value pairs. There can be as many files as languages needed. Translations are implemented using the library Vue I18n, and the expected value is rendered by using the
$t translation API and passing the key as an argument.
The store is implemented using Vuex. It is responsible for saving all information coming from the API and local information regarding the use of the app, like the display scale. Most of the information is obtained, filtered, grouped, and processed in the store files which are separated by their concept.
All utility functions are added here.
You can test the application by running
npm run test:unit. Tests are developed using Vue Test Utils and are located in the
tests folder. Mock data is used to get information into the testing environment, so there’s no requirement to connect to an API. The tests are grouped by the different components and are focused on testing the components’ behavior.
For Integration Tests you can run
npm run cypress:open which will open the Cypress application. There you can choose Component testing and the browser of choice. All of the available components for testing are then listed in the specs tabs.
Since the Integration Tests connect to the Konfuzio API, an environment file is needed to provide the required parameters. You should create a
.env.test on the root of the repository based on the .env.example and specify, at least, the following required values:
The user token:
The document id:
The API URL:
The document images download URL:
To create new tests, you just need to add a file next to the component you want to test with the
*.cy.js name. For example, if you want to create tests for the
App.vue component, a file named
App.cy.js should be created and it will automatically appear in the Cypress list.