/whoami

Primary LanguageVue

Personality Test

This is an application that tells you your personality after you have annswered a few questions. Personality is either an Introvert or an Extrovert. There are just five questions for now just to represent a POC, a future addition is an admin dashboard that enables users to signup/login and add questions and mappings to define a personality. Current functionality includes, sign up, login, a landing page, personality test page with questions, results page and logout functionality.

The application is tested end to end with Cypress

Languages

  • VueJs 3
  • Pinia
  • Vue Router
  • Tailwind CSS
  • Axios
  • Cypress

E2E Testing

This test basically runs from sign up, login to taking a personaly test. Below is are the test results.

personality.cy.js.mp4
Screenshot 2023-05-20 at 3 41 15 PM

Component Testing

Cypress has a feture for testing individual components in an application, making it close to unit testing. You test components making sure they behave as expected. I wrote tests for the login and sign up components. Tests to check validity of input data, valid emails, valid passwords etc. Below are the results: Screenshot 2023-05-20 at 5 08 42 PM Screenshot 2023-05-20 at 5 09 01 PM Screenshot 2023-05-20 at 5 09 12 PM

Login.cy.js.mp4
Signup.cy.js.mp4

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e