# web-module-project-testing-web-apps

**Repository Path**: mirrors_LambdaSchool/web-module-project-testing-web-apps

## Basic Information

- **Project Name**: web-module-project-testing-web-apps
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-14
- **Last Updated**: 2026-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Integration Testing React Module Project : Contact Form - Testing

This module explored the basics of the react-testing library and ideas behind the integration testing methodology. In this project you will practice how to build tests that follow the arrange-act-assert model, different methods of querying for DOM elements in a test, the use of different expect types and using async/await to test for changes in state.

## Testing Web Applications

## Objectives

- explain what automated testing is and its importance
- use react-testing-library for testing react components
- use react-testing-library to test user interactions with userEvent
- use async / await and waitFor to test changes in a components state.

## Introduction

In this challenge, you will be writing tests for a contact form that has been built with React.

As a developer, you will be writing tests for every component. As we've learned, tests are a very important part of programming. The tests you will write will help you feel confident in the code you push to production!

***Make sure to complete your tasks one at a time and complete test each task before proceding forward.***

## Instructions

### Task 1: Project Set Up

- [ ] Create a forked copy of this project.
- [ ] Clone your OWN version of the repository in your terminal
- [ ] Download project dependencies by running `npm install`
- [ ] Start up the app using `npm start`
- [ ] In a new terminal window, run `npm test`
- [ ] With each saved change in your editor, the test runner will re-run all the tests
- [ ] **IMPORTANT** If a test fails, use the test runner's error messages to find out why it is failing

### Task 2: Project Requirements

> *All of the work you will do today will be contained inside the ContactForm.test.js file. You will be tasked to write the code for at least 9 different tests on various parts of the ContactForm component. Please read the instructions for each test carefully.*

#### Test Brainstorming

* [ ] Run and play around with the form interface.
* [ ] Write out a list of possible testcases for this application within Understanding-questions.md.

#### Complete a case that tests if

* [ ] the component renders the contact form component without errors.
* [ ] the header h1 element exists. Include three asserts, if the header is in the document, if the heads is truthy, if the header has the correct test content.
* [ ] the component renders ONE error message if the user enters less than 4 characters into the firstname field. Make sure to use async / await and the correct screen method to account for state change.
* [ ] the component renders THREE error messages if the user submits without filling in any values.
* [ ] the component renders ONE error message if the user submits without filling in the email field.
* [ ] the component renders the text *"email must be a valid email address"* if an invalid email address is typed into the email field.
* [ ] the component renders the text *"lastName is a required field"* the form is submitted without a last name.
* [ ] the component renders the firstname, lastname and email text when submitted with valued fields and does **not** render a message value when one is not entered into the message field.
* [ ] renders all fields when the user submits with valid text filled in for all fields.

## Stretch goals

- Look at your test cases in Understanding-questions and see if there are any that you have not completed.
- From the this list or from your own mind, add in at least one more new testcase.
- There is alot of state management within our component in this project! See if you can separate the form and error validation code into their own hooks.