@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/test-cases/tabs/middle-test-cases-tab-sequence-diagram.jsx

@@ -0,0 +1,160 @@
+
+'use strict';
+
+import TestCaseStore from '../../../../stores/test-case-store';
+import LoginStore from '../../../../stores/login-store';
+import MiddleTestCasesNotFound from '../middle-test-cases-not-found';
+import { ActionTestCaseButtonsUpdate } from '../../../../actions/action-test-case/action-test-case';
+import StyleStore from 'z-abs-complayer-markup-client/client/stores/style-store';
+import Const from 'z-abs-complayer-visualizationsequencediagram-client/client/logic/const';
+import SeqDiaFilter from 'z-abs-complayer-visualizationsequencediagram-client/client/logic/seq-dia-filter';
+import RealtimeZoom from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-zoom';
+import RealtimeWidth from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-width';
+import SequenceDiagram from 'z-abs-complayer-visualizationsequencediagram-client/client/react-component/sequence-diagram';
+import RealtimePressDownButton from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-press-down-button';
+import ActorPhaseConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-phase-const';
+import ReactComponentRealtime from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
+import React from 'react';
+
+
+export default class MiddleTestCasesTabSequenceDiagram extends ReactComponentRealtime {
+  constructor(props) {
+    super(props, [TestCaseStore, LoginStore, StyleStore]);
+    this.refZoomDisplay = React.createRef();
+    this.refWidthDisplay = React.createRef();
+    this.refSeqDia = React.createRef();
+    this.refScrollButton = null;
+    this.filter = new SeqDiaFilter();
+    this.filter.init(this.state.TestCaseStore.buttons.sequenceDiagram);
+    this.cbIsRealtime = () => {
+      return this.state.TestCaseStore.execution !== TestCaseStore.EXECUTION_NOT_RUNNING;
+    };
+  }
+  
+  static SHOW_HIDE = ['Show', 'Hide'];
+  
+  didMount() {
+    this.refSeqDia.current.active(this.props.active);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.active, nextProps.active)
+      || !this.shallowCompare(this.props.repo, nextProps.repo)
+      || !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.props.fut, nextProps.fut)
+      || !this.shallowCompare(this.props.tc, nextProps.tc)
+      || !this.shallowCompare(this.state.TestCaseStore.error, nextState.TestCaseStore.error)
+      || !this.shallowCompare(this.state.TestCaseStore.testCase, nextState.TestCaseStore.testCase)
+      || !this.shallowCompare(this.state.TestCaseStore.buttonsLoaded, nextState.TestCaseStore.buttonsLoaded)
+      || !this.shallowCompare(this.state.TestCaseStore.buttons.sequenceDiagram, nextState.TestCaseStore.buttons.sequenceDiagram)
+      || !this.shallowCompare(this.state.LoginStore.login.systemUnderTest, nextState.LoginStore.login.systemUnderTest)
+      || !this.shallowCompare(this.state.StyleStore.stackStyles, nextState.StyleStore.stackStyles);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    this.refSeqDia.current.active(this.props.active);
+  }
+  
+  realtimeUpdate(nextProps, nextState) {
+    this.refSeqDia.current.active(nextProps.active);
+  }
+  
+  _fireButtonAction(valueName, value, rt) {
+    this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('sequenceDiagram', valueName, value));
+    if(this.cbIsRealtime()) {
+      this.renderRealtime(() => {
+        rt();
+      });
+    }
+  }
+  
+  render() {
+    if(this.state.TestCaseStore.error) {
+      return (
+        <div className="test_cases_tab_view">
+          <MiddleTestCasesNotFound code={this.state.TestCaseStore.error.code} error={this.state.TestCaseStore.error} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+        </div>
+      );
+    }
+    else {
+      const stateSequenceDiagram = this.state.TestCaseStore.buttons.sequenceDiagram;
+      return (
+        <>
+          <div className="seq_dia_panel">
+            <div className="seq_dia_panel_inner btn-toolbar" role="toolbar" aria-label="...">
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimeZoom zoom={stateSequenceDiagram.zoom} colorMark="zoom_events" 
+                  onAction={(zoom) => {
+                    this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('sequenceDiagram', 'zoom', zoom));
+                  }}
+                />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimeWidth width={stateSequenceDiagram.width} colorMark="zoom_events" 
+                  onAction={(width) => {
+                    this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('sequenceDiagram', 'width', width));
+                  }}
+                />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.scroll} icon={'icon-scroll-auto'} toolTipContent={['On', 'Off']} toolTipHeading="Auto scroll"
+                  onLoad={(e) => {
+                    this.refScrollButton = e;
+                  }}
+                  onAction={this._fireButtonAction.bind(this, 'scroll')}
+                />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.executedStateEvents} icon={'icon-state-event-executed'} toolTipContent="Executed State Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'executedStateEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.notExecutedStateEvents} icon={'icon-state-event-not-executed'} toolTipContent="Not Executed State Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'notExecutedStateEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.messageDetailEvents} icon={'icon-con-message-events'} colorMark="" toolTipContent="Message Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'messageDetailEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.connectionEvents} icon={'icon-con-connection-events'} colorMark="" toolTipContent="Connection Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'connectionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.serverEvents} icon={'icon-con-server-events'} colorMark="" toolTipContent="Server Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'serverEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.messageEvents} icon={'icon-con-messages'} colorMark="" toolTipContent="Messages" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'messageEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolData} icon={'icon-communication'} colorMark="" toolTipContent="Communication Data" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolAddressNameData} icon={'icon-communication-address'} colorMark="" toolTipContent="Communication Address" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolAddressNameData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolIpData} icon={'icon-communication-ip'} colorMark="" toolTipContent="Communication Ip" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolIpData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolTransportData} icon={'icon-communication-transport'} colorMark="" toolTipContent="Communication Transport" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolTransportData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolInfoData} icon={'icon-communication-info'} colorMark="" toolTipContent="Communication Info" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolInfoData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolInstanceData} icon={'icon-communication-instance'} colorMark="" toolTipContent="Communication Instance" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolInstanceData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolNameData} icon={'icon-communication-stack'} colorMark="" toolTipContent="Communication Stack" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolNameData')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackEvents} icon={'icon-stack-events'} toolTipContent="Stack Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackInfoEvents} icon={'icon-stack-event-info'} toolTipContent="Stack Info" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackInfoEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackInstanceEvents} icon={'icon-stack-event-instance'} toolTipContent="Stack Instance" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackInstanceEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackProtocolEvents} icon={'icon-stack-event-stack'} toolTipContent="Stack name" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackProtocolEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiEvents} icon={'icon-gui-events'} toolTipContent="GUI Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiObjectEvents} icon={'icon-gui-event-object'} toolTipContent="GUI Object" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiObjectEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiActionEvents} icon={'icon-gui-event-action'} toolTipContent="GUI Actions" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiActionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiFunctionEvents} icon={'icon-gui-event-function'} toolTipContent="GUI Function" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiFunctionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiInfoData} icon={'icon-gui-event-info'} toolTipContent="GUI Info" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiInfoData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiInstanceData} icon={'icon-gui-event-instance'} toolTipContent="GUI Instance" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiInstanceData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiProtocolData} icon={'icon-gui-event-stack'} toolTipContent="GUI Stack name" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiProtocolData')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" name="Data" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-data'} buttonIndex={ActorPhaseConst.DATA} toolTipContent="Data Phase Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Precondition" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-precondition'} buttonIndex={ActorPhaseConst.PRE} toolTipContent="Precondition Phase Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Execution" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-execution'} buttonIndex={ActorPhaseConst.EXEC} toolTipContent="Execution Phase Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Postcondition" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-postcondition'} buttonIndex={ActorPhaseConst.POST} toolTipContent="Postcondition Phase Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="None" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-none'} buttonIndex={ActorPhaseConst.NONE} toolTipContent="None Phase Events" toolTipHeading={MiddleTestCasesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+              </div>
+            </div>
+          </div>
+          <SequenceDiagram ref={this.refSeqDia} filter={this.filter} name="test-case-seq-dia" clearMsgPrefix="TestCase" store={TestCaseStore} storeName="TestCaseStore" buttonsLoaded={this.state.TestCaseStore.buttonsLoaded} stackStyles={this.state.StyleStore.stackStyles} testCase={this.state.TestCaseStore.testCase} systemUnderTest={this.state.LoginStore.login.systemUnderTest}
+            onOnit={() => {}}
+            onAutoScroll={(autoScroll) => {
+              this.refScrollButton.click();
+            }}
+          />
+        </>
+      );
+    }
+  }
+}

