Skip to content

Commit fe4b1dd

Browse files
StuartCowleyStuartCowley
committed
updated readme, titles and fixed lint errors
1 parent 9c8765e commit fe4b1dd

File tree

5 files changed

+36
-17
lines changed

5 files changed

+36
-17
lines changed

‎README.md

+27-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
1-
# Intro to React session 2 lecture
1+
# Testing in React lecture
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Its is a simple blog style posts page used to demonstrate the basics of useState, prop types, basic event handlers and a broad intro to working with React in general.
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). It is built on a demo repo used for the react intro 2 lecture, a simple blog style posts page built using useState, prop types and basic event handlers.
4+
5+
Here we will using Jest, React testing library and React test renderer to add tests that:
6+
- create snapshots
7+
- use valid props for test objects
8+
- fetch elements using queries
9+
- validate elements onn screen using matchers
10+
- mock functions with Jest
11+
- validate functions are being called when triggering an event listener
412

513
## Setup
614
*This repo is intended as a guide for a tutor when giving the lecture*
715

816
The `main` branch contains the basic application, this can be forked and used as the base for a fresh repo created over the course of a lecture for the students to use when following along with the video recording.
917

10-
## Finished app
18+
## Starting point of app
1119
![Screenshot](./public/screenshot-react-intro-2.png)
1220

21+
## Task list
22+
### App component:
23+
- Create a snapshot
24+
- Assert title text is correct
25+
26+
### Post component:
27+
- Create a snapshot
28+
- Assert the post author is present
29+
- Assert there is a single button and that it has the correct text
30+
- Assert the tags list has the correct number of items
31+
- Assert clicking the button calls the handler function, and it has been called with the expected argument
32+
33+
### PostList component:
34+
- Create a snapshot
35+
- Assert the 'last upvoted' field is updated when clicking on a post
36+
1337
## Available Scripts
1438

1539
Run the app with:
@@ -20,4 +44,3 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
2044

2145
Run the tests with:
2246
### `npm test`
23-

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-intro-part-2",
2+
"name": "testing-in-react",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Introduction to React 2"
10+
content="Testing in React"
1111
/>
12-
<title>Introduction to React 2</title>
12+
<title>Testing in React</title>
1313
</head>
1414
<body>
1515
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/App.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ const App = () => {
99
<div className="app">
1010
<div className="app__background-wrap" />
1111
<div className="app__foreground-wrap">
12-
<div className="app__title">Intro to React II</div>
13-
{
14-
// TODO: Create a Postlist component to wrap all Posts in,
15-
// display name of last upvoted post at the top
16-
}
12+
<div className="app__title">Testing in React</div>
1713
<PostList posts={placeholderData} />
1814
</div>
1915
</div>

‎src/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './components/App';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import App from "./components/App";
55

6-
const root = ReactDOM.createRoot(document.getElementById('root'));
6+
const root = ReactDOM.createRoot(document.getElementById("root"));
77
root.render(
88
<React.StrictMode>
99
<App />

0 commit comments

Comments
 (0)