https://github.com/theemperorofdaiviet/form-testing
A basic form app to understand how units tests can be made in Vue
https://github.com/theemperorofdaiviet/form-testing
chai css3 html5 javascript mocha semantic-ui vue-test-utils vue3 vuejs
Last synced: 7 months ago
JSON representation
A basic form app to understand how units tests can be made in Vue
- Host: GitHub
- URL: https://github.com/theemperorofdaiviet/form-testing
- Owner: theEmperorofDaiViet
- Created: 2023-10-31T15:52:31.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-02T03:23:41.000Z (about 2 years ago)
- Last Synced: 2025-02-17T01:37:29.546Z (9 months ago)
- Topics: chai, css3, html5, javascript, mocha, semantic-ui, vue-test-utils, vue3, vuejs
- Language: JavaScript
- Homepage:
- Size: 288 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
# About The Project
A basic form app to understand how units tests can be made in Vue using vue-test-utils, ***Mocha*** and ***Chai***, based on chapter 9 of the book "**Fullstack Vue 3**".
## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Vue.js][Vue.js-shield]][Vue.js-url]
* [![Semantic-UI][Semantic-UI-shield]][Semantic-UI-url]
* [![Mocha][Mocha-shield]][Mocha-url]
* [![Chai][Chai-shield]][Chai-url]
# Getting Started
## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [Node.js](https://nodejs.org/en/download/): a single-threaded, open-source, cross-platform runtime environment for building fast and scalable server-side and networking applications. It runs on Chrome's V8 JavaScript runtime engine, and it uses event-driven, non-blocking I/O architecture, which makes it efficient and suitable for real-time applications.
* [npm](https://docs.npmjs.com/about-npm): the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.
* [Vue](https://vuejs.org/): a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/form-testing.git
```
After cloning the repository, you can open the project by Visual Studio Code.
## Project Setup
```
npm install
```
### Adds unit-mocha plugin for vue-cli
```
vue add unit-mocha
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Runs the test
```
npm run test
```
### Runs the tests in watch mode
```
npm run test:watch
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# Key Features
- The template is a `
` element that contains a HTML table with the following details:
- The table has a title of ‘**Items**’ specified in the header (``).
- The body of the table, ``, displays a list of items from an items array stored in the components data, with the help of the v-for directive.
- The footer consists of a form that upon submit calls an addItem() method to add items to the list:
- An input field that is bound to an item data property
- An Add button is used to submit the form
- A Remove all label invokes a removeAllItems() method on click to remove all items from the list.
+ Testing App:
+ Test whether the components Add button is disabled upon page load
+ Test initial data
+ Test if the component renders the correct template content
+ Test if the item data property matches the input value after the event is triggered
+ Test whether the Add button to become disabled again when the user clears an input field that has been filled out
+ When a user submits the form, test:
+ If the newly added item is in the data property items and is displayed in the rendered table
+ If the item data value is reverted to a blank string and the input field is cleared out
+ If the Add button is disabled once again
+ Test whether no items remain in the form after a user clicks the Remove all label
# Usage
Our app looks like this:
Run the tests:
# Contact
You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: Khiet.To.05012001@gmail.com
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]
[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/
[Vue.js-shield]: https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D
[Vue.js-url]: https://vuejs.org/
[Semantic-UI-shield]: https://img.shields.io/badge/Semantic%20UI%20React-35BDB2.svg?style=for-the-badge&logo=Semantic-UI-React&logoColor=white
[Semantic-UI-url]: https://semantic-ui.com/
[Mocha-shield]: https://img.shields.io/badge/Mocha-8D6748?style=for-the-badge&logo=Mocha&logoColor=white
[Mocha-url]: https://mochajs.org/
[Chai-shield]: https://img.shields.io/badge/chai-A30701?style=for-the-badge&logo=chai&logoColor=white
[Chai-url]: https://www.chaijs.com/
[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo