Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 18 hours ago
JSON representation

A basic form app to understand how units tests can be made in Vue

Awesome Lists containing this project

README 

        



  Table of Contents

  
    

        
  1. 

          About The Project

          

        
    2. 

        
  2. 

          Getting Started

          

        
    3. 

        
  3. Key Features
    4. 

        
  4. Usage
    5. 

        
  5. Contact
    6. 

      



# 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]



(back to top)



# 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/).



(back to top)



# 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



(back to top)



# Usage

Our app looks like this:





    

    




Run the tests:





    




(back to top)



# Contact

You can contact me via:

* [![GitHub][GitHub-shield]][GitHub-url]

* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]

* ![Gmail][Gmail-shield]: [email protected]

* [![Facebook][Facebook-shield]][Facebook-url]

* [![Twitter][Twitter-shield]][Twitter-url]






(back to top)



[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