From 9a55031fc5dfbfc26cfab420741abf1932eb63f5 Mon Sep 17 00:00:00 2001 From: Joshua Greben Date: Fri, 24 May 2019 14:11:54 -0700 Subject: [PATCH 1/2] Make PropertyTitle component responsible for generating the right kind of property panel or outline title with required superscript; (remove un-used code from InputListyLOC) --- .../components/editor/OutlineHeader.test.js | 19 +++- .../components/editor/PropertyLabel.test.js | 89 +++++++++++++++++++ .../components/editor/PropertyPanel.test.js | 6 +- .../components/editor/PropertyRemark.test.js | 29 ------ .../editor/PropertyTemplateOutline.test.js | 7 -- package-lock.json | 62 +++++-------- src/components/editor/InputListLOC.jsx | 11 +-- src/components/editor/OutlineHeader.jsx | 8 +- src/components/editor/PropertyLabel.jsx | 58 ++++++++++++ src/components/editor/PropertyPanel.jsx | 22 +---- src/components/editor/PropertyRemark.jsx | 29 ------ .../editor/PropertyTemplateOutline.jsx | 10 +-- src/styles/main.css | 5 ++ 13 files changed, 202 insertions(+), 153 deletions(-) create mode 100644 __tests__/components/editor/PropertyLabel.test.js delete mode 100644 __tests__/components/editor/PropertyRemark.test.js create mode 100644 src/components/editor/PropertyLabel.jsx delete mode 100644 src/components/editor/PropertyRemark.jsx diff --git a/__tests__/components/editor/OutlineHeader.test.js b/__tests__/components/editor/OutlineHeader.test.js index 9272ef473..9d5f4e7d1 100644 --- a/__tests__/components/editor/OutlineHeader.test.js +++ b/__tests__/components/editor/OutlineHeader.test.js @@ -2,20 +2,31 @@ import React from 'react' import { shallow } from 'enzyme' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import OutlineHeader from '../../../src/components/editor/OutlineHeader' import { faMinusSquare, faPlusSquare } from '@fortawesome/free-solid-svg-icons' +import PropertyTitle from "../../../src/components/editor/PropertyLabel"; describe('', () => { + const property = { + "propertyLabel": "Instance of", + "propertyURI": "http://id.loc.gov/ontologies/bibframe/instanceOf", + "mandatory": "false" + } + let headerProps = { spacer: 0, - label: "Schema Thing", collapsed: true, - isRequired: false + pt: property } const wrapper = shallow() - it('Contains a FontAwesomeIcon and label value from props', () => { - expect(wrapper.find("div").text()).toEqual(`  ${headerProps.label}`) + it('contains a FontAwesomeIcon', () => { + expect(wrapper.find(FontAwesomeIcon)).toBeTruthy() + }) + + it('contains a ', () => { + expect(wrapper.find(PropertyTitle)).toBeTruthy() }) it('anchor is plus when collapsed', () => { diff --git a/__tests__/components/editor/PropertyLabel.test.js b/__tests__/components/editor/PropertyLabel.test.js new file mode 100644 index 000000000..ec14fc301 --- /dev/null +++ b/__tests__/components/editor/PropertyLabel.test.js @@ -0,0 +1,89 @@ +// Copyright 2019 Stanford University see Apache2.txt for license + +import 'jsdom-global/register' +import React from 'react' +import { shallow } from 'enzyme' +import PropertyLabel from '../../../src/components/editor/PropertyLabel' +import { OverlayTrigger } from 'react-bootstrap' +import RequiredSuperscript from '../../../src/components/editor/RequiredSuperscript' + + +describe('', () => { + + describe('when the propertyTemplate has a remark with a URL', () => { + const props = { + "pt" : { + remark: "http://access.rdatoolkit.org/example", + propertyLabel: "Example RDA" + } + } + const wrapper = shallow() + + it('displays an HTML anchor tag if there is a URL in a property remark', () => { + expect(wrapper.find('a')).toBeTruthy() + }) + + it('contains a href with the value of the remark', () => { + const anchor = wrapper.find('a') + expect(anchor.prop('href')).toEqual(new URL("http://access.rdatoolkit.org/example")) + }) + + it('contains a span within the link with the text value of the label', () => { + const span = wrapper.find('a > span') + expect(span.text()).toEqual("Example RDA") + }) + + it('does not has the RequiredSuperscript component if property: mandatory is false', () => { + expect(wrapper.find(RequiredSuperscript).length).toEqual(0) + }) + + }) + + describe('when the propertyTemplate has a remark and label, and the remark is not a URL', () => { + const props = { + "pt" : { + remark: "A test remark", + propertyLabel: "Example RDA" + } + } + + const wrapper = shallow() + + it('displays a tooltip from the label if the remark is not a valid URL', () => { + expect(wrapper.find(OverlayTrigger).length).toEqual(1) + expect(wrapper.find('OverlayTrigger span').text()).toEqual("Example RDA") + }) + + }) + + + describe('when the propertyTemplate has no remark and just a label', () => { + const props = { + "pt" : { + propertyLabel: "Example RDA" + } + } + const wrapper = shallow() + + it('displays only a span with the property label as the panel title', () => { + expect(wrapper.find('span').text()).toEqual("Example RDA") + }) + + }) + + describe('when the propertyTemplaye has mandatory" true', () => { + const propsWithRequired = { + "pt" : { + remark: "http://access.rdatoolkit.org/example", + propertyLabel: "Example RDA", + mandatory: "true" + } + } + const wrapperWithRequired = shallow() + + it('has the RequiredSuperscript component if property: mandatory is true', () => { + expect(wrapperWithRequired.find(RequiredSuperscript).length).toEqual(1) + }) + }) + +}) diff --git a/__tests__/components/editor/PropertyPanel.test.js b/__tests__/components/editor/PropertyPanel.test.js index 6fb873bbd..b788e927d 100644 --- a/__tests__/components/editor/PropertyPanel.test.js +++ b/__tests__/components/editor/PropertyPanel.test.js @@ -3,6 +3,7 @@ import React from 'react' import { shallow } from 'enzyme' import PropertyPanel from '../../../src/components/editor/PropertyPanel' +import PropertyLabel from "../../../src/components/editor/PropertyLabel"; describe('', () => { let panelProps = { pt: { @@ -30,8 +31,7 @@ describe('', () => { expect(wrapper.find(".panel-body")).toBeTruthy() }) - it('generates a title', () => { - wrapper.instance().generateTitle() - expect(wrapper.find('.panel-heading').debug()).toMatch('Instance of') + it('generates a ', () => { + expect(wrapper.find(PropertyLabel)).toBeTruthy() }) }) diff --git a/__tests__/components/editor/PropertyRemark.test.js b/__tests__/components/editor/PropertyRemark.test.js deleted file mode 100644 index 9ad19d55f..000000000 --- a/__tests__/components/editor/PropertyRemark.test.js +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright 2019 Stanford University see LICENSE for license -import React from 'react' -import { shallow } from 'enzyme' -import PropertyRemark from '../../../src/components/editor/PropertyRemark' - -describe('', () => { - const wrapper = shallow() - - it('displays an HTML anchor tag', () => { - expect(wrapper.find('a')).toBeTruthy() - }) - - it('contains a href with the value of the remark', () => { - const anchor = wrapper.find('a') - expect(anchor.prop('href')).toEqual(new URL("http://access.rdatoolkit.org/example")) - }) - - it('contains a span with the value of the label', () => { - const span = wrapper.find('a > span') - expect(span.text()).toEqual("Example RDA") - }) - - it('displays just a string label if remark is not a valid URL', () => { - const no_link_wrapper = shallow() - expect(no_link_wrapper.text()).toBe("Example RDA") - }) -}) diff --git a/__tests__/components/editor/PropertyTemplateOutline.test.js b/__tests__/components/editor/PropertyTemplateOutline.test.js index ca3105160..4b0c93f6c 100644 --- a/__tests__/components/editor/PropertyTemplateOutline.test.js +++ b/__tests__/components/editor/PropertyTemplateOutline.test.js @@ -4,7 +4,6 @@ import React from 'react' import 'jsdom-global/register' import { shallow, mount } from 'enzyme' import { addResourceTemplate, PropertyTemplateOutline } from '../../../src/components/editor/PropertyTemplateOutline' -import RequiredSuperscript from '../../../src/components/editor/RequiredSuperscript' describe('', () => { @@ -87,12 +86,6 @@ describe('', () => { expect(wrapper.find('OutlineHeader a FontAwesomeIcon').length).toEqual(1) }) - it('checks if the property is required', () => { - expect(wrapper.instance().isRequired(propertyRtProps.propertyTemplate)).toEqual() - propertyRtProps.propertyTemplate['mandatory'] = "false" - expect(wrapper.instance().isRequired(propertyRtProps.propertyTemplate)).toBeUndefined() - }) - describe('Nested property components', () => { const wrapper = shallow() diff --git a/package-lock.json b/package-lock.json index 27471deef..61522a84a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1416,18 +1416,23 @@ } }, "@babel/runtime-corejs2": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.1.2.tgz", - "integrity": "sha512-drxaPByExlcRDKW4ZLubUO4ZkI8/8ax9k9wve1aEthdLKFzjB7XRkOQ0xoTIWGxqdDnWDElkjYq77bt7yrcYJQ==", + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.4.5.tgz", + "integrity": "sha512-5yLuwzvIDecKwYMzJtiarky4Fb5643H3Ao5jwX0HrMR5oM5mn2iHH9wSZonxwNK0oAjAFUQAiOd4jT7/9Y2jMQ==", "requires": { - "core-js": "^2.5.7", - "regenerator-runtime": "^0.12.0" + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" }, "dependencies": { + "core-js": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.8.tgz", + "integrity": "sha512-RWlREFU74TEkdXzyl1bka66O3kYp8jeTXrvJZDzVVMH8AiHUSOFpL1yfhQJ+wHocAm1m+4971W1PPzfLuCv1vg==" + }, "regenerator-runtime": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" } } }, @@ -5925,8 +5930,7 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5950,15 +5954,13 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5975,22 +5977,19 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -6121,8 +6120,7 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -6136,7 +6134,6 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6153,7 +6150,6 @@ "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6162,15 +6158,13 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6191,7 +6185,6 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6280,8 +6273,7 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -6295,7 +6287,6 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6391,8 +6382,7 @@ "version": "5.1.2", "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -6434,7 +6424,6 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6456,7 +6445,6 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6505,15 +6493,13 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "resolved": false, "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/components/editor/InputListLOC.jsx b/src/components/editor/InputListLOC.jsx index c486a2c4c..3b690f230 100644 --- a/src/components/editor/InputListLOC.jsx +++ b/src/components/editor/InputListLOC.jsx @@ -3,7 +3,6 @@ import React, { Component } from 'react'; import { Typeahead } from 'react-bootstrap-typeahead' import PropTypes from 'prop-types' -import PropertyRemark from './PropertyRemark' import { connect } from 'react-redux' import { changeSelections } from '../../actions/index' import { defaultValuesFromPropertyTemplate, booleanPropertyFromTemplate } from '../../Utilities' @@ -35,15 +34,7 @@ class InputListLOC extends Component { this.props.handleSelectedChange(payload) } - - hasPropertyRemark = (propertyTemplate) => { - if(propertyTemplate.remark) { - return ; - } - return propertyTemplate.propertyLabel; - } - + render() { if (this.props.lookupConfig?.uri === undefined) { alert(`There is no configured list lookup for ${this.props.propertyTemplate.propertyURI}`) diff --git a/src/components/editor/OutlineHeader.jsx b/src/components/editor/OutlineHeader.jsx index 6657ed27d..f0429d9b7 100644 --- a/src/components/editor/OutlineHeader.jsx +++ b/src/components/editor/OutlineHeader.jsx @@ -4,6 +4,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faMinusSquare, faPlusSquare } from '@fortawesome/free-solid-svg-icons' +import PropertyLabel from './PropertyLabel' class OutlineHeader extends Component { @@ -33,8 +34,7 @@ class OutlineHeader extends Component {   - {this.props.label} - {this.props.isRequired} + ) } } @@ -44,8 +44,8 @@ OutlineHeader.propTypes = { handleCollapsed: PropTypes.func, id: PropTypes.string, isRequired: PropTypes.any, - label: PropTypes.string, - spacer: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + spacer: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + pt: PropTypes.object } export default OutlineHeader; diff --git a/src/components/editor/PropertyLabel.jsx b/src/components/editor/PropertyLabel.jsx new file mode 100644 index 000000000..1f759dc4a --- /dev/null +++ b/src/components/editor/PropertyLabel.jsx @@ -0,0 +1,58 @@ +// Copyright 2019 Stanford University see Apache2.txt for license + +import shortid from 'shortid' +import React, {Component} from 'react' +import { OverlayTrigger, Popover } from 'react-bootstrap' +import PropTypes from 'prop-types' +import RequiredSuperscript from './RequiredSuperscript' + +export class PropertyLabel extends Component { + + constructor(props) { + super(props) + } + + render () { + + let title = [] + const key = shortid.generate() + const property = this.props.pt + + const popover = ( + + {property.remark} + + ) + + try { + const url = new URL(property.remark) + title.push( + + {property.propertyLabel} + + ) + } catch (_) { + if (property.remark) { + title.push( + + {property.propertyLabel} + + ) + } else { + title.push({property.propertyLabel}) + } + } + + if (property.mandatory === "true"){ + title.push() + } + + return title + } + +} + +PropertyLabel.propTypes = { + pt: PropTypes.object.isRequired +} +export default PropertyLabel diff --git a/src/components/editor/PropertyPanel.jsx b/src/components/editor/PropertyPanel.jsx index 10e72b697..5f1e2d8a9 100644 --- a/src/components/editor/PropertyPanel.jsx +++ b/src/components/editor/PropertyPanel.jsx @@ -2,10 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PropertyRemark from './PropertyRemark' -import shortid from 'shortid' -import RequiredSuperscript from './RequiredSuperscript' - +import PropertyLabel from "./PropertyLabel"; export default class PropertyPanel extends Component { @@ -13,21 +10,6 @@ export default class PropertyPanel extends Component { super(props) } - generateTitle = () => { - let title - if (this.props.pt.remark) { - title = - } else { - title = this.props.pt.propertyLabel - } - if (this.props.pt.mandatory === "true") { - title = [title, ] - } - return title - } - getCssClasses = () => { let floatClass = 'pull-left' if (this.props.float > 0) { @@ -42,7 +24,7 @@ export default class PropertyPanel extends Component { return (
- {this.generateTitle()} +
{this.props.children} diff --git a/src/components/editor/PropertyRemark.jsx b/src/components/editor/PropertyRemark.jsx deleted file mode 100644 index b89655d64..000000000 --- a/src/components/editor/PropertyRemark.jsx +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright 2019 Stanford University see LICENSE for license -import React, {Component} from 'react' -import PropTypes from 'prop-types' - -export class PropertyRemark extends Component { - - constructor(props) { - super(props) - } - - render () { - try { - const url = new URL(this.props.remark) - return - {this.props.label} - - - } catch (_) { - return this.props.label - } - } - -} - -PropertyRemark.propTypes = { - label: PropTypes.string.isRequired, - remark: PropTypes.string.isRequired -} -export default PropertyRemark; diff --git a/src/components/editor/PropertyTemplateOutline.jsx b/src/components/editor/PropertyTemplateOutline.jsx index cddd972b5..bcda8b21b 100644 --- a/src/components/editor/PropertyTemplateOutline.jsx +++ b/src/components/editor/PropertyTemplateOutline.jsx @@ -3,7 +3,6 @@ import React, {Component} from 'react' import OutlineHeader from './OutlineHeader' import PropertyTypeRow from './PropertyTypeRow' -import RequiredSuperscript from './RequiredSuperscript' import { getResourceTemplate } from '../../sinopiaServer' import { isResourceWithValueTemplateRef, resourceToName, templateBoolean } from '../../Utilities' import PropertyComponent from './PropertyComponent' @@ -61,12 +60,6 @@ export class PropertyTemplateOutline extends Component { } } - isRequired = (property) => { - if (property.mandatory === "true") { - return - } - } - fulfillRTPromises = async (promiseAll) => { return await promiseAll.then(rts => { rts.map(rt => { @@ -134,11 +127,10 @@ export class PropertyTemplateOutline extends Component { render() { return(
-
{this.state.propertyTypeRow} diff --git a/src/styles/main.css b/src/styles/main.css index f18014c8a..409a51237 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -131,6 +131,11 @@ a.prop-remark { color: white; } + .rOutline-header a.prop-remark { + text-decoration: none; + color: black; +} + span.prop-remark { border-width: thin; border-bottom-style: dashed !important; From cf32473aeb8435afbb4a15e7828871e35a8ebf88 Mon Sep 17 00:00:00 2001 From: Joshua Greben Date: Thu, 30 May 2019 13:22:18 -0700 Subject: [PATCH 2/2] Refactor PropertyLabel jsx render; rework RequiredSuperscript tests; Fix typos --- .../components/editor/OutlineHeader.test.js | 4 +- .../components/editor/PropertyLabel.test.js | 30 ++++++++----- src/components/editor/InputListLOC.jsx | 2 +- src/components/editor/PropertyLabel.jsx | 43 +++++++++++-------- 4 files changed, 48 insertions(+), 31 deletions(-) diff --git a/__tests__/components/editor/OutlineHeader.test.js b/__tests__/components/editor/OutlineHeader.test.js index 9d5f4e7d1..0c0ef9b2b 100644 --- a/__tests__/components/editor/OutlineHeader.test.js +++ b/__tests__/components/editor/OutlineHeader.test.js @@ -5,7 +5,7 @@ import { shallow } from 'enzyme' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import OutlineHeader from '../../../src/components/editor/OutlineHeader' import { faMinusSquare, faPlusSquare } from '@fortawesome/free-solid-svg-icons' -import PropertyTitle from "../../../src/components/editor/PropertyLabel"; +import PropertyLabel from '../../../src/components/editor/PropertyLabel' describe('', () => { const property = { @@ -26,7 +26,7 @@ describe('', () => { }) it('contains a ', () => { - expect(wrapper.find(PropertyTitle)).toBeTruthy() + expect(wrapper.find(PropertyLabel)).toBeTruthy() }) it('anchor is plus when collapsed', () => { diff --git a/__tests__/components/editor/PropertyLabel.test.js b/__tests__/components/editor/PropertyLabel.test.js index ec14fc301..a3e484e1e 100644 --- a/__tests__/components/editor/PropertyLabel.test.js +++ b/__tests__/components/editor/PropertyLabel.test.js @@ -33,10 +33,6 @@ describe('', () => { expect(span.text()).toEqual("Example RDA") }) - it('does not has the RequiredSuperscript component if property: mandatory is false', () => { - expect(wrapper.find(RequiredSuperscript).length).toEqual(0) - }) - }) describe('when the propertyTemplate has a remark and label, and the remark is not a URL', () => { @@ -71,19 +67,33 @@ describe('', () => { }) - describe('when the propertyTemplaye has mandatory" true', () => { - const propsWithRequired = { + describe('the propertyTemplate mandatory property', () => { + + const props = { "pt" : { remark: "http://access.rdatoolkit.org/example", - propertyLabel: "Example RDA", - mandatory: "true" + propertyLabel: "Example RDA" } } - const wrapperWithRequired = shallow() + + it('does not have the RequiredSuperscript component if property: mandatory is undefined', () => { + const wrapperNoRequired = shallow() + expect(wrapperNoRequired.find(RequiredSuperscript).length).toEqual(0) + }) + + it('does not have the RequiredSuperscript component if property: mandatory is false', () => { + props.pt['mandatory'] = "false" + const wrapperNoRequired = shallow() + expect(wrapperNoRequired.find(RequiredSuperscript).length).toEqual(0) + }) it('has the RequiredSuperscript component if property: mandatory is true', () => { - expect(wrapperWithRequired.find(RequiredSuperscript).length).toEqual(1) + props.pt['mandatory'] = "true" + const wrapperRequired = shallow() + expect(wrapperRequired.find(RequiredSuperscript).length).toEqual(1) + }) + }) }) diff --git a/src/components/editor/InputListLOC.jsx b/src/components/editor/InputListLOC.jsx index 3b690f230..7cebe2b80 100644 --- a/src/components/editor/InputListLOC.jsx +++ b/src/components/editor/InputListLOC.jsx @@ -34,7 +34,7 @@ class InputListLOC extends Component { this.props.handleSelectedChange(payload) } - + render() { if (this.props.lookupConfig?.uri === undefined) { alert(`There is no configured list lookup for ${this.props.propertyTemplate.propertyURI}`) diff --git a/src/components/editor/PropertyLabel.jsx b/src/components/editor/PropertyLabel.jsx index 1f759dc4a..a23eedfb9 100644 --- a/src/components/editor/PropertyLabel.jsx +++ b/src/components/editor/PropertyLabel.jsx @@ -1,4 +1,4 @@ -// Copyright 2019 Stanford University see Apache2.txt for license +// Copyright 2019 Stanford University see LICENSE for license import shortid from 'shortid' import React, {Component} from 'react' @@ -14,7 +14,7 @@ export class PropertyLabel extends Component { render () { - let title = [] + const title = [] const key = shortid.generate() const property = this.props.pt @@ -24,25 +24,32 @@ export class PropertyLabel extends Component { ) + let url try { - const url = new URL(property.remark) - title.push( - - {property.propertyLabel} - - ) - } catch (_) { - if (property.remark) { - title.push( - - {property.propertyLabel} - - ) - } else { - title.push({property.propertyLabel}) - } + url = new URL(property.remark) + } catch { + //ignore } + const urlLabel = ( + + {property.propertyLabel} + + ) + + const toolTipLabel = ( + + {property.propertyLabel} + + ) + + const plainLabel = ( + {property.propertyLabel} + ) + + url !== undefined ? title.push(urlLabel) : (property.remark !== undefined) ? title.push(toolTipLabel) : title.push(plainLabel) + + if (property.mandatory === "true"){ title.push() }