Skip to content

Commit

Permalink
Merge pull request OpenClassrooms-Student-Center#8 from aurelien-oc-m…
Browse files Browse the repository at this point in the history 
…entorship/main

Changing to more consistent tests and integration improvement
  • Loading branch information
@Diane-LB
Diane-LB authored Feb 2, 2022
2 parents e411d62 + 576b237 commit 03a7a6c
Show file tree
Hide file tree
Showing 10 changed files with 208 additions and 96 deletions.
67 changes: 47 additions & 20 deletions src/__mocks__/store.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
export default {
get: () => {
return Promise.resolve({
data: [{
"id": "47qAXb6fIm2zOKkLzMro",
"vat": "80",
"fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
"status": "pending",
"type": "Hôtel et logement",
"commentary": "séminaire billed",
"name": "encore",
"fileName": "preview-facture-free-201801-pdf-1.jpg",
"date": "2004-04-04",
"amount": 400,
"commentAdmin": "ok",
"email": "a@a",
"pct": 20
},
const mockedBills = {
list() {
return Promise.resolve([{
"id": "47qAXb6fIm2zOKkLzMro",
"vat": "80",
"fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
"status": "pending",
"type": "Hôtel et logement",
"commentary": "séminaire billed",
"name": "encore",
"fileName": "preview-facture-free-201801-pdf-1.jpg",
"date": "2004-04-04",
"amount": 400,
"commentAdmin": "ok",
"email": "a@a",
"pct": 20
},
{
"id": "BeKy5Mo4jkmdfPGYpTxZ",
"vat": "",
Expand Down Expand Up @@ -60,7 +59,35 @@ export default {
"commentary": "test2",
"type": "Restaurants et bars",
"fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=4df6ed2c-12c8-42a2-b013-346c1346f732"
}]
}])

},
create(bill) {
return Promise.resolve({fileUrl: 'https://localhost:3456/images/test.jpg', key: '1234'})
},
update(bill) {
return Promise.resolve({
"id": "47qAXb6fIm2zOKkLzMro",
"vat": "80",
"fileUrl": "https://firebasestorage.googleapis.com/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
"status": "pending",
"type": "Hôtel et logement",
"commentary": "séminaire billed",
"name": "encore",
"fileName": "preview-facture-free-201801-pdf-1.jpg",
"date": "2004-04-04",
"amount": 400,
"commentAdmin": "ok",
"email": "a@a",
"pct": 20
})
}
},
}

export default {
bills() {
return mockedBills
//return {}
},
}

26 changes: 20 additions & 6 deletions src/__tests__/Bills.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,34 @@
* @jest-environment jsdom
*/

import { screen } from "@testing-library/dom"
import {screen, waitFor} from "@testing-library/dom"
import BillsUI from "../views/BillsUI.js"
import { bills } from "../fixtures/bills.js"
import { ROUTES_PATH} from "../constants/routes.js";
import {localStorageMock} from "../__mocks__/localStorage.js";

import router from "../app/Router.js";

describe("Given I am connected as an employee", () => {
describe("When I am on Bills Page", () => {
test("Then bill icon in vertical layout should be highlighted", () => {
const html = BillsUI({ data: []})
document.body.innerHTML = html
test("Then bill icon in vertical layout should be highlighted", async () => {

Object.defineProperty(window, 'localStorage', { value: localStorageMock })
window.localStorage.setItem('user', JSON.stringify({
type: 'Employee'
}))
const root = document.createElement("div")
root.setAttribute("id", "root")
document.body.append(root)
router()
window.onNavigate(ROUTES_PATH.Bills)
await waitFor(() => screen.getByTestId('icon-window'))
const windowIcon = screen.getByTestId('icon-window')
//to-do write expect expression

})
test("Then bills should be ordered from earliest to latest", () => {
const html = BillsUI({ data: bills })
document.body.innerHTML = html
document.body.innerHTML = BillsUI({ data: bills })
const dates = screen.getAllByText(/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/i).map(a => a.innerHTML)
const antiChrono = (a, b) => ((a < b) ? 1 : -1)
const datesSorted = [...dates].sort(antiChrono)
Expand Down
164 changes: 117 additions & 47 deletions src/__tests__/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
* @jest-environment jsdom
*/

import { fireEvent, screen } from "@testing-library/dom"
import {fireEvent, screen, waitFor} from "@testing-library/dom"
import userEvent from '@testing-library/user-event'
import DashboardFormUI from "../views/DashboardFormUI.js"
import DashboardUI from "../views/DashboardUI.js"
import Dashboard, { filteredBills, cards } from "../containers/Dashboard.js"
import { ROUTES } from "../constants/routes"
import { ROUTES, ROUTES_PATH } from "../constants/routes"
import { localStorageMock } from "../__mocks__/localStorage.js"
import store from "../__mocks__/store"
import mockStore from "../__mocks__/store"
import { bills } from "../fixtures/bills"
import router from "../app/Router"

jest.mock("../app/store", () => mockStore)

describe('Given I am connected as an Admin', () => {
describe('When I am on Dashboard page, there are bills, and there is one pending', () => {
Expand All @@ -34,21 +36,19 @@ describe('Given I am connected as an Admin', () => {
})
describe('When I am on Dashboard page but it is loading', () => {
test('Then, Loading page should be rendered', () => {
const html = DashboardUI({ loading: true })
document.body.innerHTML = html
document.body.innerHTML = DashboardUI({ loading: true })
expect(screen.getAllByText('Loading...')).toBeTruthy()
})
})
describe('When I am on Dashboard page but back-end send an error message', () => {
test('Then, Error page should be rendered', () => {
const html = DashboardUI({ error: 'some error message' })
document.body.innerHTML = html
document.body.innerHTML = DashboardUI({ error: 'some error message' })
expect(screen.getAllByText('Erreur')).toBeTruthy()
})
})

describe('When I am on Dashboard page and I click on arrow', () => {
test('Then, tickets list should be unfolding, and cars should contain first and lastname', async () => {
test('Then, tickets list should be unfolding, and cards should appear', async () => {

const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
Expand All @@ -60,11 +60,9 @@ describe('Given I am connected as an Admin', () => {
}))

const dashboard = new Dashboard({
document, onNavigate, store: null, bills, localStorage: window.localStorage
document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
})
const html = DashboardUI({ data: bills })

document.body.innerHTML = html
document.body.innerHTML = DashboardUI({ data: { bills } })

const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
const handleShowTickets2 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 2))
Expand All @@ -77,49 +75,85 @@ describe('Given I am connected as an Admin', () => {
icon1.addEventListener('click', handleShowTickets1)
userEvent.click(icon1)
expect(handleShowTickets1).toHaveBeenCalled()
userEvent.click(icon1)

await waitFor(() => screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`) )
expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
icon2.addEventListener('click', handleShowTickets2)
userEvent.click(icon2)
expect(handleShowTickets2).toHaveBeenCalled()
await waitFor(() => screen.getByTestId(`open-billUIUZtnPQvnbFnB0ozvJh`) )
expect(screen.getByTestId(`open-billUIUZtnPQvnbFnB0ozvJh`)).toBeTruthy()

icon3.addEventListener('click', handleShowTickets3)
userEvent.click(icon3)
expect(handleShowTickets3).toHaveBeenCalled()

await waitFor(() => screen.getByTestId(`open-billBeKy5Mo4jkmdfPGYpTxZ`) )
expect(screen.getByTestId(`open-billBeKy5Mo4jkmdfPGYpTxZ`)).toBeTruthy()
})
})

describe('When I am on Dashboard page and I click on edit icon of a card', () => {
test('Then, right form should be filled', () => {
const html = cards(bills)
document.body.innerHTML = html
test('Then, right form should be filled', () => {

const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
}
const store = null

Object.defineProperty(window, 'localStorage', { value: localStorageMock })
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin'
}))

const dashboard = new Dashboard({
document, onNavigate, store, bills, localStorage: window.localStorage
document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
})
document.body.innerHTML = DashboardUI({ data: { bills } })
const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
const icon1 = screen.getByTestId('arrow-icon1')
icon1.addEventListener('click', handleShowTickets1)
userEvent.click(icon1)
expect(handleShowTickets1).toHaveBeenCalled()
expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
const iconEdit = screen.getByTestId('open-bill47qAXb6fIm2zOKkLzMro')
userEvent.click(iconEdit)
expect(screen.getByTestId(`dashboard-form`)).toBeTruthy()
})
})

describe('When I am on Dashboard page and I click 2 times on edit icon of a card', () => {
test('Then, big bill Icon should Appear', () => {

const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
}

const handleEditTicket = jest.fn((e) => dashboard.handleEditTicket(e, bills[0], bills))
Object.defineProperty(window, 'localStorage', { value: localStorageMock })
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin'
}))

const dashboard = new Dashboard({
document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
})
document.body.innerHTML = DashboardUI({ data: { bills } })

const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
const icon1 = screen.getByTestId('arrow-icon1')
icon1.addEventListener('click', handleShowTickets1)
userEvent.click(icon1)
expect(handleShowTickets1).toHaveBeenCalled()
expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
const iconEdit = screen.getByTestId('open-bill47qAXb6fIm2zOKkLzMro')
iconEdit.addEventListener('click', handleEditTicket)
userEvent.click(iconEdit)
expect(handleEditTicket).toHaveBeenCalled()
userEvent.click(iconEdit)
expect(handleEditTicket).toHaveBeenCalled()
const bigBilledIcon = screen.queryByTestId("big-billed-icon")
expect(bigBilledIcon).toBeTruthy()
})
})


describe('When I am on Dashboard and there are no bills', () => {
test('Then, no cards should be shown', () => {
const html = cards([])
document.body.innerHTML = html

document.body.innerHTML = cards([])
const iconEdit = screen.queryByTestId('open-bill47qAXb6fIm2zOKkLzMro')
expect(iconEdit).toBeNull()
})
Expand All @@ -133,8 +167,8 @@ describe('Given I am connected as Admin, and I am on Dashboard page, and I click
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin'
}))
const html = DashboardFormUI(bills[0])
document.body.innerHTML = html
document.body.innerHTML = DashboardFormUI(bills[0])

const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
}
Expand All @@ -158,8 +192,8 @@ describe('Given I am connected as Admin, and I am on Dashboard page, and I click
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin'
}))
const html = DashboardFormUI(bills[0])
document.body.innerHTML = html
document.body.innerHTML = DashboardFormUI(bills[0])

const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
}
Expand All @@ -185,8 +219,7 @@ describe('Given I am connected as Admin and I am on Dashboard page and I clicked
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin'
}))
const html = DashboardFormUI(bills[0])
document.body.innerHTML = html
document.body.innerHTML = DashboardFormUI(bills[0])
const onNavigate = (pathname) => {
document.body.innerHTML = ROUTES({ pathname })
}
Expand All @@ -211,29 +244,66 @@ describe('Given I am connected as Admin and I am on Dashboard page and I clicked
describe("Given I am a user connected as Admin", () => {
describe("When I navigate to Dashboard", () => {
test("fetches bills from mock API GET", async () => {
const getSpy = jest.spyOn(store, "get")
const bills = await store.get()
expect(getSpy).toHaveBeenCalledTimes(1)
expect(bills.data.length).toBe(4)
localStorage.setItem("user", JSON.stringify({ type: "Admin", email: "a@a" }));
const root = document.createElement("div")
root.setAttribute("id", "root")
document.body.append(root)
router()
window.onNavigate(ROUTES_PATH.Dashboard)
await waitFor(() => screen.getByText("Validations"))
const contentPending = await screen.getByText("En attente (1)")
expect(contentPending).toBeTruthy()
const contentRefused = await screen.getByText("Refusé (2)")
expect(contentRefused).toBeTruthy()
expect(screen.getByTestId("big-billed-icon")).toBeTruthy()
})
test("fetches bills from an API and fails with 404 message error", async () => {
store.get.mockImplementationOnce(() =>
Promise.reject(new Error("Erreur 404"))
describe("When an error occurs on API", () => {
beforeEach(() => {
jest.spyOn(mockStore, "bills")
Object.defineProperty(
window,
'localStorage',
{ value: localStorageMock }
)
const html = DashboardUI({ error: "Erreur 404" })
document.body.innerHTML = html
window.localStorage.setItem('user', JSON.stringify({
type: 'Admin',
email: "a@a"
}))
const root = document.createElement("div")
root.setAttribute("id", "root")
document.body.appendChild(root)
router()
})
test("fetches bills from an API and fails with 404 message error", async () => {

mockStore.bills.mockImplementationOnce(() => {
return {
list : () => {
return Promise.reject(new Error("Erreur 404"))
}
}})
window.onNavigate(ROUTES_PATH.Dashboard)
await new Promise(process.nextTick);
const message = await screen.getByText(/Erreur 404/)
expect(message).toBeTruthy()
})

test("fetches messages from an API and fails with 500 message error", async () => {
store.get.mockImplementationOnce(() =>
Promise.reject(new Error("Erreur 500"))
)
const html = DashboardUI({ error: "Erreur 500" })
document.body.innerHTML = html

mockStore.bills.mockImplementationOnce(() => {
return {
list : () => {
return Promise.reject(new Error("Erreur 500"))
}
}})

window.onNavigate(ROUTES_PATH.Dashboard)
await new Promise(process.nextTick);
const message = await screen.getByText(/Erreur 500/)
expect(message).toBeTruthy()
})
})

})
})

Loading

0 comments on commit 03a7a6c

Please sign in to comment.