labo-components/app/tests/QuickEntityViewer.test.jsx

B&G UI components

import React from 'react';
import NISVCatalogueConfig from '../collection/mappings/NISVCatalogueConfig';
import NISV_GTAA_WIKIDATA from '../collection/mappings/entities/NISV_GTAA_WIKIDATA';
import QuickEntityViewer from '../components/search/QuickEntityViewer';
import IDUtil from '../util/IDUtil';
import SearchAPI from "../api/SearchAPI";
import {shallow} from 'enzyme';
import {mount} from 'enzyme';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({adapter: new Adapter()});

//TODO the tests work, but should be much more thorough/strict. Also all input/ouput data should be nice dummy data
//TODO mock the NISV_GTAA_WIKIDATA.formatPersonDetails function as well!!

//NOTE/FIXME/TODO: since the DUMMY_DATA completely depends on how fetchEntityDetails returns data, testing should focus on
//	the proper OUTPUT of SearchAPI.grlc, which IS agnostic and is ultimately fed to the UI components

const DUMMY_ENTITY_ID = "http://data.beeldengeluid.nl/gtaa/100362";
const DUMMY_NAME = "DUMMY-NAME"
const DUMMY_LD_ENDPOINT = "BENG-PERSON-LD"
const DUMMY_DATA = { //part of real response, not fully turned into dummy values
	"status": "ok", "result": {
		"head": {"vars": ["s", "p", "o", "l"]},
		"results": {
			"bindings": [
				{
					"p": {"type": "uri", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"},
					"o": {"type": "uri", "value": "http://www.w3.org/2004/02/skos/core#Concept"}
				}, {
					"p": {"type": "uri", "value": "http://openskos.org/xmlns#set"},
					"o": {"type": "uri", "value": "http://data.beeldengeluid.nl/gtaa"}
				}, {
					"p": {"type": "uri", "value": "http://openskos.org/xmlns#status"},
					"o": {"type": "literal", "value": "approved"}
				}, {
					"p": {"type": "uri", "value": "http://www.w3.org/2004/02/skos/core#prefLabel"},
					"o": {"type": "literal", "value": "DUMMY-NAME"}
				}
			]
		}
	}
}

const DUMMY_GRLC_PARAMS = { //not used yet for testing
	"endpoint": DUMMY_LD_ENDPOINT,
	"parameters":[
		{"key":"gtaa","value": DUMMY_ENTITY_ID}
	]
}

const DUMMY_QUERY_PARAMS = {
	gtaa : DUMMY_ENTITY_ID
}


// ---------------------------------------------- TESTS -------------------------------------

describe("Component: QuickEntityViewer", () => {
	it("test: basic render", () => {
        let collectionConfig = new NISVCatalogueConfig();

        const grlc = jest.fn().mockImplementation(function (endpoint, queryName, queryParams, formatFunc, callback) {
            callback(NISV_GTAA_WIKIDATA.formatPersonDetails(DUMMY_DATA, DUMMY_QUERY_PARAMS));
		});
		SearchAPI.grlc = grlc.bind(SearchAPI);

        const quickEntityViewer = shallow(
			<QuickEntityViewer
			    entityID=""
			    entityType="person"
			    collectionConfig={collectionConfig}
			    termCategories={[]}
			/>
		);
		expect(quickEntityViewer).toBeDefined();
		expect(quickEntityViewer).toBeTruthy();
	});

	it("test: data is displayed", () => {
        let collectionConfig = new NISVCatalogueConfig();

        const grlc = jest.fn().mockImplementation(function (endpoint, queryName, queryParams, formatFunc, callback) {
            callback(NISV_GTAA_WIKIDATA.formatPersonDetails(DUMMY_DATA, DUMMY_QUERY_PARAMS));
            //return new XMLHttpRequest();
		});
		SearchAPI.grlc = grlc.bind(SearchAPI);

        const quickEntityViewer = mount(
			<QuickEntityViewer
			    entityID=""
			    entityType="person"
			    collectionConfig={collectionConfig}
			    termCategories={[]}
			/>
		);
		expect(quickEntityViewer.find('table').exists()).toBe(true);

		//disable below tests as we are not showing entity metadata anymore at present
		//expect(quickEntityViewer.find("."+ IDUtil.cssClassName('id', "qev")).exists()).toBe(true);
		//expect(quickEntityViewer.find("."+ IDUtil.cssClassName('quick-entity-viewer')).text()).toContain(DUMMY_ENTITY_ID);

		expect(quickEntityViewer.find('.actions').exists()).toBe(true);  // expect to find the search button div
		expect(quickEntityViewer.find("."+ IDUtil.cssClassName('quick-entity-viewer')).text()).toContain(DUMMY_NAME);
		expect(quickEntityViewer.find("."+ IDUtil.cssClassName('error', "qev")).exists()).toBe(false);

	});

	it("test: error if no data retrieved", () => {
        let collectionConfig = new NISVCatalogueConfig();

        const grlc = jest.fn().mockImplementation(function (endpoint, queryName, queryParams, formatFunc, callback) {
            callback({"error": "something went wrong"});
		});
		SearchAPI.grlc = grlc.bind(SearchAPI);

        const quickEntityViewer = mount(
			<QuickEntityViewer
			    entityID=""
			    entityType="person"
			    collectionConfig={collectionConfig}
			    termCategories={[]}
			/>
		);
		expect(quickEntityViewer.find('table').exists()).toBe(true);
		//disable below test as we are not showing entity metadata anymore at present
		//expect(quickEntityViewer.find("."+ IDUtil.cssClassName('id', "qev")).exists()).toBe(false);

		expect(quickEntityViewer.find('.actions').exists()).toBe(false);  // expect not to find the search button div
		expect(quickEntityViewer.find("."+ IDUtil.cssClassName('quick-entity-viewer')).text()).toContain("Loading");

	});

	//TODO catch the React warning message:
	//Failed prop type: The prop `collectionConfig` is marked as required in `QuickEntityViewer`, but its value is `null`
	//TODO really check for all the consequences of not supplying a collectionConfig
	it("test: error if no config", () => {
		let collectionConfig = new NISVCatalogueConfig();
        const grlc = jest.fn().mockImplementation(function (endpoint, queryName, queryParams, formatFunc, callback) {
	        callback(NISV_GTAA_WIKIDATA.formatPersonDetails(DUMMY_DATA, DUMMY_QUERY_PARAMS));
		});
		SearchAPI.grlc = grlc.bind(SearchAPI);

        const quickEntityViewer = mount(
			<QuickEntityViewer
			    entityID=""
			    entityType="person"
			    collectionConfig={null}
			    termCategories={[]}
			/>
		);
		//TODO make sure to check that SearchAPI.grlc is not called (because of the missing config)
		expect(quickEntityViewer.find('table').exists()).toBe(true);
		//disable below test as we are not showing entity metadata anymore at present
		//expect(quickEntityViewer.find("."+ IDUtil.cssClassName('id', "qev")).exists()).toBe(false);

		expect(quickEntityViewer.find('.actions').exists()).toBe(false);  // expect not to find the search button div
		expect(quickEntityViewer.find("."+ IDUtil.cssClassName('quick-entity-viewer')).text()).toContain("Loading");

	});
});