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

B&G UI components

import React from 'react';
import {shallow, mount, render, configure} from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

import ComponentUtil from '../util/ComponentUtil';
import Project from '../model/Project';
import ProjectQueriesTable from '../components/workspace/projects/query/ProjectQueriesTable';
import SortTable from '../components/workspace/SortTable';

configure({adapter: new Adapter()});

/*
GENERAL HOW TO (ENZYME):
	https://torquemag.io/2018/11/testing-react-components-with-enzyme/


ABOUT RSPEC VS XUNIT TESTING:
	https://stackoverflow.com/questions/45778192/what-is-the-difference-between-it-and-test-in-jest
		https://en.wikipedia.org/wiki/RSpec
		https://en.wikipedia.org/wiki/XUnit

MOCKING ETC:
	https://stackoverflow.com/questions/45758366/how-to-change-jest-mock-function-return-value-in-each-test
	https://stackoverflow.com/questions/41830165/how-to-mock-react-component-methods-with-jest-and-enzyme
	asapdevelopers.com/mock-function-react-jest-enzyme/
*/

// ---------------------------------------------- TEST DATA -------------------------------------

const user = {
	attributes: {allowPersonalCollections: true},
	id: "clariah_test",
	name: "clariah_test"
};

const project = Project.construct({
	"id": "582ac344-3435-4d31-82ac-6a770708c142",
	"name": "testing-resource-viewer",
	"description": null,
	"user": "clariah_test",
	"created": "2019-11-20T14:26:48Z",
	"queries": [
		{
			"name": "jest testing",
			"query": {
				"id": "053785b4-4eb1-8ed3-d48b-1441dc2d40fb",
				"searchId": null,
				"term": "joker",
				"collectionId": "nisv-catalogue-aggr",
				"searchLayers": {
				  "nisv-catalogue-aggr": true
				},
				"nestedSearchLayers": [
					{
						"path": "layer__asr",
						"fields": [
							"layer__asr.words"
						]
					}
				],
				"dateRange": null,
				"fieldCategory": null,
				"selectedFacets": {},
				"desiredFacets": [
					{
						"field": "bg:publications.bg:publication.bg:broadcasters.bg:broadcaster",
						"title": "Broadcaster",
						"id": "broadcaster",
						"type": "string"
					}
				],
				"sort": {
				  "field": "_score",
				  "order": "desc"
				},
				"offset": 0,
				"size": 20,
				"exclude": [
					"layer__asr",
					"bga:season.bg:transcripts",
					"bg:transcripts",
					"bga:segment.bg:transcripts"
				],
				"searchRegex": {},
				"fragmentPath": null,
				"fragmentFields": null,
				"includeFragmentChildren": false,
				"includeMediaObjects": true,
				"innerHitsOffset": 0,
				"innerHitsSize": 5
			}
		}
	],
		"sessions": [],
		"updated": "2019-12-02T09:08:50Z"
	}
);

// First try out shallow testing with this component
const pqt = shallow(<ProjectQueriesTable user={user} project={project}/>);

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

describe("Component: ProjectQueriesTable", () => {
	it("test: basic render", () => {
		//expect(pqt).toMatchSnapshot(); //fails! TODO fix
		expect(pqt).toBeDefined();
		expect(pqt).toBeTruthy();
	});

	it('test: delete query', () => {
		//mock the deleteProjectQueries function, which calls the project API
		const deleteProjectQueries = jest.fn();
		deleteProjectQueries.mockImplementation(() => {
			pqt.instance().loadTableData();
		})
		pqt.instance().deleteProjectQueries = deleteProjectQueries;

		//mock the userConfirm function, so it always confirms to go ahead
		const userConfirm = jest.fn();
		userConfirm.mockReturnValueOnce(true); //the user always agrees for the test
		ComponentUtil.userConfirm = userConfirm;

		pqt.instance().deleteQueries([{
			query: {id : "053785b4-4eb1-8ed3-d48b-1441dc2d40fb"},
			name : "jest testing"
		}])
		expect(deleteProjectQueries).toHaveBeenCalled();
		expect(userConfirm).toHaveBeenCalled();
		expect(pqt.instance().state.queries.length).toBe(0);
	});
});