Added more test for asset group component

CSRF token mocked for tests preparation (at tests_helper init)

app/helpers/activities_helper.rb

@@ -43,7 +43,7 @@ def steps_data_for_steps(steps)
       {
         stepUpdateUrl: Rails.application.routes.url_helpers.step_path(step),
         activity: step.activity,
-        asset_group: step.asset_group,
+        assetGroup: step.asset_group,
         step_type: step.step_type,
         operations: operations_data(step.operations.joins(:asset)),
         username: username
@@ -144,7 +144,7 @@ def asset_groups_data(activity)
   def step_type_templates_data_for_step_types(activity, step_types, asset_group)
     step_types.select{|s| !s.step_template.blank? }.map do |st|
       {
-        asset_group: asset_group,
+        assetGroup: asset_group,
         createStepUrl: Rails.application.routes.url_helpers.activity_steps_path(activity),
         stepType: st,
         name: st.name,

app/javascript/components/activity.jsx

@@ -262,7 +262,6 @@ class Activity extends React.Component {
         <React.Fragment>
         {this.renderStepTypesControl("1")}
         <AssetGroupsEditor
-          csrfToken={this.props.csrfToken}
           uuidsPendingRemoval={this.state.uuidsPendingRemoval}
                 dataAssetDisplay={this.state.dataAssetDisplay}
           activityRunning={this.state.activityRunning}

app/javascript/components/asset_group_components/asset_group_editor.jsx

@@ -6,8 +6,24 @@ import FineUploaderTraditional from 'fine-uploader-wrappers'
 import Dropzone from 'react-fine-uploader/dropzone'
 import 'react-fine-uploader/gallery/gallery.css'
 
-import {uploaderOptions, getCsrfToken} from '../lib/uploader_utils'
-
+import {uploaderOptions} from '../lib/uploader_utils'
+/**
+ assetGroup {
+    updateUrl: url to update the asset group (not in use for the moment)
+  }
+  activityRunning: boolean saying if there is any process running in the activity
+  isShown: probably not needed
+  uuidsPendingRemoval: list of uuids where the user has click on 'delete' from the group
+  dataAssetDisplay
+  onCollapseFacts: handler when collapsing a list of fields
+  collapsedFacts: hashmap where the keys are fact predicates and the values are a boolean
+  representing if the fact is collapsed or not
+  onRemoveAssetFromAssetGroup
+  onRemoveAllAssetsFromAssetGroup: handler when clearing al assets from a group
+  onErrorMessage: handler for errors
+  onChangeAssetGroup: handler when the asset group changes
+  onAddBarcodesToAssetGroup: handler when adding a new barcode to the group
+**/
 class AssetGroupEditor extends React.Component {
   constructor(props) {
     super(props)
@@ -22,12 +38,6 @@ class AssetGroupEditor extends React.Component {
     this.handleBarcodeReaderChange = this.handleBarcodeReaderChange.bind(this)
     this.assetsChanging = this.assetsChanging.bind(this)
   }
-  listenSSE() {
-    const evtSource = new EventSource(this.props.assetGroup.updateUrl+'/sse', { withCredentials: true })
-    evtSource.addEventListener("asset_group", $.proxy(this.onSSEAssetGroupUpdates, this), false)
-    //evtSource.addEventListener("asset_running", $.proxy(this.onAssetsChanging, this), false)
-    //evtSource.addEventListener("active_step", $.proxy(this.onActiveStepUpdates, this), false)
-  }
   handleBarcodeReaderChange(e) {
     this.setState({barcodesInputText: e.target.value})
   }
@@ -56,10 +66,8 @@ class AssetGroupEditor extends React.Component {
   render() {
     return(
       <Dropzone uploader={ new FineUploaderTraditional(uploaderOptions(this.props)) }>
-        <div className="form-group" data-psd-component-class="AssetGroup"
-           data-psd-component-parameters="{}">
+        <div className="form-group">
            <FormFor
-             csrfToken={this.props.csrfToken || getCsrfToken()}
              url={this.props.assetGroup.updateUrl}
              data-turbolinks="false"
              onSubmit={this.onSubmit}

app/javascript/components/asset_group_components/asset_groups_editor.jsx

@@ -40,7 +40,6 @@ class AssetGroupsEditor extends React.Component {
         id={'asset-group-'+assetGroup.id}
         key={'asset-group-'+assetGroup.id}>
         <AssetGroupEditor assetGroup={assetGroup}
-          csrfToken={this.props.csrfToken}
           uuidsPendingRemoval={this.props.uuidsPendingRemoval}
           dataAssetDisplay={this.props.dataAssetDisplay}
           activityRunning={this.props.activityRunning}

app/javascript/components/lib/uploader_utils.jsx

@@ -1,4 +1,5 @@
 const getCsrfToken = () => {
+  debugger
   const csrfMeta = $('meta[name="csrf-token"]')
   if (csrfMeta.length == 1) {
     return csrfMeta.attr('content')

app/javascript/components/step_components/steps_failed.jsx

@@ -18,7 +18,7 @@ class StepsFailed extends StepsFinished {
   renderStepRow(step,index) {
     const stepTypeName = step.step_type ? step.step_type.name : ''
     const stepActivityId = step.activity ? step.activity.id : ''
-    const stepAssetGroup = step.asset_group ? step.asset_group.id : ''
+    const stepAssetGroup = step.assetGroup ? step.assetGroup.id : ''
     const stepUsername = step.username
     const classForState = (step.state == C.STEP_STATE_RUNNING) ? 'spinner' : ''
 

app/javascript/components/step_components/steps_finished.jsx

@@ -102,7 +102,7 @@ class StepsFinished extends React.Component {
   renderStepRow(step,index) {
     const stepTypeName = step.step_type ? step.step_type.name : ''
     const stepActivityId = step.activity ? step.activity.id : ''
-    const stepAssetGroup = step.asset_group ? step.asset_group.id : ''
+    const stepAssetGroup = step.assetGroup ? step.assetGroup.id : ''
     const stepUsername = step.username
     const classForState = (step.state == C.STEP_STATE_RUNNING) ? 'spinner' : ''
 

app/javascript/components/step_components/steps_running.jsx

@@ -23,7 +23,7 @@ class StepsRunning extends StepsFinished {
   renderStepRow(step,index) {
     const stepTypeName = step.step_type ? step.step_type.name : ''
     const stepActivityId = step.activity ? step.activity.id : ''
-    const stepAssetGroup = step.asset_group ? step.asset_group.id : ''
+    const stepAssetGroup = step.assetGroup ? step.assetGroup.id : ''
     const stepUsername = step.username
     const classForState = (step.state == C.STEP_STATE_RUNNING) ? 'spinner' : ''
 

app/javascript/components/step_type_components/step_types_control.jsx

@@ -4,7 +4,6 @@ import Togglable from '../lib/togglable'
 const renderTogglable = (props) => {
   const assetGroupId=props.selectedAssetGroup
   const stepTypes = props.stepTypes[assetGroupId]
-
   return (<StepTypesActive
         instanceId={props.instanceId}
         key={assetGroupId}

test/javascript/components/activity.test.js

@@ -7,13 +7,29 @@ import {buildActivityState} from "../test_helpers/factories"
 
 import Activity from 'activity';
 
+describe('Activity', () => {
+  it('renders Activity component', () => {
+    const wrapper = shallow(<Activity {...buildActivityState(1,0)} />);
+    expect(wrapper.find('div')).toHaveLength(1);
+  })
 
-test('renders Activity component', () => {
-  const wrapper = shallow(<Activity {...buildActivityState(0,0)} />);
-  expect(wrapper.find('div')).toHaveLength(1);
-});
+  it('renders only one AssetGroupEditor component', () => {
+    const wrapper = mount(<Activity {...buildActivityState(2,0)} />);
+    expect(wrapper.find('AssetGroupEditor')).toHaveLength(1);
+  })
 
-test('renders only one AssetGroupEditor component', () => {
-  const wrapper = mount(<Activity {...buildActivityState(2,0)} />);
-  expect(wrapper.find('AssetGroupEditor')).toHaveLength(1);
-});
+  // describe('State Test failure 1', () => {
+
+  //   const stateFailure1 = require('../../data/react/state_failure.json')
+
+  //   it('shallows passes test failure 1', () => {
+  //     const wrapper = shallow(<Activity {...stateFailure1} />)
+  //     expect(wrapper.find('div')).toHaveLength(1)
+  //   })
+
+  //   it('mounts test failure 1', () => {
+  //     const wrapper = mount(<Activity {...stateFailure1} />);
+  //     expect(wrapper.find('AssetGroupEditor')).toHaveLength(1);
+  //   })
+  // })
+})

test/javascript/components/asset_group_components/asset_group.test.js

@@ -0,0 +1,34 @@
+import React, {Fragment} from 'react';
+import ReactDOM from 'react-dom';
+import { shallow, mount } from 'enzyme';
+
+import '../../test_helpers/test_init'
+
+import { buildAssetGroupData } from '../../test_helpers/factories'
+
+import AssetGroup from 'asset_group_components/asset_group';
+
+const NUM_ASSETS = 3
+
+describe('AssetGroup', () => {
+  const stateAssetGroup = {
+    assetGroup: buildAssetGroupData(1,NUM_ASSETS),
+    activityRunning: false,
+    isShown: false,
+    uuidsPendingRemoval: [],
+    dataAssetDisplay: {},
+    onCollapseFacts: null,
+    collapsedFacts: {},
+    onRemoveAssetFromAssetGroup: null,
+    onRemoveAllAssetsFromAssetGroup: null,
+    onErrorMessage: null,
+    onChangeAssetGroup: null,
+    onAddBarcodesToAssetGroup: null
+  }
+
+
+  it('renders the assets from the group', () => {
+    const wrapper = shallow(<AssetGroup {...stateAssetGroup} />);
+    expect(wrapper.find('AssetDisplay')).toHaveLength(NUM_ASSETS);
+  })
+})

test/javascript/components/asset_group_components/asset_group_editor.test.js

@@ -0,0 +1,42 @@
+import React, {Fragment} from 'react';
+import ReactDOM from 'react-dom';
+import { shallow, mount } from 'enzyme';
+
+import '../../test_helpers/test_init'
+
+import { buildAssetGroupData } from '../../test_helpers/factories'
+
+import AssetGroupEditor from 'asset_group_components/asset_group_editor';
+
+describe('AssetGroupEditor', () => {
+  const stateAssetGroup = {
+    assetGroup: buildAssetGroupData(1,3),
+    activityRunning: false,
+    isShown: false,
+    uuidsPendingRemoval: [],
+    dataAssetDisplay: {},
+    onCollapseFacts: null,
+    collapsedFacts: {},
+    onRemoveAssetFromAssetGroup: null,
+    onRemoveAllAssetsFromAssetGroup: null,
+    onErrorMessage: null,
+    onChangeAssetGroup: null,
+    onAddBarcodesToAssetGroup: null
+  }
+
+  it('renders AssetGroupEditor component', () => {
+    const wrapper = shallow(<AssetGroupEditor {...stateAssetGroup} />);
+    expect(wrapper.find('BarcodeReader')).toHaveLength(1);
+  });
+
+  it('renders <AssetGroup />', () => {
+    const wrapper = mount(<AssetGroupEditor {...stateAssetGroup} />);
+    expect(wrapper.find('AssetGroup')).toHaveLength(1);
+  })
+
+  it('renders <BarcodeReader />', () => {
+    const wrapper = mount(<AssetGroupEditor {...stateAssetGroup} />);
+    expect(wrapper.find('BarcodeReader')).toHaveLength(1);
+  })
+
+})

test/javascript/test_helpers/factories.js

@@ -4,8 +4,9 @@ let ASSET_GROUP_ID = 0
 
 const buildEmptyActivityState = () => {
   return {
-    "csrfToken": CSRF_TOKEN,
+    //"csrfToken": CSRF_TOKEN,
     "activity":{
+      "id": "1",
       "activity_type_name":"My activity",
       "instrument_name":"My instrument",
       "kit_name":"A selected kit",
@@ -29,7 +30,7 @@ const buildEmptyActivityState = () => {
 }
 
 const generateAssetGroupId = () => {
-  ASSET_GROUP_ID++
+  return ASSET_GROUP_ID++
 }
 
 const buildAssets = (numAssets) => {
@@ -40,11 +41,17 @@ const buildAssets = (numAssets) => {
   return list
 }
 
+const buildAssetGroupData = (assetGroupId, numAssets) => {
+  return({id: assetGroupId, assets: buildAssets(numAssets),
+    assets_running: [],
+    updateUrl: "http://"+assetGroupId})
+}
+
 const buildAssetGroups = (numGroups, numAssets) => {
   let obj = {}
   for (let i=0; i<numGroups; i++) {
     const assetGroupId = generateAssetGroupId()
-    obj[assetGroupId] = {id: assetGroupId, assets: buildAssets(numAssets), updateUrl: "http://"+assetGroupId}
+    obj[assetGroupId] = buildAssetGroupData(assetGroupId, numAssets)
   }
   return obj
 }
@@ -53,9 +60,9 @@ const buildActivityState = (numGroups, numAssets) => {
   let state = buildEmptyActivityState()
 
   state.assetGroups = buildAssetGroups(numGroups, numAssets)
-  state.selectedAssetGroup = Object.keys(state.assetGroups)[0]
+  state.activity.selectedAssetGroup = Object.keys(state.assetGroups)[0]
 
   return state
 }
 
-export { buildAssets, buildAssetGroups, buildActivityState }
+export { buildAssets, buildAssetGroups, buildActivityState, buildAssetGroupData }

test/javascript/test_helpers/test_init.js

@@ -4,12 +4,25 @@ import $ from 'jquery';
 import Adapter from 'enzyme-adapter-react-16';
 import { configure } from 'enzyme';
 
+const CSRF_TOKEN = "1234"
+
 const testInit = () => {
   global.$ = global.jQuery = $;
   global.React = React;
 
   configure({ adapter: new Adapter() });
   mockWebSockets()
+  mockCsrfToken(CSRF_TOKEN)
+}
+
+const mockCsrfToken = (token) => {
+  const csrfMeta = $('meta[name="csrf-token"]')
+  if (csrfMeta.length == 0) {
+    let meta = document.createElement('meta')
+    meta.setAttribute('name', 'csrf-token')
+    meta.innerHTML = token
+    document.head.appendChild(meta)
+  }
 }
 
 const mockWebSockets = () => {