view.test.js

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { act } from "react-dom/test-utils";
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import _ from 'lodash';

import {ProjectView} from './view';
import ProjectService from '../../services/project.service';

import ProjectServiceMock from '../../__mocks__/project.service.data';
import AuthService from '../../services/auth.service';
import AuthServiceMock from '../../__mocks__/auth.service.data';
import ScheduleService from '../../services/schedule.service';
import SUServiceMock from '../../__mocks__/scheduleunit.service.data';


let projectDetailsSpy, resourcesSpy, projectQuotaSpy,projectPermissionSpy,suListSpy,suFiltersSpy, stationSpy, clusterSpy, fileSystemSpy, projectStateSpy;

beforeEach(() => {
  setMockSpy();
});

afterEach(() => {
  // cleanup on exiting
  clearMockSpy();
  cleanup();
});

/**
 * To set mock spy for Services that have API calls to the back end to fetch data
 */
const setMockSpy = (() => {
    projectDetailsSpy = jest.spyOn(ProjectService, 'getProjectDetails');
    projectDetailsSpy.mockImplementation((id) => { 
        return Promise.resolve(_.find(ProjectServiceMock.project, {name: id}))});
    resourcesSpy = jest.spyOn(ProjectService, 'getResources');
    resourcesSpy.mockImplementation(() => {
        return Promise.resolve(ProjectServiceMock.resources);
    });
    projectQuotaSpy = jest.spyOn(ProjectService, 'getProjectQuota');
    projectQuotaSpy.mockImplementation((id) => {
        return Promise.resolve(_.find(ProjectServiceMock.projectQuota, {id: id}));
    });
    projectPermissionSpy = jest.spyOn(AuthService, 'getAccessControlMethod');
    projectPermissionSpy.mockImplementation((module, id) => {
        return Promise.resolve(AuthServiceMock.projectId)
    })
    suListSpy = jest.spyOn(ScheduleService, 'getSchedulingUnitsExpandWithFilter');
    suListSpy.mockImplementation((params, expand, filterQry, orderBy, limit, offset, fields) =>{
        let response = {
            data: {}
        };
        response.data.count = 2;
        response.data.results = _.filter(SUServiceMock.getSUList(), {id: 2})

        return Promise.resolve(response)
    })
    suFiltersSpy = jest.spyOn(ScheduleService, 'getSchedulingUnitFilterDefinition');
    suFiltersSpy.mockImplementation((type)=> {
        let response = {};
        response.data = SUServiceMock.suFilters
        return Promise.resolve(response)
    })
    stationSpy = jest.spyOn(ScheduleService, 'getStations');
    stationSpy.mockImplementation((group)=> {
        return Promise.resolve(_.find(SUServiceMock.stations, {group: group}));
    })
    clusterSpy = jest.spyOn(ProjectService, 'getCluster');
    clusterSpy.mockImplementation(() =>{
        return Promise.resolve(ProjectServiceMock.cluster)
    })
    fileSystemSpy = jest.spyOn(ProjectService, 'getFileSystem');
    fileSystemSpy.mockImplementation(() => {
        return Promise.resolve(ProjectServiceMock.fileSystem)
    })
    projectStateSpy = jest.spyOn(ProjectService, 'getProjectStates');
    projectStateSpy.mockImplementation(()=> {
        return Promise.resolve(ProjectServiceMock.projectState)
    })

});

const clearMockSpy = (() => {
    projectDetailsSpy.mockRestore();
    resourcesSpy.mockRestore();
    projectQuotaSpy.mockRestore();
    projectPermissionSpy.mockRestore();
    suFiltersSpy.mockRestore();
    suListSpy.mockRestore();
    stationSpy.mockRestore();
    clusterSpy.mockRestore();
    fileSystemSpy.mockRestore();
    projectStateSpy.mockRestore();
});

it("renders Project details if found", async () => {
    console.log("renders Project details if found..........");
    let content;
    await act(async () => {
        content = render(<Router><ProjectView match={{params:{id: "OSR-11"}}} location={{}} /></Router>);
    });
    expect(content.queryByText("Project - Details")).not.toBe(null);
    expect(content.queryAllByText("OSR-11").length).toBe(1);
    expect(content.queryByText("1000")).not.toBe(null);
    expect(content.queryByText("Resource Allocations")).not.toBe(null);
    expect(content.queryByTestId("CEP Processing Time").innerHTML.includes('1 Hours')).toBeTruthy();
    expect(content.queryByTestId("LOFAR Observing Time").innerHTML.includes('1 Hours')).toBeTruthy();
    expect(content.queryByTestId("LOFAR Observing Time prio A").innerHTML.includes('1 Hours')).toBeTruthy();
    expect(content.queryByTestId("LOFAR Observing Time prio B").innerHTML.includes('1 Hours')).toBeTruthy();
    expect(content.queryByTestId("LOFAR Support Time").innerHTML.includes('1 Hours')).toBeTruthy();
    expect(content.queryByTestId("LTA Storage").innerHTML.includes('1 TB')).toBeTruthy();
    expect(content.queryByTestId("Number of triggers").innerHTML.includes('1 Numbers')).toBeTruthy();
    // Ensure that all project actions are available and enabled
    expect(content.getByTitle("Update Project Status")).toBeInTheDocument();
    expect(content.getByTitle("Click to Edit Project")).toBeInTheDocument();
    expect(content.getByTitle("Click to Close Project View")).toBeInTheDocument();
    // Ensure that SU table is loaded and no rows displayed except header
    expect(content.queryByTestId('viewtable')).toBeInTheDocument();
    expect(content.queryAllByRole('row').length).toBe(1);
    // Ensure SU actions are not permitted. Once permission mock is added correctly, this should be updated
    expect(content.getByTitle("Don't have permission to add new Scheduling Unit")).toBeInTheDocument();
    expect(content.getByTitle("Don't have permission to add/view Scheduling Set")).toBeInTheDocument();
    
});

it("renders nothing if no project details found", async () => {
    console.log("renders nothing if no project details found..........");
    let content;
    await act(async () => {
        content = render(<Router><ProjectView match={{params:{id: "OSR-12"}}} location={{}} /></Router>);
    });

    expect(content.queryByText("Project - Details")).toBe(null);
});