diff --git a/src/__tests__/Bills.js b/src/__tests__/Bills.js index 29ca2df68..e771f67e7 100644 --- a/src/__tests__/Bills.js +++ b/src/__tests__/Bills.js @@ -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) diff --git a/src/__tests__/Dashboard.js b/src/__tests__/Dashboard.js index ae971723d..22be98d66 100644 --- a/src/__tests__/Dashboard.js +++ b/src/__tests__/Dashboard.js @@ -36,15 +36,13 @@ 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() }) }) @@ -64,9 +62,7 @@ describe('Given I am connected as an Admin', () => { const dashboard = new Dashboard({ 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)) @@ -110,25 +106,54 @@ describe('Given I am connected as an Admin', () => { const dashboard = new Dashboard({ 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 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 }) + } + + 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') + userEvent.click(iconEdit) + userEvent.click(iconEdit) + 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() }) @@ -142,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 }) } @@ -167,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 }) } @@ -194,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 }) } diff --git a/src/containers/Bills.js b/src/containers/Bills.js index e2f8738df..80ce7c113 100644 --- a/src/containers/Bills.js +++ b/src/containers/Bills.js @@ -11,23 +11,22 @@ export default class { if (buttonNewBill) buttonNewBill.addEventListener('click', this.handleClickNewBill) const iconEye = document.querySelectorAll(`div[data-testid="icon-eye"]`) if (iconEye) iconEye.forEach(icon => { - icon.addEventListener('click', (e) => this.handleClickIconEye(icon)) + icon.addEventListener('click', () => this.handleClickIconEye(icon)) }) new Logout({ document, localStorage, onNavigate }) } - handleClickNewBill = e => { + handleClickNewBill = () => { this.onNavigate(ROUTES_PATH['NewBill']) } handleClickIconEye = (icon) => { const billUrl = icon.getAttribute("data-bill-url") const imgWidth = Math.floor($('#modaleFile').width() * 0.5) - $('#modaleFile').find(".modal-body").html(`
`) + $('#modaleFile').find(".modal-body").html(`
Bill
`) $('#modaleFile').modal('show') } - // not need to cover this function by tests getBills = () => { if (this.store) { return this.store @@ -58,4 +57,4 @@ export default class { }) } } -} \ No newline at end of file +} diff --git a/src/containers/Dashboard.js b/src/containers/Dashboard.js index 2d19b27ed..28ac3d616 100644 --- a/src/containers/Dashboard.js +++ b/src/containers/Dashboard.js @@ -13,7 +13,9 @@ export const filteredBills = (data, status) => { // in jest environment if (typeof jest !== 'undefined') { selectCondition = (bill.status === status) - } else { + } + /* istanbul ignore next */ + else { // in prod environment const userEmail = JSON.parse(localStorage.getItem("user")).email selectCondition = @@ -79,7 +81,7 @@ export default class { handleClickIconEye = () => { const billUrl = $('#icon-eye-d').attr("data-bill-url") const imgWidth = Math.floor($('#modaleFileAdmin1').width() * 0.8) - $('#modaleFileAdmin1').find(".modal-body").html(`
`) + $('#modaleFileAdmin1').find(".modal-body").html(`
Bill
`) if (typeof $('#modaleFileAdmin1').modal === 'function') $('#modaleFileAdmin1').modal('show') } @@ -98,7 +100,7 @@ export default class { $(`#open-bill${bill.id}`).css({ background: '#0D5AE5' }) $('.dashboard-right-container div').html(` -
${BigBilledIcon}
+
${BigBilledIcon}
`) $('.vertical-navbar').css({ height: '120vh' }) this.counter ++ @@ -151,7 +153,6 @@ export default class { } - // not need to cover this function by tests getBillsAllUsers = () => { if (this.store) { return this.store @@ -174,6 +175,7 @@ export default class { } // not need to cover this function by tests + /* istanbul ignore next */ updateBill = (bill) => { if (this.store) { return this.store