Adding propTypes for Components props. Expanded and adding tests for …

…props now

part of issue #211.

Fixes #175

Continued refinement for implementing and testing props in current
Sinopia Editor. Will need to be refactored when final Profile JSON
structure is decided.

Added invalid props test for PropertyTemplate, fixed tests and props for other components

Removed props tests in favor of a follow-up ticket #211

__tests__/components/CanvasMenu.test.js

@@ -23,4 +23,5 @@ describe('<CanvasMenu />', () => {
       expect(node.prop('rel')).toEqual("noopener noreferrer")
     })
   })
+
 })

__tests__/components/Header.test.js

@@ -33,4 +33,5 @@ describe('<Header />', () => {
   it('links to Sinopia Profile Editor', () => {
     expect(wrapper.find('a[href="https://profile-editor.sinopia.io/"]').text()).toBe('Profile Editor')
   })
+
 })

__tests__/components/HomePage.test.js

@@ -7,6 +7,7 @@ import Header from '../../src/components/Header'
 import NewsPanel from '../../src/components/NewsPanel'
 import DescPanel from '../../src/components/DescPanel'
 
+
 describe('<HomePage />', () =>{
   it('selectable by id "home-page"', () => {
     expect(shallow(<HomePage />).is('#home-page')).toBe(true)
@@ -18,4 +19,5 @@ describe('<HomePage />', () =>{
     expect(wrapper.find(NewsPanel).length).toBe(1)
     expect(wrapper.find(DescPanel).length).toBe(1)
   })
+
 })

__tests__/components/editor/Editor.test.js

@@ -19,4 +19,5 @@ describe('<Editor />', () => {
   it('renders <Header />', () => {
     expect(wrapper.find(Header).length).toBe(1)
   })
+
 })

__tests__/components/editor/FormWrapper.test.js

@@ -33,12 +33,15 @@ describe('<FormWrapper />', () => {
       ]))
     })
   })
+
   it('renders FormWrapper nested component', () => {
     expect(wrapper
       .find('div.FormWrapper > div > InputLiteral').length)
       .toEqual(1)
   })
+
   it('<form> does not contain redundant form attribute', () => {
     expect(wrapper.find('form[role="form"]').length).toEqual(0)
   })
-})
+
+})

__tests__/components/editor/Header.test.js

@@ -6,7 +6,9 @@ import Header from '../../../src/components/editor/Header'
 
 describe('<Header />', () => {
   const wrapper = shallow(<Header />)
+
   it ('displays the Sinopia text', () => {
     expect(wrapper.find("h1.editor-logo").text()).toBe("SINOPIA")
   })
+
 })

__tests__/components/editor/ResourceTemplate.test.js

