stefan22 / bookshop

Test driven development React Jest Cypress

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bookshop React

This project was bootstrapped with Create React App.

☕ NPMJS URL: ESLint-config-slco


Feature 1 - Booklist √
 As a user I want to see a list of of books 
 so that I can learn something new

Acceptance criteria:

 Given there are 3 books in the library
 When a user visits the homepage
 Then he/she would see 3 books on the page
 And each book should contain at least book 'name' and 'description intro'
Feature 2 - Book details √
 As a user, I want to see the details of a book 
 so that I can  decide whether to read it or not

Acceptance criteria:

 User clicks an item in the booklist and is redirected to the details page
 The details page display the book name, and book description
Feature 3 - Searching √
 As a user, I want to search for a book by its name 
 so that I can find quickly what I like

Acceptance criteria:

 The user types 'wars' as a search word
 Only books with 'wars' in their name are displayed in the book list
Feature 4 - Reviews √
 As a user, I want to be able to add a review to a book I have read previously
 so that people who have the same interests could decide whether to read the book or not

Acceptance criteria:

 A user can read reviews on the detail page 
 A user can post a review to a particular book 


About project

Developing features above w/TDD

  • Tests
  • Tests with Redux under   :folder:   [./src/redux >]

Before run:

At src/helpers/baseUrl.js change URL to

 export const BASE_URL = 'http://localhost:8080'
Running app
  npm start  //react
Running json-server

CD to stubServer and type

npm install && npm start
Jest & Cypress
 npm test // jest
 npm run cypress:open  //cypress
 npm run cypress:run   //cypress headless
ESlint and Prettier

Loads eslint-config-slco npm package from registry. See repository link above for how-to-install.

 npm run lint        //eslint-prettier
 npm run lint:fix    //eslint-prettier (with eslint-config-slco)
Jest/Cypress config files
Add Cypress/Jest config
  • Cypress bookshop.spec.cy.js [ok]
  • Jest Booklist.test.js [ok]

💯

About

Test driven development React Jest Cypress


Languages

Language:JavaScript 95.7%Language:HTML 4.3%