Source Code

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 src folder.

This folder is the root of the project and is divided into:

Assets

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.

Components

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.

Directives

Here are the directives for manipulating the elements in the HTML.

Locales

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.

Store

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.

Utils

All utility functions are added here.

Tests

Unit Tests

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.

Integration Tests

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: VUE_APP_USER_TOKEN

  • The document id: VUE_APP_DOCUMENT

  • The API URL: VUE_APP_API_URL

  • The document images download URL: VUE_APP_IMAGE_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.