1- import { server } from './src/mocks/server'
2- import { resetArticles } from './src/mocks/data'
31import { BrowserRouter as Router , Route } from "react-router-dom" ;
42
53import MutationObserver from 'mutationobserver-shim' ;
64
75import React from 'react'
86
9- import App from './src/components/App'
10- import Login from './src/components/Login' ;
11- import View from './src/components/View' ;
12-
13- import { render , screen , waitFor , within } from '@testing-library/react'
14- import userEvent from '@testing-library/user-event' ;
15-
167import '@testing-library/jest-dom/extend-expect'
178
18- beforeAll ( ( ) => { server . listen ( ) } )
19- afterAll ( ( ) => { server . close ( ) } )
20- beforeEach ( ( ) => {
21- resetArticles ( )
22- } )
23- afterEach ( ( ) => {
24- server . resetHandlers ( )
25- document . body . innerHTML = ''
26- } )
27-
289test ( 'Is the latest version of the project' , ( ) => {
2910 const pjson = require ( './package.json' )
3011 expect ( pjson . version ) . toBe ( '0.0.1' )
3112} ) ;
32-
33-
34- const cred = {
35- username : "Lambda" ,
36- password : "School"
37- }
38-
39- describe ( "Login Authentication" , ( ) => {
40- test ( "App does nothing when login incorrect username" , async ( ) => {
41- render ( < Router >
42- < Route > < Login /> </ Route >
43- </ Router > ) ;
44-
45- const nameInput = document . querySelector ( "#username" ) ;
46- const passwordInput = document . querySelector ( "#password" ) ;
47-
48- userEvent . clear ( nameInput ) ;
49- userEvent . type ( nameInput , "wrong" ) ;
50- let wait = await screen . findAllByRole ( "button" ) ;
51-
52- userEvent . clear ( passwordInput ) ;
53- userEvent . type ( passwordInput , cred . password ) ;
54- wait = await screen . findAllByRole ( "button" ) ;
55-
56- const button = document . querySelector ( "#submit" ) ;
57- userEvent . click ( button ) ;
58- wait = await screen . findAllByRole ( "button" ) ;
59-
60- await waitFor ( ( ) => {
61- const error = document . querySelector ( "#error" ) ;
62- expect ( error . textContent ) . toBeTruthy ( ) ;
63- } ) ;
64- } ) ;
65-
66- test ( "App does nothing when login incorrect password" , async ( ) => {
67- render ( < Router >
68- < Route > < Login /> </ Route >
69- </ Router > ) ;
70-
71- const nameInput = document . querySelector ( "#username" ) ;
72- const passwordInput = document . querySelector ( "#password" ) ;
73-
74- userEvent . clear ( nameInput ) ;
75- userEvent . type ( nameInput , cred . username ) ;
76- let wait = await screen . findAllByRole ( "button" ) ;
77-
78- userEvent . clear ( passwordInput ) ;
79- userEvent . type ( passwordInput , "wrong" ) ;
80- wait = await screen . findAllByRole ( "button" ) ;
81-
82- const button = document . querySelector ( "#submit" ) ;
83- userEvent . click ( button ) ;
84- wait = await screen . findAllByRole ( "button" ) ;
85-
86- await waitFor ( ( ) => {
87- const error = document . querySelector ( "#error" ) ;
88- expect ( error . textContent ) . toBeTruthy ( ) ;
89- } ) ;
90- } ) ;
91-
92- test ( "App Successfully redirects" , async ( ) => {
93- render ( < Router > < App /> </ Router > ) ;
94- const nameInput = document . querySelector ( "#username" ) ;
95- const passwordInput = document . querySelector ( "#password" ) ;
96-
97- userEvent . clear ( nameInput ) ;
98- userEvent . type ( nameInput , cred . username ) ;
99- let wait = await screen . findAllByRole ( "button" ) ;
100-
101- userEvent . clear ( passwordInput ) ;
102- userEvent . type ( passwordInput , cred . password ) ;
103- wait = await screen . findAllByRole ( "button" ) ;
104-
105- const button = document . querySelector ( "#submit" ) ;
106- userEvent . click ( button ) ;
107- wait = await screen . findAllByRole ( "button" ) ;
108- wait = await screen . findAllByRole ( "button" ) ;
109-
110- await waitFor ( ( ) => {
111- const title = screen . getByText ( 'View Articles' ) ;
112- expect ( title ) . toBeInTheDocument ( ) ;
113- } ) ;
114- } ) ;
115- } )
116-
117- describe ( "View Page" , ( ) => {
118- test ( "Loads all articles on initial rendering" , async ( ) => {
119- localStorage . setItem ( "token" , "ahuBHejkJJiMDhmODZhZi0zaeLTQ4ZfeaseOGZgesai1jZWYgrTA07i73Gebhu98" )
120- render ( < Router > < View /> </ Router > ) ;
121- const articles = await screen . findAllByTestId ( "article" ) ;
122- expect ( articles ) . toHaveLength ( 4 ) ;
123- } ) ;
124-
125- test ( "Successfully deletes an article" , async ( ) => {
126- localStorage . setItem ( "token" , "ahuBHejkJJiMDhmODZhZi0zaeLTQ4ZfeaseOGZgesai1jZWYgrTA07i73Gebhu98" )
127-
128- render ( < Router > < View /> </ Router > ) ;
129- const deleteButtons = await screen . findAllByTestId ( 'deleteButton' ) ;
130- userEvent . click ( deleteButtons [ 0 ] ) ;
131-
132- await waitFor ( async ( ) => {
133- const articles = await screen . findAllByTestId ( "article" ) ;
134- expect ( articles ) . toHaveLength ( 3 ) ;
135- } ) ;
136- } ) ;
137-
138- test ( "Successfully edits an article" , async ( ) => {
139- localStorage . setItem ( "token" , "ahuBHejkJJiMDhmODZhZi0zaeLTQ4ZfeaseOGZgesai1jZWYgrTA07i73Gebhu98" )
140- render ( < Router > < View /> </ Router > ) ;
141- const editButtons = await screen . findAllByTestId ( 'editButton' ) ;
142- userEvent . click ( editButtons [ 0 ] ) ;
143- let wait = await screen . findAllByRole ( "button" ) ;
144- wait = await screen . findAllByRole ( "button" ) ;
145-
146- const headline = document . querySelector ( '#headline' ) ;
147- userEvent . type ( headline , '{selectall}{del}' ) ;
148- wait = await screen . findAllByRole ( "button" ) ;
149- userEvent . type ( headline , 'Test' ) ;
150- wait = await screen . findAllByRole ( "button" ) ;
151-
152- const editButton = document . querySelector ( '#editButton' ) ;
153- userEvent . click ( editButton ) ;
154- wait = await screen . findAllByRole ( "button" ) ;
155-
156- await waitFor ( async ( ) => {
157- const articles = await screen . findAllByTestId ( "article" ) ;
158- const newHeadline = within ( articles [ 0 ] ) . queryByTestId ( "headline" ) ;
159- expect ( newHeadline )
160- } ) ;
161- } ) ;
162- } ) ;
0 commit comments