Example of a company website built with Vue and unit tests with Cypress

• Vue
• Cypress
• Vue-ApexCharts
• Vuelidate
• Vuex
• vue-router
• vue-the-mask

This project shows a simple flux of pages containing informations about a fictional company and how to make unit tests by using Cypress.

Install the dependencies:

npm install

Run the app:

npm start

Access the website at:

http://localhost:8080/

The nav bar and the footer are just empty backgrounds. There's only content in the Company Data and Company Page screens.

The Company Data screen shows a form with the fields: Company Name, Company Spend, Company Spend Ability Min, Company Spend Ability Max and Notes.

By clicking on the Notes field, a modal shows up allowing for the user to type data and to add it to the Notes field content.

The Company Page screen shows multiple data about the company, such as summary, activities, similar companies and spend history.
All the data are contained inside Vuex store. The chart is created with the ApexCharts plugin.

Now let's test our application automatically. Inside the "/cypress/integration" folder are the test scripts to be executed. While keeping the application running, open the Cypress Browser with this command in another terminal:

npm run cypress

It will list the test files inside the "/cypress/integration" folder.

Click on "companydata.spec.js" option to open the test window and wait for the result. No interation will be needed.