From 94b73c85b0df8dc1df5d5ea1532c59703f24b974 Mon Sep 17 00:00:00 2001 From: Jan Konstant Date: Mon, 15 Nov 2021 16:47:02 +0100 Subject: [PATCH 01/34] replaced the More info button --- vis/js/components/ContextLine.js | 2 + vis/js/components/Heading.js | 48 +----------- vis/js/default-config.js | 20 ++--- vis/js/templates/ZoomedOutHeading.jsx | 73 ++++++++++++------- .../contextfeatures/MoreInfoLink.jsx | 38 ++++++++++ vis/stylesheets/modules/map/_header.scss | 6 ++ 6 files changed, 101 insertions(+), 86 deletions(-) create mode 100644 vis/js/templates/contextfeatures/MoreInfoLink.jsx diff --git a/vis/js/components/ContextLine.js b/vis/js/components/ContextLine.js index b6ae97b53..4c90a3858 100644 --- a/vis/js/components/ContextLine.js +++ b/vis/js/components/ContextLine.js @@ -18,6 +18,7 @@ import Timestamp from "../templates/contextfeatures/Timestamp"; import MetadataQuality from "../templates/contextfeatures/MetadataQuality"; import Modifier from "../templates/contextfeatures/Modifier"; import { trackMatomoEvent } from "../utils/useMatomo"; +import MoreInfoLink from "../templates/contextfeatures/MoreInfoLink"; const defined = (param) => param !== undefined && param !== null; @@ -87,6 +88,7 @@ class ContextLine extends React.Component { {defined(params.searchLanguage) && ( {params.searchLanguage} )} + ); } diff --git a/vis/js/components/Heading.js b/vis/js/components/Heading.js index 585086b9d..d1b723064 100644 --- a/vis/js/components/Heading.js +++ b/vis/js/components/Heading.js @@ -4,8 +4,6 @@ import { connect } from "react-redux"; import ZoomedInHeadingTemplate from "../templates/ZoomedInHeading"; import ZoomedOutHeadingTemplate from "../templates/ZoomedOutHeading"; -import { changeFile, openInfoModal } from "../actions/index"; - import { BasicTitle, ProjectTitle, @@ -21,10 +19,7 @@ const Heading = ({ query, bubbleTitle, headingParams, - files, - onFileChange, streamgraph, - onInfoModalOpen, }) => { if (zoomed) { let label = streamgraph ? localization.area_streamgraph : localization.area; @@ -33,16 +28,7 @@ const Heading = ({ } return ( - + {renderTitle(localization, query, headingParams)} ); @@ -54,16 +40,10 @@ const mapStateToProps = (state) => ({ query: state.query.text, bubbleTitle: state.selectedBubble ? state.selectedBubble.title : null, headingParams: state.heading, - files: state.files, streamgraph: state.chartType === STREAMGRAPH_MODE, }); -const mapDispatchToProps = (dispatch) => ({ - onFileChange: (fileIndex) => dispatch(changeFile(fileIndex)), - onInfoModalOpen: () => dispatch(openInfoModal()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Heading); +export default connect(mapStateToProps)(Heading); // This should probably make its way to a more global config const MAX_LENGTH_VIPER = 47; @@ -198,27 +178,3 @@ const unescapeHTML = (string) => { } ); }; - -const renderAdditionalFeatures = ({ showDropdown }, files, onFileChange) => { - if (showDropdown && files.list.length > 0) { - const handleChange = (e) => { - onFileChange(parseInt(e.target.value)); - }; - - return ( - <> - {" "} - Select dataset:{" "} - - - ); - } - - return null; -}; diff --git a/vis/js/default-config.js b/vis/js/default-config.js index 81423a107..39ad8568e 100644 --- a/vis/js/default-config.js +++ b/vis/js/default-config.js @@ -223,8 +223,7 @@ var config = { search_placeholder: "Search within map...", show_list: "Show list", hide_list: "Hide list", - intro_label: "", - intro_icon: "", + intro_label: "More information", readers: "readers", year: "date", authors: "authors", @@ -293,8 +292,7 @@ var config = { search_placeholder: "Suche in der Liste...", show_list: "Liste ausklappen", hide_list: "Liste einklappen", - intro_label: "", - intro_icon: "", + intro_label: "Mehr Informationen", readers: "Leser", year: "Jahr", authors: "Autor", @@ -362,8 +360,7 @@ var config = { search_placeholder: "Suche in der Liste...", show_list: "Liste ausklappen", hide_list: "Liste einklappen", - intro_label: "", - intro_icon: "", + intro_label: "Mehr Informationen", readers: "Leser", year: "Jahr", authors: "Autor", @@ -434,8 +431,7 @@ var config = { search_placeholder: "Search within map...", show_list: "Show list", hide_list: "Hide list", - intro_label: "", - intro_icon: "", + intro_label: "More information", readers: "views", year: "date", authors: "authors", @@ -496,8 +492,7 @@ var config = { search_placeholder: "Search within map...", show_list: "Show list", hide_list: "Hide list", - intro_label: "", - intro_icon: "", + intro_label: "More information", relevance: "relevance", readers: "citations", year: "year", @@ -579,7 +574,6 @@ var config = { show_list: "Show list", hide_list: "Hide list", intro_label: "more info", - intro_icon: "", relevance: "relevance", readers: "readers", tweets: "tweets", @@ -667,7 +661,6 @@ var config = { show_list: "Liste ausklappen", hide_list: "Liste einklappen", intro_label: "mehr Informationen", - intro_icon: "", intro_label_areas: "Verteilung der Respondenten", intro_areas_title: "Verteilung der Respondenten für ", readers: "Nennungen", @@ -730,7 +723,6 @@ var config = { show_list: "Liste ausklappen", hide_list: "Liste einklappen", intro_label: "mehr Informationen", - intro_icon: "", intro_label_areas: "Verteilung der Respondenten", intro_areas_title: "Verteilung der Respondenten für ", readers: "Anzahl Fragen", @@ -793,7 +785,6 @@ var config = { show_list: "Show list", hide_list: "Hide list", intro_label: "more information", - intro_icon: "", intro_label_areas: "Distribution of respondents", intro_areas_title: "Distribution of respondents for ", readers: "no. questions", @@ -860,7 +851,6 @@ var config = { show_list: "Show list", hide_list: "Hide list", intro_label: "[more info]", - intro_icon: "", relevance: "relevance", readers: "citations", year: "date", diff --git a/vis/js/templates/ZoomedOutHeading.jsx b/vis/js/templates/ZoomedOutHeading.jsx index c39c0523b..74de4ac52 100644 --- a/vis/js/templates/ZoomedOutHeading.jsx +++ b/vis/js/templates/ZoomedOutHeading.jsx @@ -1,44 +1,67 @@ import React from "react"; -import useMatomo from "../utils/useMatomo"; +import { connect } from "react-redux"; + +import { changeFile, openInfoModal } from "../actions"; const ZoomedOutHeading = ({ - introIcon, - introLabel, children: title, - additionalFeatures, + infoButton, + filesDropdown, onInfoClick, + onFileChange, }) => { - const { trackEvent } = useMatomo(); - - const handleInfoClick = (event) => { - event.preventDefault(); - - trackEvent("Title & Context line", "Open more info modal", "More info button"); - - if (onInfoClick) { - onInfoClick(); - } - }; - return ( // html template starts here

{title}

- {!!onInfoClick && ( - )} - {additionalFeatures} + {filesDropdown.show && ( + <> + {" "} + Select dataset:{" "} + + + )}

// html template ends here ); }; -export default ZoomedOutHeading; +const mapStateToProps = (state) => ({ + infoButton: { + show: !state.contextLine.show, + }, + filesDropdown: { + show: state.heading.showDropdown, + files: state.files, + }, +}); + +const mapDispatchToProps = (dispatch) => ({ + onInfoClick: () => dispatch(openInfoModal()), + onFileChange: (fileIndex) => dispatch(changeFile(fileIndex)), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(ZoomedOutHeading); diff --git a/vis/js/templates/contextfeatures/MoreInfoLink.jsx b/vis/js/templates/contextfeatures/MoreInfoLink.jsx new file mode 100644 index 000000000..ec57661bd --- /dev/null +++ b/vis/js/templates/contextfeatures/MoreInfoLink.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import { connect } from "react-redux"; + +import useMatomo from "../../utils/useMatomo"; +import { useLocalizationContext } from "../../components/LocalizationProvider"; +import { openInfoModal } from "../../actions"; + +const MoreInfoLink = ({ onClick }) => { + const loc = useLocalizationContext(); + const { trackEvent } = useMatomo(); + + const handleClick = () => { + onClick(); + + trackEvent( + "Title & Context line", + "Open more info modal", + "More info button" + ); + }; + + return ( + // html template starts here + + + + + // html template ends here + ); +}; + +const mapDispatchToProps = (dispatch) => ({ + onClick: () => dispatch(openInfoModal()), +}); + +export default connect(null, mapDispatchToProps)(MoreInfoLink); diff --git a/vis/stylesheets/modules/map/_header.scss b/vis/stylesheets/modules/map/_header.scss index 7c8e25a77..319283fa1 100644 --- a/vis/stylesheets/modules/map/_header.scss +++ b/vis/stylesheets/modules/map/_header.scss @@ -59,6 +59,12 @@ #context { font-size: 11px; color: $black; + button { + background: none!important; + border: none; + padding: 0!important; + cursor: pointer!important; + } .context_moreinfo { border-bottom: 1px solid $medium-blue; cursor: help; From 1313fc779f0cc8daeb619316dfd5df91157524dd Mon Sep 17 00:00:00 2001 From: Jan Konstant Date: Mon, 15 Nov 2021 16:51:16 +0100 Subject: [PATCH 02/34] searchbox: map -> visualization --- vis/js/default-config.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/vis/js/default-config.js b/vis/js/default-config.js index 39ad8568e..2c136ad0d 100644 --- a/vis/js/default-config.js +++ b/vis/js/default-config.js @@ -220,7 +220,7 @@ var config = { localization: { eng: { loading: "Loading...", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "More information", @@ -428,7 +428,7 @@ var config = { }, eng_plos: { loading: "Loading...", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "More information", @@ -489,7 +489,7 @@ var config = { }, eng_pubmed: { loading: "Loading knowledge map.", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "More information", @@ -570,7 +570,7 @@ var config = { }, eng_openaire: { loading: "Loading...", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "more info", @@ -781,7 +781,7 @@ var config = { }, eng_cris_2: { loading: "Loading...", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "more information", @@ -847,7 +847,7 @@ var config = { }, eng_gsheets: { loading: "Updating and retrieving map. This may take a few seconds, please hold on.", - search_placeholder: "Search within map...", + search_placeholder: "Search within visualization...", show_list: "Show list", hide_list: "Hide list", intro_label: "[more info]", From 4d00dd7db9e9b6334473962bfc5b71f52f72ff7c Mon Sep 17 00:00:00 2001 From: Jan Konstant Date: Tue, 16 Nov 2021 11:34:44 +0100 Subject: [PATCH 03/34] fixed failing tests --- vis/test/component/contextline.test.js | 74 +- vis/test/component/heading.test.js | 985 ++++++++++-------- vis/test/component/knowledgemap-base.test.js | 2 +- vis/test/component/knowledgemap.test.js | 1 + vis/test/component/list-base.test.js | 4 +- vis/test/component/list.test.js | 22 +- .../__snapshots__/contextline.test.js.snap | 97 +- .../__snapshots__/list-base.test.js.snap | 31 + vis/test/store/selectedPaper.test.js | 1 + vis/test/store/zoom.test.js | 1 + 10 files changed, 729 insertions(+), 489 deletions(-) diff --git a/vis/test/component/contextline.test.js b/vis/test/component/contextline.test.js index f4c4804c3..3db0767fa 100644 --- a/vis/test/component/contextline.test.js +++ b/vis/test/component/contextline.test.js @@ -9,6 +9,7 @@ import { Provider } from "react-redux"; import ContextLine from "../../js/components/ContextLine"; import LocalizationProvider from "../../js/components/LocalizationProvider"; import { STREAMGRAPH_MODE } from "../../js/reducers/chartType"; +import { openInfoModal } from "../../js/actions"; const mockStore = configureStore([]); const setup = (overrideStoreObject = {}) => { @@ -528,13 +529,11 @@ describe("Context line component", () => { act(() => { render( - - - - - - - , + + + + + , container ); }); @@ -553,13 +552,11 @@ describe("Context line component", () => { act(() => { render( - - - - - - - , + + + + + , container ); }); @@ -877,7 +874,9 @@ describe("Context line component", () => { act(() => { render( - + + + , container ); @@ -1005,7 +1004,9 @@ describe("Context line component", () => { act(() => { render( - + + + , container ); @@ -1035,7 +1036,9 @@ describe("Context line component", () => { act(() => { render( - + + + , container ); @@ -1065,7 +1068,9 @@ describe("Context line component", () => { act(() => { render( - + + + , container ); @@ -1095,7 +1100,9 @@ describe("Context line component", () => { act(() => { render( - + + + , container ); @@ -1113,6 +1120,35 @@ describe("Context line component", () => { storeObject.localization[`${QUALITY}_metadata_quality_desc_${SERVICE}`] ); }); + + it("triggers a correct redux action when info icon is clicked", () => { + const SERVICE = "pubmed"; + const storeObject = setup({ service: SERVICE }); + + const store = mockStore(storeObject); + + act(() => { + render( + + + + + , + container + ); + }); + + const select = document.querySelector("#more-info-link button"); + act(() => { + const event = new Event("click", { bubbles: true }); + select.dispatchEvent(event); + }); + + const actions = store.getActions(); + const expectedPayload = openInfoModal() + + expect(actions).toEqual([expectedPayload]); + }); }); }); diff --git a/vis/test/component/heading.test.js b/vis/test/component/heading.test.js index 5ead0a03c..e7e3821bf 100644 --- a/vis/test/component/heading.test.js +++ b/vis/test/component/heading.test.js @@ -1,6 +1,7 @@ import React from "react"; import { render, unmountComponentAtNode } from "react-dom"; import { act } from "react-dom/test-utils"; +import { Provider } from "react-redux"; import configureStore from "redux-mock-store"; @@ -15,6 +16,9 @@ const setup = (overrideStore = {}) => { { zoom: false, query: { text: "", parsedTerms: [] }, // context.query + contextLine: { + show: true, + }, heading: { title: "Sample title", // context.params.title acronym: "Sample acronym", // context.params.acronym @@ -66,7 +70,12 @@ describe("Heading component", () => { it("renders", () => { const { store } = setup({ zoom: true }); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.childNodes.length).toBe(1); @@ -87,7 +96,12 @@ describe("Heading component", () => { const store = mockStore(storeObject); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.querySelector("#area-bold").textContent).toContain( @@ -100,7 +114,12 @@ describe("Heading component", () => { const { store } = setup({ zoom: true, selectedBubble: { title: TITLE } }); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.querySelector("#area-not-bold").textContent).toEqual( @@ -117,7 +136,12 @@ describe("Heading component", () => { }); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.querySelector("#area-not-bold").textContent).toEqual( @@ -136,7 +160,12 @@ describe("Heading component", () => { const store = mockStore(storeObject); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.querySelector("h4").textContent).toContain(TITLE); @@ -149,571 +178,643 @@ describe("Heading component", () => { const store = mockStore(storeObject); act(() => { - render(, container); + render( + + + , + container + ); }); expect(container.querySelector("h4").textContent).toContain(TITLE); }); - // TODO test not needed with proper localization - it("renders with an infolink label", () => { - const LABEL = "Special test label"; - const { storeObject } = setup(); - storeObject.heading.presetTitle = "Some title..."; - storeObject.localization.intro_label = LABEL; - const store = mockStore(storeObject); - - act(() => { - render(, container); - }); + describe("viper", () => { + const setupViper = () => { + const { storeObject } = setup(); + storeObject.heading.titleStyle = "viper"; - expect(container.querySelector("#infolink").textContent).toContain( - LABEL - ); - }); + const store = mockStore(storeObject); - // TODO test not needed with proper localization - it("renders with an infolink icon", () => { - const ICON = "ABC"; - const { storeObject } = setup(); - storeObject.heading.presetTitle = "Some title..."; - storeObject.localization.intro_icon = ICON; - const store = mockStore(storeObject); + return { store, storeObject }; + }; - act(() => { - render(, container); + it("renders with correct title", () => { + const TITLE = "Special Test Title"; + + const { storeObject } = setupViper(); + storeObject.heading.title = TITLE; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("span.truncated-project-title").textContent + ).toContain(TITLE); }); - expect(container.querySelector("#whatsthis").textContent).toContain( - ICON - ); - }); - }); - - describe("viper", () => { - const setupViper = () => { - const { storeObject } = setup(); - storeObject.heading.titleStyle = "viper"; - - const store = mockStore(storeObject); - - return { store, storeObject }; - }; - - it("renders with correct title", () => { - const TITLE = "Special Test Title"; - - const { storeObject } = setupViper(); - storeObject.heading.title = TITLE; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders with correct title attribute", () => { + const TITLE = "Special Test Title"; + + const { storeObject } = setupViper(); + storeObject.heading.title = TITLE; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container + .querySelector("span.truncated-project-title") + .getAttribute("title") + ).toContain(TITLE); }); - expect( - container.querySelector("span.truncated-project-title").textContent - ).toContain(TITLE); - }); - - it("renders with correct title attribute", () => { - const TITLE = "Special Test Title"; - - const { storeObject } = setupViper(); - storeObject.heading.title = TITLE; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders with correct acronym", () => { + const ACRONYM = "Special Test Acronym"; + + const { storeObject } = setupViper(); + storeObject.heading.acronym = ACRONYM; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("span.truncated-project-title").textContent + ).toContain(ACRONYM); }); - expect( - container - .querySelector("span.truncated-project-title") - .getAttribute("title") - ).toContain(TITLE); - }); - - it("renders with correct acronym", () => { - const ACRONYM = "Special Test Acronym"; - - const { storeObject } = setupViper(); - storeObject.heading.acronym = ACRONYM; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders without acronym", () => { + const TITLE = "Special Test Title"; + + const { storeObject } = setupViper(); + storeObject.heading.title = TITLE; + delete storeObject.heading.acronym; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("span.truncated-project-title").textContent + ).toEqual(TITLE); }); - expect( - container.querySelector("span.truncated-project-title").textContent - ).toContain(ACRONYM); - }); - - it("renders without acronym", () => { - const TITLE = "Special Test Title"; - - const { storeObject } = setupViper(); - storeObject.heading.title = TITLE; - delete storeObject.heading.acronym; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders with correct project id", () => { + const ID = 42069; + + const { storeObject } = setupViper(); + storeObject.heading.projectId = ID; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("span.project-id").textContent + ).toEqual(`(${ID})`); }); - expect( - container.querySelector("span.truncated-project-title").textContent - ).toEqual(TITLE); - }); - - it("renders with correct project id", () => { - const ID = 42069; - - const { storeObject } = setupViper(); - storeObject.heading.projectId = ID; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders with correct but long title", () => { + const TITLE = "Special Test Title".repeat(100); + + const { storeObject } = setupViper(); + storeObject.heading.title = TITLE; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("span.truncated-project-title").textContent + ).toContain("..."); }); - expect(container.querySelector("span.project-id").textContent).toEqual( - `(${ID})` - ); - }); - - it("renders with correct but long title", () => { - const TITLE = "Special Test Title".repeat(100); - - const { storeObject } = setupViper(); - storeObject.heading.title = TITLE; - const store = mockStore(storeObject); - - act(() => { - render(, container); + it("renders with correct but long title attribute", () => { + const TITLE = "Special Test Title".repeat(100); + + const { storeObject } = setupViper(); + storeObject.heading.title = TITLE; + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container + .querySelector("span.truncated-project-title") + .getAttribute("title") + ).toContain(TITLE); }); - - expect( - container.querySelector("span.truncated-project-title").textContent - ).toContain("..."); }); - it("renders with correct but long title attribute", () => { - const TITLE = "Special Test Title".repeat(100); + describe("linkedcat", () => { + const setupLinkedcat = (overrideStore) => { + const { storeObject } = setup(); + storeObject.heading.titleStyle = "linkedcat"; + storeObject.query.text = "Some query"; - const { storeObject } = setupViper(); - storeObject.heading.title = TITLE; - const store = mockStore(storeObject); + Object.assign(storeObject, overrideStore); - act(() => { - render(, container); - }); + const store = mockStore(storeObject); - expect( - container - .querySelector("span.truncated-project-title") - .getAttribute("title") - ).toContain(TITLE); - }); - }); - - describe("linkedcat", () => { - const setupLinkedcat = (overrideStore) => { - const { storeObject } = setup(); - storeObject.heading.titleStyle = "linkedcat"; - storeObject.query.text = "Some query"; - - Object.assign(storeObject, overrideStore); - - const store = mockStore(storeObject); + return { store, storeObject }; + }; - return { store, storeObject }; - }; + it("renders with correct streamgraph author label", () => { + const LABEL = "Special Streamgraph Author Test Label"; - it("renders with correct streamgraph author label", () => { - const LABEL = "Special Streamgraph Author Test Label"; + const { storeObject } = setupLinkedcat(); + storeObject.heading.titleLabelType = "authorview-streamgraph"; + storeObject.localization.streamgraph_authors_label = LABEL; - const { storeObject } = setupLinkedcat(); - storeObject.heading.titleLabelType = "authorview-streamgraph"; - storeObject.localization.streamgraph_authors_label = LABEL; + const store = mockStore(storeObject); - const store = mockStore(storeObject); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect(container.querySelector("h4").textContent).toContain(LABEL); }); - expect(container.querySelector("h4").textContent).toContain(LABEL); - }); + it("renders with correct knowledgemap author label", () => { + const LABEL = "Special Knowledgemap Author Test Label"; - it("renders with correct knowledgemap author label", () => { - const LABEL = "Special Knowledgemap Author Test Label"; + const { storeObject } = setupLinkedcat(); + storeObject.heading.titleLabelType = "authorview-knowledgemap"; + storeObject.localization.overview_authors_label = LABEL; - const { storeObject } = setupLinkedcat(); - storeObject.heading.titleLabelType = "authorview-knowledgemap"; - storeObject.localization.overview_authors_label = LABEL; + const store = mockStore(storeObject); - const store = mockStore(storeObject); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect(container.querySelector("h4").textContent).toContain(LABEL); }); - expect(container.querySelector("h4").textContent).toContain(LABEL); - }); + it("renders with correct streamgraph non-author label", () => { + const LABEL = "Special Streamgraph non-Author Test Label"; - it("renders with correct streamgraph non-author label", () => { - const LABEL = "Special Streamgraph non-Author Test Label"; + const { storeObject } = setupLinkedcat(); + storeObject.heading.titleLabelType = "keywordview-streamgraph"; + storeObject.localization.streamgraph_label = LABEL; - const { storeObject } = setupLinkedcat(); - storeObject.heading.titleLabelType = "keywordview-streamgraph"; - storeObject.localization.streamgraph_label = LABEL; + const store = mockStore(storeObject); - const store = mockStore(storeObject); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect(container.querySelector("h4").textContent).toContain(LABEL); }); - expect(container.querySelector("h4").textContent).toContain(LABEL); - }); + it("renders with correct knowledgemap non-author label", () => { + const LABEL = "Special Knowledgemap non-Author Test Label"; - it("renders with correct knowledgemap non-author label", () => { - const LABEL = "Special Knowledgemap non-Author Test Label"; + const { storeObject } = setupLinkedcat(); + storeObject.heading.titleLabelType = "keywordview-knowledgemap"; + storeObject.localization.overview_label = LABEL; - const { storeObject } = setupLinkedcat(); - storeObject.heading.titleLabelType = "keywordview-knowledgemap"; - storeObject.localization.overview_label = LABEL; + const store = mockStore(storeObject); - const store = mockStore(storeObject); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect(container.querySelector("h4").textContent).toContain(LABEL); }); - expect(container.querySelector("h4").textContent).toContain(LABEL); - }); + it("renders with correct query", () => { + const QUERY = "Special Test Query"; - it("renders with correct query", () => { - const QUERY = "Special Test Query"; + const { store } = setupLinkedcat({ query: { text: QUERY } }); - const { store } = setupLinkedcat({ query: { text: QUERY } }); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").textContent + ).toEqual(QUERY); }); - expect( - container.querySelector("#search-term-unique").textContent - ).toEqual(QUERY); - }); + it("renders with correct title attribute", () => { + const QUERY = "Special Test Query"; - it("renders with correct title attribute", () => { - const QUERY = "Special Test Query"; + const { store } = setupLinkedcat({ query: { text: QUERY } }); - const { store } = setupLinkedcat({ query: { text: QUERY } }); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").getAttribute("title") + ).toEqual(QUERY); }); - expect( - container.querySelector("#search-term-unique").getAttribute("title") - ).toEqual(QUERY); - }); + it("renders with correct but long title", () => { + const QUERY = "Special Test Query".repeat(100); - it("renders with correct but long title", () => { - const QUERY = "Special Test Query".repeat(100); + const { store } = setupLinkedcat({ query: { text: QUERY } }); - const { store } = setupLinkedcat({ query: { text: QUERY } }); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").textContent + ).toContain("..."); }); - expect( - container.querySelector("#search-term-unique").textContent - ).toContain("..."); - }); + it("renders with correct but long title attribute", () => { + const QUERY = "Special Test Query".repeat(100); - it("renders with correct but long title attribute", () => { - const QUERY = "Special Test Query".repeat(100); + const { store } = setupLinkedcat({ query: { text: QUERY } }); - const { store } = setupLinkedcat({ query: { text: QUERY } }); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").getAttribute("title") + ).toEqual(QUERY); }); - - expect( - container.querySelector("#search-term-unique").getAttribute("title") - ).toEqual(QUERY); }); - }); - describe("custom title", () => { - const setupCustom = (overrideStore) => { - const { storeObject } = setup(); - storeObject.heading.titleStyle = "custom"; - storeObject.heading.customTitle = "Some title"; - storeObject.localization.custom_title_explanation = "Some explanation"; - storeObject.query.text = "Some query"; - - Object.assign(storeObject, overrideStore); + describe("custom title", () => { + const setupCustom = (overrideStore) => { + const { storeObject } = setup(); + storeObject.heading.titleStyle = "custom"; + storeObject.heading.customTitle = "Some title"; + storeObject.localization.custom_title_explanation = + "Some explanation"; + storeObject.query.text = "Some query"; - const store = mockStore(storeObject); + Object.assign(storeObject, overrideStore); - return { store, storeObject }; - }; - - it("renders with correct title", () => { - const TITLE = "Special Test Title"; + const store = mockStore(storeObject); - const { storeObject } = setupCustom(); - storeObject.heading.customTitle = TITLE; + return { store, storeObject }; + }; - const store = mockStore(storeObject); + it("renders with correct title", () => { + const TITLE = "Special Test Title"; - act(() => { - render(, container); - }); + const { storeObject } = setupCustom(); + storeObject.heading.customTitle = TITLE; - expect( - container.querySelector("#search-term-unique").textContent - ).toEqual(TITLE); - }); + const store = mockStore(storeObject); - it("renders with correct but too long title", () => { - const TITLE = "Special Test Title"; + act(() => { + render( + + + , + container + ); + }); - const { storeObject } = setupCustom(); - storeObject.heading.customTitle = TITLE.repeat(100); - - const store = mockStore(storeObject); - - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").textContent + ).toEqual(TITLE); }); - expect( - container.querySelector("#search-term-unique").textContent - ).toContain(TITLE); + it("renders with correct but too long title", () => { + const TITLE = "Special Test Title"; - expect( - container.querySelector("#search-term-unique").textContent - ).toContain("..."); - }); + const { storeObject } = setupCustom(); + storeObject.heading.customTitle = TITLE.repeat(100); - it("renders with correct explanation", () => { - const EXPLANATION = "Special Test Explanation"; + const store = mockStore(storeObject); - const { storeObject } = setupCustom(); - storeObject.localization.custom_title_explanation = EXPLANATION; + act(() => { + render( + + + , + container + ); + }); - const store = mockStore(storeObject); + expect( + container.querySelector("#search-term-unique").textContent + ).toContain(TITLE); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").textContent + ).toContain("..."); }); - expect( - container.querySelector("#search-term-unique").getAttribute("title") - ).toContain(EXPLANATION); - }); - - it("renders with correct query", () => { - const QUERY = "Special Test Query".repeat(100); - - const { store } = setupCustom({ query: { text: QUERY } }); + it("renders with correct explanation", () => { + const EXPLANATION = "Special Test Explanation"; - act(() => { - render(, container); - }); + const { storeObject } = setupCustom(); + storeObject.localization.custom_title_explanation = EXPLANATION; - expect( - container.querySelector("#search-term-unique").getAttribute("title") - ).toContain(QUERY); - }); + const store = mockStore(storeObject); - // we might add other escaped characters to the test in future - it("renders with title that contains "", () => { - const TITLE = "Special "Test" Title"; - const ESCAPED_TITLE = 'Special "Test" Title'; + act(() => { + render( + + + , + container + ); + }); - const { storeObject } = setupCustom(); - storeObject.heading.customTitle = TITLE; - - const store = mockStore(storeObject); - - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").getAttribute("title") + ).toContain(EXPLANATION); }); - expect( - container.querySelector("#search-term-unique").textContent - ).toEqual(ESCAPED_TITLE); - }); - }); - - describe("standard title", () => { - const setupStandard = (overrideStore) => { - const { storeObject } = setup(overrideStore); - storeObject.heading.titleStyle = "standard"; + it("renders with correct query", () => { + const QUERY = "Special Test Query".repeat(100); - const store = mockStore(storeObject); + const { store } = setupCustom({ query: { text: QUERY } }); - return { store, storeObject }; - }; + act(() => { + render( + + + , + container + ); + }); - it("renders with query as the title", () => { - const QUERY = "Special Test Query".repeat(100); - - const { store } = setupStandard({ query: { text: QUERY } }); - - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").getAttribute("title") + ).toContain(QUERY); }); - expect( - container.querySelector("#search-term-unique").textContent - ).toEqual(QUERY); - }); + // we might add other escaped characters to the test in future + it("renders with title that contains "", () => { + const TITLE = "Special "Test" Title"; + const ESCAPED_TITLE = 'Special "Test" Title'; - it("renders with query as the title's title attribute", () => { - const QUERY = "Special Test Query".repeat(100); + const { storeObject } = setupCustom(); + storeObject.heading.customTitle = TITLE; - const { store } = setupStandard({ query: { text: QUERY } }); + const store = mockStore(storeObject); - act(() => { - render(, container); - }); + act(() => { + render( + + + , + container + ); + }); - expect( - container.querySelector("#search-term-unique").getAttribute("title") - ).toEqual(QUERY); + expect( + container.querySelector("#search-term-unique").textContent + ).toEqual(ESCAPED_TITLE); + }); }); - }); - describe("additional features", () => { - const setupFeatures = () => { - const { storeObject } = setup(); - storeObject.heading.titleStyle = "standard"; - storeObject.query.text = "Some query"; + describe("standard title", () => { + const setupStandard = (overrideStore) => { + const { storeObject } = setup(overrideStore); + storeObject.heading.titleStyle = "standard"; - const store = mockStore(storeObject); + const store = mockStore(storeObject); - return { store, storeObject }; - }; - - const FILES = [ - { - title: "edu1", - file: "./data/edu1.csv", - }, - { - title: "edu2", - file: "./data/edu2.csv", - }, - ]; - - it("renders with a dropdown", () => { - const { storeObject } = setupFeatures(); - storeObject.heading.showDropdown = true; - storeObject.files = { - current: 0, - list: FILES, + return { store, storeObject }; }; - const store = mockStore(storeObject); - - act(() => { - render(, container); - }); - - expect( - container.querySelector("#datasets").querySelectorAll("option").length - ).toBe(2); + it("renders with query as the title", () => { + const QUERY = "Special Test Query".repeat(100); - expect( - container.querySelector("#datasets").querySelectorAll("option")[0] - .textContent - ).toEqual("edu1"); + const { store } = setupStandard({ query: { text: QUERY } }); - expect( - container - .querySelector("#datasets") - .querySelectorAll("option")[0] - .getAttribute("value") - ).toEqual("0"); + act(() => { + render( + + + , + container + ); + }); - expect( - container.querySelector("#datasets").querySelectorAll("option")[1] - .textContent - ).toEqual("edu2"); + expect( + container.querySelector("#search-term-unique").textContent + ).toEqual(QUERY); + }); - expect( - container - .querySelector("#datasets") - .querySelectorAll("option")[1] - .getAttribute("value") - ).toEqual("1"); - }); + it("renders with query as the title's title attribute", () => { + const QUERY = "Special Test Query".repeat(100); - it("triggers a correct redux action when dropdown changes", () => { - const { storeObject } = setupFeatures(); - storeObject.heading.showDropdown = true; - storeObject.files = { - current: 0, - list: FILES, - }; + const { store } = setupStandard({ query: { text: QUERY } }); - const store = mockStore(storeObject); + act(() => { + render( + + + , + container + ); + }); - act(() => { - render(, container); + expect( + container.querySelector("#search-term-unique").getAttribute("title") + ).toEqual(QUERY); }); - - const select = document.querySelector("#datasets"); - act(() => { - const event = new Event("change", { bubbles: true }); - select.dispatchEvent(event); - }); - - const actions = store.getActions(); - const expectedPayload = changeFile(0); - - expect(actions).toEqual([expectedPayload]); }); - it("throws error on unknown label type", () => { - const { storeObject } = setup(); - const LABEL = "label-that-does-not-exist"; - - expect(() => getHeadingLabel(LABEL, storeObject.localization)).toThrow( - Error - ); - }); + describe("additional features", () => { + const setupFeatures = () => { + const { storeObject } = setup(); + storeObject.heading.titleStyle = "standard"; + storeObject.query.text = "Some query"; - it("triggers a correct redux action when info icon is clicked", () => { - const { storeObject } = setupFeatures(); + const store = mockStore(storeObject); - const store = mockStore(storeObject); + return { store, storeObject }; + }; - act(() => { - render(, container); + const FILES = [ + { + title: "edu1", + file: "./data/edu1.csv", + }, + { + title: "edu2", + file: "./data/edu2.csv", + }, + ]; + + it("renders with a dropdown", () => { + const { storeObject } = setupFeatures(); + storeObject.heading.showDropdown = true; + storeObject.files = { + current: 0, + list: FILES, + }; + + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + expect( + container.querySelector("#datasets").querySelectorAll("option") + .length + ).toBe(2); + + expect( + container.querySelector("#datasets").querySelectorAll("option")[0] + .textContent + ).toEqual("edu1"); + + expect( + container + .querySelector("#datasets") + .querySelectorAll("option")[0] + .getAttribute("value") + ).toEqual("0"); + + expect( + container.querySelector("#datasets").querySelectorAll("option")[1] + .textContent + ).toEqual("edu2"); + + expect( + container + .querySelector("#datasets") + .querySelectorAll("option")[1] + .getAttribute("value") + ).toEqual("1"); }); - const select = document.querySelector("#infolink"); - act(() => { - const event = new Event("click", { bubbles: true }); - select.dispatchEvent(event); + it("triggers a correct redux action when dropdown changes", () => { + const { storeObject } = setupFeatures(); + storeObject.heading.showDropdown = true; + storeObject.files = { + current: 0, + list: FILES, + }; + + const store = mockStore(storeObject); + + act(() => { + render( + + + , + container + ); + }); + + const select = document.querySelector("#datasets"); + act(() => { + const event = new Event("change", { bubbles: true }); + select.dispatchEvent(event); + }); + + const actions = store.getActions(); + const expectedPayload = changeFile(0); + + expect(actions).toEqual([expectedPayload]); }); - const actions = store.getActions(); - const expectedPayload = openInfoModal(); + it("throws error on unknown label type", () => { + const { storeObject } = setup(); + const LABEL = "label-that-does-not-exist"; - expect(actions).toEqual([expectedPayload]); + expect(() => + getHeadingLabel(LABEL, storeObject.localization) + ).toThrow(Error); + }); }); }); }); diff --git a/vis/test/component/knowledgemap-base.test.js b/vis/test/component/knowledgemap-base.test.js index eec25819f..dadbb5aa7 100644 --- a/vis/test/component/knowledgemap-base.test.js +++ b/vis/test/component/knowledgemap-base.test.js @@ -234,7 +234,7 @@ describe("Knowledge map component - special BASE tests", () => { const actions = store.getActions(); - const EXPECTED_PAYLOAD = [deselectPaper().type, zoomIn().type]; + const EXPECTED_PAYLOAD = [zoomIn().type]; expect(actions.map((a) => a.type)).toEqual(EXPECTED_PAYLOAD); }); diff --git a/vis/test/component/knowledgemap.test.js b/vis/test/component/knowledgemap.test.js index eceee8977..5e264707d 100644 --- a/vis/test/component/knowledgemap.test.js +++ b/vis/test/component/knowledgemap.test.js @@ -59,6 +59,7 @@ const setup = (overrideStoreObject = {}) => { isContentBased: false, baseUnit: undefined, }, + tracking: {}, localization: {}, }, overrideStoreObject diff --git a/vis/test/component/list-base.test.js b/vis/test/component/list-base.test.js index 4430f2b95..804080ba1 100644 --- a/vis/test/component/list-base.test.js +++ b/vis/test/component/list-base.test.js @@ -96,7 +96,7 @@ describe("List entries component - special BASE tests", () => { const actions = store.getActions(); - const EXPECTED_PAYLOAD = [selectPaper({}).type, zoomIn().type]; + const EXPECTED_PAYLOAD = [zoomIn().type]; expect(actions.map((a) => a.type)).toEqual(EXPECTED_PAYLOAD); }); @@ -122,7 +122,7 @@ describe("List entries component - special BASE tests", () => { const actions = store.getActions(); - const EXPECTED_PAYLOAD = [deselectPaper().type, zoomIn().type]; + const EXPECTED_PAYLOAD = [zoomIn().type]; expect(actions.map((a) => a.type)).toEqual(EXPECTED_PAYLOAD); }); diff --git a/vis/test/component/list.test.js b/vis/test/component/list.test.js index 8601d54b5..8311615a5 100644 --- a/vis/test/component/list.test.js +++ b/vis/test/component/list.test.js @@ -77,6 +77,7 @@ const setup = ( renderMap: true, renderList: true, }, + tracking: {}, selectedBubble: undefined, selectedPaper: undefined, chartType: KNOWLEDGEMAP_MODE, @@ -829,10 +830,7 @@ describe("List entries component", () => { describe("events", () => { it("triggers a correct title click action in local files", () => { - const EXPECTED_PAYLOAD = [ - selectPaper(initialTestData[0]).type, - zoomIn().type, - ]; + const EXPECTED_PAYLOAD = [zoomIn().type]; const storeObject = setup({ show: true }, { service: null }); const store = mockStore(storeObject); @@ -858,7 +856,7 @@ describe("List entries component", () => { }); it("triggers a correct area click action in local files", () => { - const EXPECTED_PAYLOAD = [deselectPaper().type, zoomIn().type]; + const EXPECTED_PAYLOAD = [zoomIn().type]; const storeObject = setup({ show: true }, { service: null }); const store = mockStore(storeObject); @@ -970,7 +968,7 @@ describe("List entries component", () => { }); it("triggers a correct area click action in linkedcat", () => { - const EXPECTED_PAYLOAD = [deselectPaper().type, zoomIn().type]; + const EXPECTED_PAYLOAD = [zoomIn().type]; const storeObject = setup( { list: [linkedcatData[0]] }, { show: true }, @@ -1208,9 +1206,15 @@ describe("List entries component", () => { ); }); - expect(container.querySelector("#paper_list_title").textContent).toEqual(storeObject.localization.default_paper_title); - expect(container.querySelector(".list_authors").textContent).toEqual(storeObject.localization.default_authors); - expect(container.querySelector("#list_abstract").textContent).toEqual(storeObject.localization.default_abstract); + expect(container.querySelector("#paper_list_title").textContent).toEqual( + storeObject.localization.default_paper_title + ); + expect(container.querySelector(".list_authors").textContent).toEqual( + storeObject.localization.default_authors + ); + expect(container.querySelector("#list_abstract").textContent).toEqual( + storeObject.localization.default_abstract + ); }); }); }); diff --git a/vis/test/snapshot/__snapshots__/contextline.test.js.snap b/vis/test/snapshot/__snapshots__/contextline.test.js.snap index dcabbdd8c..34f3c62b6 100644 --- a/vis/test/snapshot/__snapshots__/contextline.test.js.snap +++ b/vis/test/snapshot/__snapshots__/contextline.test.js.snap @@ -33,6 +33,15 @@ exports[`Context line component snapshot matches a covis snapshot 1`] = ` : 2020-08-12 02:40:04 UTC + +