common-components-test-qwhekjqwhekqjwhekqjw v0.1.1

Vue App Template

Status Report

Overview

• Product: Vue App Template
• Brief: This is a template for Vue apps. A base template that can be forked in order to develop apps quickly and within standards. Use this tool if you have any questions on how to fill this status report.

• Product Documentation: This readme file

• Team: DX Engineering Team

• Contact: DX

• Relevant To: Developers

• Criticality: Optional
• Risk: Just an intermediate tool, no direct production impact

Specifications

• Developer Documentation: None
• System Events: None
• Access control: N/A
• Fault Tolerance: N/A
• Monitoring: N/A
• Diagnostics: N/A
• Rollback: N/A
• Maintenance: None

Status

• Last Deployment: Never.
• Approver List: N/A
• Grade: Grey

• Observations: None

• Code Coverage: ??

• Load Capacity: ??
• Security: ??
• Tech Debt: ??
• Usability Debt: None

Usage

Follow these steps to quickly get started with your Vue app based on vue-app-template:

1. Create a new repo for your project using Kebab case, which is the standard for Javascript packages. For example my-vue-app.
2. Push all the files from the unreleased branch in the vue-app-template repo to the newly created project.
3. Create a blob container in the piscldev resource group and name it after your repo slug. For example, if your repo slug is my-vue-app, then the container name must also be my-vue-app.
4. Generate a Shared Access Signature (SAS) specific for the newly created blob container.
5. Set the public access policy in the container to Public read access for blobs only.
6. Enable pipelines in the new repo.

7. Set up the following Bitbucket pipeline variables:

   • AZURE_APP_ID (copy value from vue-app-template repo)
   • AZURE_TENANT_ID (copy value from vue-app-template repo)
   • AZURE_STORAGE_SAS_TOKEN_DEV (use the SAS generated in step 4 above)
   • AZURE_STORAGE_SAS_TOKEN_QA (generate SAS signature for your blob container in the pisclqa resource group)
   • AZURE_STORAGE_SAS_TOKEN_PROD (generate SAS signature for your blob container in the pisclprod resource group)
   • AZURE_PASSWORD (TBD)
   • SONAR_LOGIN (TBD)

After all these steps will get the Bitbucket pipelines fully working so that:

• Feature branches and unreleased branch will get automatically deployed to your container in piscldev with every commit
• Release candidate branches will be automatically deployed to pisclqa
• Every new tag following the semantic versioning convention will trigger a production deployment to pisclprod

Feature branch deployment format:

https://piscldxdev.blob.core.windows.net/$BITBUCKET_REPO_SLUG/$BRANCH_NAME/index.html#/

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Run your end-to-end tests

npm run ci

Enviroment run and build

npm run serve -- --mode qa

This will serve the applicacion in http://localhost:8080/. To interact with some of Principal's applications, this app needs to be served via HTTPS under a *.principal.cl domain. To do so: 1. Add the following rule to your hosts file (/etc/hosts in Unix-based systems and c:\Windows\System32\drivers\etc\hosts in Windows):

    127.0.0.1  local.principal.cl

2. Import certifcate SSL/local.principal.cl.crt in your system. In Windows you can go to Internet Options -> Content -> Certificates -> import
3. Import SSL/root.pem in your system. In Windows you can go to Internet Options -> Content -> Certificates -> Trusted Root Certification Authorities -> import
4. Now access your local application using this URL: https://local.principal.cl:8080/#/

Customize configuration

See Configuration Reference.

File Structure

There are conventions on how to structure the app code.

The components/ folder

Inside the components folder you will find the app components, each one in its own folder. All the code related to a Vue component will live in the same folder. The entry point for the component is the index.vue file which is written using the single file component format. The component folder will include unit tests and assets for the component. Check this sample structure for a component folder:

Component/
|_ index.vue
|_ index.spec.js
|_ images
   |_ background.svg

The pages/ folder

Pages are regular Vue components it its internals, but since they have a different status they are placed in the pages/ folder. Pages components follow the same self containement pattern described for the components folder.

End to End Testing Automation setup

Testcafe has been used for End-to-End Testing of this application. Refer the following link for more information: https://devexpress.github.io/testcafe/documentation/getting-started/

The folder structure used is as follows:

test/						- Holds all the test related folders.
	|_ fixtures				- fixtures folder holds all the test/spec files for e2e automation.
		|_ example.spec.js	- this file contains the test cases /fixtures. All the test files will be placed in the 'fixtures' folder.
	|_ page-model/
		|_ page-model.js	- this file contains the page  model for the test files. This file is imported in the test files (here example.test.js file. All page-model files will be placed in the 'page-model' folder.

The 'page-model.js' file

The page-model.js file contains all the common selectors so that in future if the code changes we need to make change only in the test files and most of the components are reusablethat are used from the page-model.js file.

Refer following link for more information - https://devexpress.github.io/testcafe/documentation/recipes/extract-reusable-test-code/use-page-model.html

CDN Profiles

Create self signed ssl certificate for https

A certificate for a domain (e.g. local.principal.cl) can be created as follows:

cd ssl
bash create.sh <domain>

Note: Remember that to interact with other applications in the principal domain, you need to work locally under a local.principal.cl:<port> domain.