Property template text remarks are tooltips on the property panel and…

… the nested property outline (#567)

Property template text remarks are tooltips on the property panel and the nested property outline

__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 PropertyLabel from '../../../src/components/editor/PropertyLabel'
 
 describe('<OutlineHeader />', () => {
+  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(<OutlineHeader {...headerProps} />)
 
-  it('Contains a FontAwesomeIcon and label value from props', () => {
-    expect(wrapper.find("div").text()).toEqual(` <FontAwesomeIcon /> ${headerProps.label}`)
+  it('contains a FontAwesomeIcon', () => {
+    expect(wrapper.find(FontAwesomeIcon)).toBeTruthy()
+  })
+
+  it('contains a <PropertyLabel />', () => {
+    expect(wrapper.find(PropertyLabel)).toBeTruthy()
   })
 
   it('anchor is plus when collapsed', () => {

__tests__/components/editor/PropertyLabel.test.js

@@ -0,0 +1,99 @@
+// 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('<PropertyLabel />', () => {
+
+  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(<PropertyLabel {...props} />)
+
+    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")
+    })
+
+  })
+
+  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(<PropertyLabel {...props} />)
+
+    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(<PropertyLabel {...props} />)
+
+    it('displays only a span with the property label as the panel title', () => {
+      expect(wrapper.find('span').text()).toEqual("Example RDA")
+    })
+
+  })
+
+  describe('the propertyTemplate mandatory property', () => {
+
+    const props = {
+      "pt" : {
+        remark: "http://access.rdatoolkit.org/example",
+        propertyLabel: "Example RDA"
+      }
+    }
+
+    it('does not have the RequiredSuperscript component if property: mandatory is undefined', () => {
+      const wrapperNoRequired = shallow(<PropertyLabel {...props} />)
+      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(<PropertyLabel {...props} />)
+      expect(wrapperNoRequired.find(RequiredSuperscript).length).toEqual(0)
+    })
+
+    it('has the RequiredSuperscript component if property: mandatory is true', () => {
+      props.pt['mandatory'] = "true"
+      const wrapperRequired = shallow(<PropertyLabel {...props} />)
+      expect(wrapperRequired.find(RequiredSuperscript).length).toEqual(1)
+
+    })
+
+  })
+
+})

__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('<PropertyPanel />', () => {
   let panelProps = { pt: {
@@ -30,8 +31,7 @@ describe('<PropertyPanel />', () => {
     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 <PropertyLabel />', () => {
+    expect(wrapper.find(PropertyLabel)).toBeTruthy()
   })
 })

__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('<PropertyTemplateOutline />', () => {
 
@@ -87,12 +86,6 @@ describe('<PropertyTemplateOutline />', () => {
     expect(wrapper.find('OutlineHeader a FontAwesomeIcon').length).toEqual(1)
   })
 
-  it('checks if the property is required', () => {
-    expect(wrapper.instance().isRequired(propertyRtProps.propertyTemplate)).toEqual(<RequiredSuperscript />)
-    propertyRtProps.propertyTemplate['mandatory'] = "false"
-    expect(wrapper.instance().isRequired(propertyRtProps.propertyTemplate)).toBeUndefined()
-  })
-
   describe('Nested property components', () => {
 
     const wrapper = shallow(<PropertyTemplateOutline {...propertyRtProps} />)