feat: Add config props to element

Author: jepser

package.json

@@ -23,6 +23,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "prop-types": "^15.6.1",
     "react": "^16.4.0",
     "react-dom": "^16.4.0"
   }

src/ReactCui.js

@@ -1,26 +1,56 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
+import PropTypes from 'prop-types'
 
-const embedUrl = 'https://typeform-labs.s3.amazonaws.com/cui/cui-embed.js'
+export const EMBED_URL = 'https://typeform-labs.s3.amazonaws.com/cui/cui-embed.js'
 
 class Cui extends Component {
   componentDidMount() {
-    if (document) {
+    if (document && !scriptTagExists({document})) {
       const embedJs = document.createElement('script')
       embedJs.type = 'text/javascript'
-      embedJs.src = embedUrl
+      embedJs.src = EMBED_URL
       embedJs.async = true
       document.getElementsByTagName('head')[0].appendChild(embedJs)
     }
   }
 
   render() {
     const {
-      uid
+      uid,
+      height,
+      avatar,
+      theme
     } = this.props
     return (
-      <div key={`cui-${uid}`} className='cui-embed' data-cui-uid={uid}></div>
+      <Fragment>
+        {uid ? (
+          <div
+            key={`cui-${uid}`}
+            className='cui-embed'
+            data-cui-uid={uid}
+            data-cui-height={height}
+            data-cui-avatar={avatar}
+            data-cui-theme={theme}
+          />
+        ) : null}
+      </Fragment>
     )
   }
 }
 
+Cui.propTypes = {
+  uid: PropTypes.string.isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  avatar: PropTypes.string,
+  theme: PropTypes.string
+}
+
 export default Cui
+
+const scriptTagExists = ({document}) => {
+  const scriptTags = document.getElementsByTagName('head')[0].childNodes
+  const cuiEmbedScriptTags = [].filter.call(scriptTags, (script) => {
+    return script.src === EMBED_URL
+  })
+  return !!cuiEmbedScriptTags.length
+}

src/ReactCui.test.js

@@ -1,19 +1,48 @@
 import React from 'react'
 import { shallow, mount, configure }  from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import Cui from './ReactCui'
+import Cui, { EMBED_URL } from './ReactCui'
 
 configure({ adapter: new Adapter() })
+describe('<Cui />', () => {
 
-test('Component have required UID parameter', () => {
-  const uid = 'abc123'
-  const Component = mount(<Cui uid={uid} />)
-  expect(Component.props().uid).toBe(uid)
-})
+  test('Component have required UID parameter passed to render', () => {
+    const uid = 'abc123'
+    const Component = mount(<Cui uid={uid} />)
+    expect(Component.render().attr('data-cui-uid')).toBe(uid)
+  })
+
+  test('Component have optional parameters being passed to the DOM element', () => {
+    const uid = 'abc123'
+    const height = 500
+    const avatar = 'https://avatar.com/profile.jpg'
+    const theme = '#333'
+    const Component = mount(<Cui uid={uid} height={height} avatar={avatar} theme={theme} />)
+    const ComponentDOM = Component.render()
+
+    expect(ComponentDOM.attr('data-cui-height')).toBe(height.toString())
+    expect(ComponentDOM.attr('data-cui-avatar')).toBe(avatar)
+    expect(ComponentDOM.attr('data-cui-theme')).toBe(theme)
+  })
+
+  test('Component should have the className `cui-embed` so the scripts loads the CUI inside', () => {
+    const uid = 'abc123'
+    const Component = shallow(<Cui uid={uid} />)
+
+    expect(Component.find('.cui-embed').length).toBe(1)
+  })
+
+  test('Component should inject ONLY ONE script tag with the embed url', () => {
+
+    const Component = mount(<Cui uid={'123'} />)
+    const scriptTags = document.getElementsByTagName('head')[0].childNodes
+    let embedScriptTags = 0
+    scriptTags.forEach(script => {
+      if (script.src === EMBED_URL) embedScriptTags++
+    })
+
+    expect(embedScriptTags).toBe(1)
 
-test('Component should have the className `cui-embed`', () => {
-  const uid = 'abc123'
-  const Component = shallow(<Cui uid={uid} />)
+  })
 
-  expect(Component.is('.cui-embed')).toBe(true)
 })

yarn.lock

@@ -3066,7 +3066,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0:
+prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies: