fix(Abcjs): Set a unique id for the internal div container, to avoid …

…problems if there's more than o

package.json

@@ -38,7 +38,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "semantic-release": "^12.2.2",
-    "sinon": "^4.1.6",
+    "sinon": "^4.2.1",
     "travis-deploy-once": "^4.3.2"
   },
   "author": "Alberto Iglesias",

src/index.js

@@ -5,9 +5,11 @@ import abcjsObj from 'abcjs'
 
 class Abcjs extends PureComponent {
 
+  uniqueNumber = Date.now() + Math.random()
+
   renderAbcNotation(abcNotation, parserParams, engraverParams, renderParams) {
     const res = abcjsObj.renderAbc(
-      'abcjs-result',
+      'abcjs-result-' + this.uniqueNumber,
       abcNotation,
       parserParams,
       engraverParams,
@@ -28,7 +30,7 @@ class Abcjs extends PureComponent {
   render() {
     return (
       <div style={{ width: '100%' }} >
-        <div id="abcjs-result" style={{ width: '100%' }} />
+        <div id={'abcjs-result-' + this.uniqueNumber} style={{ width: '100%' }} />
       </div>
     )
   }

tests/index.test.js

@@ -9,8 +9,9 @@ describe('Abcjs', () => {
 
   it('shallow renders <Abcjs /> with default parameters', () => {
     const wrapper = shallow(<Abcjs />)
+    const id = wrapper.find('div').at(1).prop('id')
     expect(wrapper.html())
-      .to.equal('<div style="width:100%"><div id="abcjs-result" style="width:100%"></div></div>')
+      .to.equal(`<div style="width:100%"><div id="${id}" style="width:100%"></div></div>`)
   })
 
   it('mounts <Abcjs /> with a simple abcNotation', () => {