@@ -30,7 +30,6 @@ const rtProps = {
 
 describe('<ResourceTemplate />', () => {
   const wrapper = shallow(<ResourceTemplate {...rtProps} />)
-
   it('has div with class "ResourceTemplate"', () => {
     expect(wrapper.find('div.ResourceTemplate').length).toEqual(1)
   })
@@ -39,4 +38,5 @@ describe('<ResourceTemplate />', () => {
   it('contains <div> with id resourceTemplate', () => {
     expect(wrapper.find('div#resourceTemplate').length).toEqual(1)
   })
+
 })

__tests__/components/editor/ValueConstraints.test.js

@@ -174,6 +174,7 @@ describe('when values are not present', () => {
 })
 
 describe('cleanup', () => {
+
   it('unmounts the wrapper', () => {
     expect(wrapper.debug().length).toBeGreaterThanOrEqual(1)
     wrapper.unmount();
@@ -198,4 +199,4 @@ function copyProps(src, target) {
     .filter(prop => typeof target[prop] === 'undefined')
     .map(prop => Object.getOwnPropertyDescriptor(src, prop));
   Object.defineProperties(target, props);
-}
+}

package.json

@@ -69,7 +69,7 @@
     "dev-build": "webpack --progress --mode development",
     "dev-build-test": "npm run dev-build && npm run test",
     "dev-start": "webpack-dev-server --config ./webpack.config.js --mode development",
-    "eslint": "eslint --max-warnings 60 --color -c .eslintrc.js --ext js,jsx ./src",
+    "eslint": "eslint --max-warnings 32 --color -c .eslintrc.js --ext js,jsx ./src",
     "jest-cov": "jest --coverage --colors",
     "jest-ci": "jest --ci --runInBand --coverage --reporters=default --reporters=jest-junit --colors  && cat ./coverage/lcov.info | coveralls",
     "test": "jest --colors"

src/components/CanvasMenu.jsx

@@ -1,12 +1,13 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'
-
+import PropTypes from 'prop-types'
 
 class CanvasMenu extends Component {
+
   render() {
     return(
       <div>
@@ -68,4 +69,8 @@ class CanvasMenu extends Component {
   };
 };
 
+CanvasMenu.propTypes = {
+  closeHandleMenu: PropTypes.func
+}
+
 export default CanvasMenu;

src/components/Header.jsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Leland Stanford Junior University see Apache2.txt for license
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import SinopiaLogo from '../styles/sinopia-logo.png'
 import { Link } from 'react-router-dom'
 
@@ -29,4 +30,8 @@ class Header extends Component {
   }
 }
 
+Header.propTypes = {
+  triggerHomePageMenu: PropTypes.func
+}
+
 export default Header

src/components/HomePage.jsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Header from './Header'
 import NewsPanel from './NewsPanel'
 import DescPanel from './DescPanel'
@@ -17,4 +18,10 @@ class HomePage extends Component {
   }
 }
 
+HomePage.propTypes = {
+  // Passed through ...Props
+  children: PropTypes.array,
+  triggerHandleOffsetMenu: PropTypes.func
+}
+
 export default HomePage

src/components/editor/Editor.jsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
 import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import ResourceTemplate from './ResourceTemplate'
 import Header from './Header'
 import StartingPoints from './StartingPoints'
@@ -29,4 +30,9 @@ class Editor extends Component {
   }
 }
 
+Editor.propTypes = {
+  children: PropTypes.array,
+  triggerHandleOffsetMenu: PropTypes.func
+}
+
 export default Editor

src/components/editor/FormWrapper.jsx

@@ -2,14 +2,15 @@
 
 import React, { Component }  from 'react'
 import InputLiteral from './InputLiteral'
+import PropTypes from 'prop-types'
 
 class FormWrapper extends Component{
   render () {
     let dashedBorder = {
       border: '1px dashed',
       padding: '10px',
     }
-    if (this.props.propertyTemplates.length == 0 || this.props.propertyTemplates[0] == {}) {
+    if (this.props.propertyTemplates.length === 0 || this.props.propertyTemplates[0] === {}) {
       return <h1>There are no propertyTemplates - probably an error.</h1>
     } else {
       return (
@@ -42,4 +43,9 @@ class FormWrapper extends Component{
   }
 }
 
+FormWrapper.propTypes= {
+  propertyTemplates: PropTypes.array,
+
+}
+
 export default FormWrapper;

src/components/editor/Header.jsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class Header extends Component {
   render() {
@@ -24,4 +25,8 @@ class Header extends Component {
   }
 }
 
+Header.propTypes = {
+  triggerEditorMenu: PropTypes.func
+}
+
 export default Header

src/components/editor/PropertyTemplate.jsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ValueConstraints from './ValueConstraints'
 
 class PropertyTemplate extends Component {
@@ -35,5 +36,14 @@ class PropertyTemplate extends Component {
   }
 }
 
+PropertyTemplate.propTypes = {
+  propertyLabel: PropTypes.string,
+  propertyURI: PropTypes.string,
+  remark: PropTypes.string,
+  mandatory: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  repeatable: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  type: PropTypes.string,
+  resourceTemplates: PropTypes.array
+}
 
 export default PropertyTemplate

src/components/editor/ResourceTemplate.jsx

@@ -3,6 +3,7 @@
 import React, { Component }  from 'react'
 import FormWrapper from './FormWrapper'
 const { getResourceTemplate } = require('../../sinopiaServerSpoof.js')
+import PropTypes from 'prop-types'
 
 class ResourceTemplate extends Component {
 
@@ -36,4 +37,9 @@ class ResourceTemplate extends Component {
   }
 }
 
+ResourceTemplate.propTypes = {
+  resourceTemplates: PropTypes.array,
+  resourceTemplateId: PropTypes.string
+}
+
 export default ResourceTemplate;

src/components/editor/ValueConstraints.jsx

@@ -1,8 +1,10 @@
 // Copyright 2018 Stanford University see Apache2.txt for license
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class ValueConstraints extends Component {
+
   render() {
     let dashedBorder = {
       border: '1px dashed',
@@ -42,6 +44,25 @@ class ValueConstraints extends Component {
   }
 }
 
+ValueConstraints.propTypes = {
+    defaults: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    editable: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool]),
+    languageLabel: PropTypes.string,
+    // TODO: Use URL PropType see https://www.npmjs.com/package/url-prop-type
+    languageURI: PropTypes.string,
+    mandatory: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool]),
+    remark: PropTypes.string,
+    repeatable: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool]),
+    useValuesFrom: PropTypes.oneOfType([ PropTypes.string, PropTypes.array ]),
+    // Inconsistency in use of valueDataType in props
+    valueDataType: PropTypes.any,
+    valueDataTypes: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    // TODO: Use a custom validator to check controlled vocab for languages?
+    valueLanguage: PropTypes.string,
+    validatePattern: PropTypes.string,
+    valueTemplateRefs: PropTypes.oneOfType([ PropTypes.array, PropTypes.string])
+}
+
 class ValueDataTypes extends Component {
   render() {
     const obj = this.props.valueDataTypes
@@ -68,6 +89,10 @@ class ValueDataTypes extends Component {
   }
 }
 
+ValueDataTypes.propTypes = {
+  valueDataTypes: PropTypes.array
+}
+
 class Defaults extends Component {
   render() {
     const obj = this.props.defaults[0]
@@ -88,6 +113,10 @@ class Defaults extends Component {
   }
 }
 
+Defaults.propTypes = {
+  defaults: PropTypes.array
+}
+
 class UseValuesFrom extends Component {
   render() {
     const obj = this.props.useValuesFrom
@@ -111,6 +140,10 @@ class UseValuesFrom extends Component {
   }
 }
 
+UseValuesFrom.propTypes = {
+  useValuesFrom: PropTypes.array
+}
+
 class ValueTemplateRefs extends Component {
   render() {
     const obj = this.props.valueTemplateRefs
@@ -134,6 +167,10 @@ class ValueTemplateRefs extends Component {
   }
 }
 
+ValueTemplateRefs.propTypes = {
+    valueTemplateRefs: PropTypes.array
+}
+
 function hasValues(obj) {
   for(var key in obj) {
     if(obj.hasOwnProperty(key) && obj[key].length > 0)