upwork Test

A simple form with given input fields and unique validations for each.

I have made this using pure VueJs framework.

Hosted URL

https://fluffy-cat-121b18.netlify.app

Application is deployed here to quickly review the output.

Local Setup

• Clone or Download the repo.
• Run npm install inside the directory.
• Run npm run dev to spin up the local dev setup.

Test Cases

npm run test:e2e for Testing all the given scenarios

Tasks

• Crete a form with 3 given fields
• Add required and min 3 validations to Username
• Add required and auto-fill validations for country field
• Add required and Tax format validations to the field
• Show validation message below the input
• Make Ajax (fetch) call
• Show Error message if status code is not 200
• Show success message if status code is equal to 200
• Written cypress tests for each of the above scenario
• Use Bootstrap / rapid CSS framework
• Custom CSS

Further Enhanement

• Implement Dirty and touch state to manage showing of error messages in more control way.
• Some more test cases can be written for AutoComplete component, but due to shortage of time it's not there.
• However, E2E test cases are covering all of the mentioned conditions.
• Handled a few edge cases like if user tries to change country after filling tax field.

I hope you will enjoy reviewing the code as much as I enjoyed while writing it ❤️