package/project/client/components/middle/test-cases/tabs/middle-test-cases-tab-specification.jsx

@@ -0,0 +1,472 @@
+
+'use strict';
+
+import TestCaseStore from '../../../../stores/test-case-store';
+import TestCaseStores from '../../../../stores/test-cases-store';
+import MiddleTestCasesNotFound from '../middle-test-cases-not-found';
+import { ActionTestCaseSpecificationMarkup, ActionTestCaseSpecificationMarkupChange, ActionTestCaseSpecificationMarkupCancel, ActionTestCaseSpecificationMarkupSave } from '../../../../actions/action-test-case/action-test-case';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import Button from 'z-abs-complayer-bootstrap-client/client/button';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ScrollData from 'z-abs-complayer-markup-client/client/react-components/helper/scroll-data';
+import ComponentDocument from 'z-abs-complayer-markup-client/client/react-components/markup/component-document';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesTabSpecification extends ReactComponentStore {
+  constructor(props) {
+    super(props, [TestCaseStore, TestCaseStores], {
+      autoScroll: true,
+      breaks: false,
+      whiteSpaceClass: 'no_word_wrap',
+      documentationOrder: true
+    });
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.boundKeyUp = this._keyUp.bind(this);
+    this.ctrlKey = false;
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+    this.refDocumentDiv = React.createRef();
+    this.refDocumentComponentDocument = React.createRef();
+    this.refPreviewDiv = React.createRef();
+    this.refPreviewComponentDocument = React.createRef();
+    this.refMarkupComponentMarkedTextarea = React.createRef();
+    this.scrollData = new ScrollData();
+  }
+  
+  didMount() {
+    //window.addEventListener('keydown', this.boundKeyDown, true);
+    //window.addEventListener('keyup', this.boundKeyUp, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return nextProps.active
+      && (
+        !this.shallowCompare(this.props.active, nextProps.active)
+        || !this.shallowCompare(this.props.repo, nextProps.repo)
+        || !this.shallowCompare(this.props.sut, nextProps.sut)
+        || !this.shallowCompare(this.props.fut, nextProps.fut)
+        || !this.shallowCompare(this.props.tc, nextProps.tc)
+        || !this.shallowCompare(this.state.breaks, nextState.breaks)
+        || !this.shallowCompare(this.state.whiteSpaceClass, nextState.whiteSpaceClass)
+        || !this.shallowCompare(this.state.documentationOrder, nextState.documentationOrder)
+        || !this.shallowCompare(this.state.TestCasesStore, nextState.TestCasesStore)
+        || !this.shallowCompare(this.state.TestCaseStore.error, nextState.TestCaseStore.error)
+        || !this.shallowCompare(this.state.TestCaseStore.testCase, nextState.TestCaseStore.testCase)
+        || !this.shallowCompare(this.state.TestCaseStore.specification, nextState.TestCaseStore.specification)
+      );
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.state.TestCaseStore.specification.definition) {
+      if(!prevState.TestCaseStore.specification.definition || this.state.documentationOrder !== prevState.documentationOrder) {
+        const lines = this.state.TestCaseStore.specification.contentLines;
+        const lineHeight = this.refMarkupComponentMarkedTextarea.current.refTextArea.current.scrollHeight / lines;
+        const visibleLines = this.refMarkupComponentMarkedTextarea.current.refTextArea.current.clientHeight / lineHeight;
+        this.scrollData.setLength(Math.floor(lines - visibleLines));
+        this.refPreviewComponentDocument.current.scroll(this.scrollData);
+        this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+      }
+      else {
+        const lineDelta = this.state.TestCaseStore.specification.contentLines - prevState.TestCaseStore.specification.contentLines;
+        if(0 !== lineDelta) {
+          this.scrollData.stepLines(lineDelta);
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }
+      }
+    }
+    else {
+      if(null !== this.refDocumentComponentDocument.current) {
+        this.refDocumentComponentDocument.current.scroll(this.scrollData);
+      }
+    }
+  }
+  
+  willUnmount() {
+    //window.removeEventListener('keyup', this.boundKeyUp, true);
+    //window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey) {
+      this.ctrlKey = true;
+    }
+    if(e.ctrlKey && 'o' === e.key) {
+      if(!this.markupDisabledOpen) {
+        e.preventDefault();
+        this._markupOpen();
+      }
+    }
+    else if(e.ctrlKey && '?' === e.key) {
+      if(!this.markupDisabledHelp) {
+        e.preventDefault();
+        this._markupHelp();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      if(!this.markupDisabledCancel) {
+        e.preventDefault();
+        this._markupCancel();
+      }
+    }
+    else if(e.ctrlKey && 's' === e.key) {
+      if(!this.markupDisabledSave) {
+        e.preventDefault();
+        this._markupSave();
+      }
+    }
+  }
+  
+  _keyUp(e) {
+    if(!e.ctrlKey) {
+      this.ctrlKey = false;
+    }
+  }
+  
+  renderMarkupEditButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_specification_markup_open" icon="icon-markup-open" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" disabled={this.state.TestCaseStore.specification.definition}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseSpecificationMarkup());
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupSaveButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_specification_markup_save" icon="icon-markup-save" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Save" content="Markup"disabled={this.state.TestCaseStore.specification.content === this.state.TestCaseStore.testCase.tc.specification}
+          onClick={(e) => {
+           this.dispatch(TestCaseStore, new ActionTestCaseSpecificationMarkupSave(this.props.repo, this.props.sut, this.props.fut, this.props.tc, this.state.TestCaseStore.specification.content));
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupCloseButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_specification_markup_close" icon="icon-markup-close" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" disabled={!this.state.TestCaseStore.specification.definition}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseSpecificationMarkupCancel());
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupHelpButton() {
+    return (
+      <ButtonNew id="test_case_specification_markup_help" icon="icon-markup-help" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" disabled={this.state.TestCaseStore.specification.definition}
+        onClick={(e) => {
+        }}
+      />
+    );
+  }
+  
+  renderHorizontalOrVerticalButton() {
+    let toolTipInstruction;
+    let image1Style;
+    let image2Style;
+    if(this.state.documentationOrder) {
+      toolTipInstruction = 'Vertical';
+      image1Style = {top:'7px',left:'0px',transform:'scale(0.91, 0.67)'};
+      image2Style = {width:'0px',top:'-2px',left:'-11px',transform:'scale(0.91, 0.67)'};
+    }
+    else {
+      toolTipInstruction = 'Horizontal';
+      image1Style = {top:'2px',left:'-6px',transform:'scale(0.91, 0.67)'};
+      image2Style = {width:'0px',top:'2px',left:'-6px',transform:'scale(0.91, 0.67)'};
+    }
+    return (
+      <ButtonNew id="tc_specification_align" icon="icon-align" size="aj_btn_xs" colorMark="markup_color" active={this.state.documentationOrder} placement="bottom" heading={`${toolTipInstruction}`} content="Document Order" disabled={!this.state.TestCaseStore.specification.definition}
+        onClick={(e) => {
+          this.updateState({
+            documentationOrder: {$set: !this.state.documentationOrder}
+          });
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollFirstLine() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_first_line" colorMark="markup_color" icon="icon-line-first" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="First line" disabled={disabled} sticky
+        onClick={(e) => {
+          this.scrollData.setLineFirst();
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollPreviousBlock() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_previous_block" colorMark="markup_color" icon="icon-line-previous-block" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="Previous block" disabled={disabled} sticky
+        onClick={(e) => {
+          this.refPreviewComponentDocument.current.calculateObject(this.scrollData, 'previous_block');
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollPreviousLine() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_previous_line" colorMark="markup_color" icon="icon-line-previous-line" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="Previous line" disabled={disabled} sticky
+        onClick={(e) => {
+          this.scrollData.decrement();
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollNextLine() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_next_line" colorMark="markup_color" icon="icon-line-next-line" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="Next line" disabled={disabled} sticky
+        onClick={(e) => {
+          this.scrollData.increment();
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollNextBlock() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_next_block" colorMark="markup_color" icon="icon-line-next-block" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="Next block" disabled={disabled} sticky
+        onClick={(e) => {
+          this.refPreviewComponentDocument.current.calculateObject(this.scrollData, 'next_block');
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkupScrollEndLine() {
+    const disabled = !this.state.autoScroll;
+    return (
+      <ButtonNew id="tc_specifiction_lase_line" colorMark="markup_color" icon="icon-line-last" size="aj_btn_xs" type="transparent" placement="bottom" heading="Goto" content="Last line" disabled={disabled} sticky
+        onClick={(e) => {
+          this.scrollData.setLineLast();
+          this.refPreviewComponentDocument.current.scroll(this.scrollData);
+          this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+        }}
+      />
+    );
+  }
+  
+  renderSpecificationMarkup() {
+    return (
+      <div className={`markup_filter_${this.state.documentationOrder ? 'horizontal' : 'vertical'}_2`}>
+        <div className="test_cases_group">
+          <div className="markup_heading">
+            <p className="test_cases_specification">Specification - Markup</p>
+            <p className="markup_checkbox">
+              auto-scroll:
+            </p>
+            <input type="checkbox" id="test_cases_specification_markup_auto-scroll" className="markup_checkbox" aria-label="..." autoComplete="off" checked={this.state.autoScroll}
+              onChange={(e) => {
+                if(this.state.autoScroll) {
+                  this.updateState({
+                    autoScroll: {$set: false}
+                  });
+                }
+                else {
+                  this.updateState({
+                    autoScroll: {$set: true}
+                  });
+                }
+              }}
+              />
+            <p className="markup_checkbox">
+              breaks:
+            </p>
+            <input type="checkbox" id="test_cases_specification_markup_breaks" className="markup_checkbox" aria-label="..." autoComplete="off" checked={this.state.breaks}
+              onChange={(e) => {
+                if(this.state.breaks) {
+                  this.updateState({
+                    breaks: {$set: false},
+                    whiteSpaceClass: {$set: 'no_word_wrap'}
+                  });
+                }
+                else {
+                  this.updateState({
+                    breaks: {$set: true},
+                    whiteSpaceClass: {$set: 'word_wrap'}
+                  });
+                }
+              }}
+            />
+            <div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                {this.renderSpecificationMarkupScrollFirstLine()}
+                {this.renderSpecificationMarkupScrollPreviousBlock()}
+                {this.renderSpecificationMarkupScrollPreviousLine()}
+                {this.renderSpecificationMarkupScrollNextLine()}
+                {this.renderSpecificationMarkupScrollNextBlock()}
+                {this.renderSpecificationMarkupScrollEndLine()}
+              </div>
+            </div>      
+          </div>
+          <ComponentMarkedTextarea ref={this.refMarkupComponentMarkedTextarea} id="test_cases_specification_markup_textarea" className={this.state.whiteSpaceClass + " form-control content_definition"} rows="10" value={this.state.TestCaseStore.specification.content}
+            onScroll={(e) => {
+              const lines = this.state.TestCaseStore.specification.contentLines;
+              const scrollLines = (e.target.scrollHeight - e.target.clientHeight) / e.target.scrollHeight * lines;
+              const scrollLine = e.target.scrollTop / (e.target.scrollHeight - e.target.clientHeight) * scrollLines;
+              const line = Math.floor(scrollLine);
+              this.scrollData.setLine(line, scrollLine - line);
+              if(this.state.autoScroll) {
+                this.refPreviewComponentDocument.current.scroll(this.scrollData);
+              }
+            }}
+            onChange={(value) => {
+              this.dispatch(TestCaseStore, new ActionTestCaseSpecificationMarkupChange(value));
+            }}
+            />
+        </div>
+      </div>
+    );
+  }
+  
+  renderSpecificationPreview() {
+    const storeState = this.state.TestCaseStore.specification.documentationPreview;
+    const lines = this.state.TestCaseStore.specification.contentLines;
+    return (
+      <div className={`markup_filter_${this.state.documentationOrder ? 'horizontal' : 'vertical'}_2`}>
+        <div className="test_cases_group">
+          <div className="markup_heading">
+            <p className="test_cases_specification">Specification - Preview</p>
+          </div>
+          <div ref={this.refPreviewDiv} id="test_cases_specification_markup_preview" className="test_cases_specification_preview"
+            onScroll={(e) => {
+              this.scrollData.setScroll(e.target.scrollTop);
+            }}
+            >
+            <div className="doc_nav_preview_middle">
+              <div className="doc_nav_preview_inner"
+                onMouseUp={(e) => {
+                  if(this.ctrlKey) {
+                    this.scrollData.setScroll(e.target.offsetTop);
+                    this.refPreviewComponentDocument.current.calculateTop(this.scrollData);
+                    this.refPreviewComponentDocument.current.scroll( this.scrollData);
+                    this.refMarkupComponentMarkedTextarea.current.scroll(this.scrollData);
+                  }
+                }}
+                >
+                <ComponentDocument ref={this.refPreviewComponentDocument} preview lines={lines} document={storeState.document}
+                  onEditorScroll={(top) => {
+                    this.refPreviewDiv.current.scrollTop = top;
+                  }}
+                  />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
+  renderSpecification() {
+    if(this.state.TestCaseStore.specification.definition) {
+      return (
+        <div className="test_cases_tab_view_inner">
+          {this.renderSpecificationMarkup()}
+          {this.renderSpecificationPreview()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div ref={this.refDocumentDiv} className="test_cases_tab_view_inner"
+          onScroll={(e) => {
+            this.scrollData.setScroll(e.target.scrollTop);
+          }}
+        >
+        <ComponentDocument ref={this.refDocumentComponentDocument} document={this.state.TestCaseStore.specification.document}
+          onEditorScroll={(top) => {
+            this.refDocumentDiv.current.scrollTop = top;
+          }}
+        />
+        </div>
+      );
+    }
+  }
+  
+  renderDescription() {
+    return (
+      <div className="test_cases_specification_description">
+        <h3 className="test_cases_specification">Test Case:&#160;</h3>
+        <h3 className="test_cases_specification_sut">{this.state.TestCaseStore.testCase.name}</h3>
+        <p className="test_cases_specification_data_last">Description:&#160;</p>
+        <p>{this.state.TestCaseStore.testCase.description}</p>
+        <p className="test_cases_specification_data_last">Requirements:&#160;</p>
+        <p>RQ_00001,&nbsp;RQ_00002</p>
+      </div>
+    );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="test_cases_specification_markup">
+        <div className="test_cases_markup_panel">
+          <div className="toolbar" role="toolbar" aria-label="...">
+            <div className="aj_btn_group" role="group" aria-label="...">
+              {this.renderMarkupEditButton()}
+              {this.renderMarkupSaveButton()}
+              {this.renderMarkupHelpButton()}
+              {this.renderMarkupCloseButton()}
+            </div>
+            <div className="aj_btn_group" role="group" aria-label="...">
+              {this.renderHorizontalOrVerticalButton()}
+            </div>
+          </div>
+        </div>
+        {this.renderSpecification()}
+      </div>
+    );
+  }
+  
+  render() {
+    if(!this.props.active) {
+      return null;
+    }
+    if(this.state.TestCaseStore.error) {
+      return (
+        <div className="test_cases_tab_view">
+          <MiddleTestCasesNotFound code={this.state.TestCaseStore.error.code} error={this.state.TestCaseStore.error} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+        </div>
+      );
+    }
+    else if(this.state.TestCaseStore.testCase) {
+      return (
+        <div className="test_cases_tab_view test_cases_tab_view_specification_outer">
+          {this.renderDescription()}
+          {this.renderMarkup()} 
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+}