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

package/project/client/components/middle/test-cases/middle-test-cases-view-test-case.jsx

@@ -0,0 +1,104 @@
+
+'use strict';
+
+import TestCaseStore from '../../../stores/test-case-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import MiddleTestCasesTabDefinition from './tabs/middle-test-cases-tab-definition';
+import MiddleTestCasesTabExecution from './tabs/middle-test-cases-tab-execution';
+import MiddleTestCasesTabDebug from './tabs/middle-test-cases-tab-debug';
+import MiddleTestCasesTabLog from './tabs/middle-test-cases-tab-log';
+import MiddleTestCasesTabSequenceDiagram from './tabs/middle-test-cases-tab-sequence-diagram';
+import MiddleTestCasesTabSpecification from './tabs/middle-test-cases-tab-specification';
+import MiddleTestCasesTabAnalyze from './tabs/middle-test-cases-tab-analyze';
+import { ActionTestCaseGet } from '../../../actions/action-test-case/action-test-case';
+import { ActionTestCasesSetView } from '../../../actions/action-test-cases';
+import Tabs from 'z-abs-complayer-bootstrap-client/client/tabs';
+import Tab from 'z-abs-complayer-bootstrap-client/client/tab';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import HelperTab from 'z-abs-corelayer-client/client/components/helper-tab';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesViewTestCase extends ReactComponentStore {
+  constructor(props) {
+    super(props, [], {
+      activeKey: 0
+    });
+    this.helperTab = new HelperTab(['Definition', 'Execution', 'Log', 'Sequence Diagram', 'Debug', 'Specification', 'Analyze']);
+    if(undefined !== props.tab) {
+      this.state.activeKey = this.helperTab.getIndex(props.tab);
+    }
+  }
+  
+  didMount() {
+    this.dispatch(TestCasesStore, new ActionTestCasesSetView('tc'));
+    if(this.props.repo) {
+      this.dispatch(TestCaseStore, new ActionTestCaseGet(this.props.repo, this.props.sut, this.props.fut, this.props.tc));
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !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.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.state.activeKey, nextState.activeKey);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.props.repo !== prevProps.repo || this.props.sut !== prevProps.sut || this.props.fut !== prevProps.fut || this.props.tc !== prevProps.tc) {
+      this.dispatch(TestCaseStore, new ActionTestCaseGet(this.props.repo, this.props.sut, this.props.fut, this.props.tc));
+    }
+    const nextKey = this.helperTab.getIndex(this.props.tab);
+    if(this.state.activeKey !== nextKey) {
+      this.updateState({activeKey: {$set: nextKey}});
+    }
+  }
+  
+  getTabPath(index) {
+    return `${this.props.tab ? '' : this.props.tc + '/'}${this.helperTab.getRoute(index)}`;
+  }
+  
+  render() {
+    let index = 0;
+    return (
+      <div className="test_case_tabs">
+        <Tabs id="test_case_tabs" activeKey={this.state.activeKey}
+          onSelect={(key) => {
+            if(undefined !== key) {
+              this.context.history(`${this.helperTab.getRoute(key)}`, {replace: true});
+            }
+          }}
+        >
+          <Tab id="test_case_definition" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleTestCasesTabDefinition active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+          <Tab id="test_case_execution" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)} colorMark="execution">
+            <MiddleTestCasesTabExecution active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+          <Tab id="test_case_log" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)} colorMark="log">
+            <MiddleTestCasesTabLog active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+          <Tab id="test_case_sequence_diagram" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)} colorMark="sequence-diagram">
+            <MiddleTestCasesTabSequenceDiagram active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+          <Tab id="test_case_debug" tab={this.getTabPath(index)} className="same_size_as_parent" title={this.helperTab.getTabName(index++)} colorMark="debug">
+            <Route handler={MiddleTestCasesTabDebug} switch={["/:file.:ext", ""]} active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} tab={this.props.tab} />
+          </Tab>
+          <Tab id="test_case_specification" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleTestCasesTabSpecification active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+          <Tab id="test_case_analyze" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleTestCasesTabAnalyze active={index - 1 === this.state.activeKey} sut={this.props.sut} fut={this.props.fut} tc={this.props.tc} repo={this.props.repo} />
+          </Tab>
+        </Tabs>
+      </div>
+    );
+  }
+}
+
+
+MiddleTestCasesViewTestCase.contextType = RouterContext;

package/project/client/components/middle/test-cases/middle-test-cases.jsx

@@ -0,0 +1,59 @@
+
+'use strict';
+
+import MiddleTestCasesToolbar from './middle-test-cases-toolbar';
+import MiddleSidebar from '../middle_sidebar';
+import MiddleTestCasesViewColumns from './middle-test-cases-view-columns';
+import TestCaseStore from '../../../stores/test-case-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import { ActionTestCaseMounted, } from '../../../actions/action-test-case/action-test-case';
+import { ActionSystemUnderTestClear } from '../../../actions/action-system-under-test/action-system-under-test';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCases extends ReactComponentStore {
+  constructor(props) {
+    super(props, [], {
+      name: null
+    });
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: this.state.name ? this.state.name : 'Test Case',
+        prefix: this.state.name ? 'TC: ' : 'ActorJs'
+      };
+    });
+  }
+  
+  didMount() {
+    this.dispatch(TestCaseStore, new ActionTestCaseMounted());
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.name, nextState.name);
+  }
+  
+  willUnmount() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestClear());
+  }
+  
+  render() {
+    return (
+      <div className="middle">
+        <Route switch={["/:sut/:fut/:tc/:tab*", "/:sut/:fut/:tc", "/:sut/:fut", "/:sut", ""]} handler={MiddleTestCasesToolbar} />
+        <MiddleSidebar />
+        <div className="middle_view middle_view_test_cases">
+          <Route switch={["/:sut/:fut/:tc*", "/:sut/:fut", "/:sut", ""]} handler={MiddleTestCasesViewColumns} onTcName={(name) => {
+            this.updateState({name: {$set: name}});
+          }}/>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+MiddleTestCases.contextType = RouterContext;

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

@@ -0,0 +1,289 @@
+
+'use strict';
+
+import LoginStore from '../../../../stores/login-store';
+import TestCaseStore from '../../../../stores/test-case-store';
+import { ActionTestCaseAnalyze, ActionTestCaseAnalyzeClear} from '../../../../actions/action-test-case/action-test-case';
+import ActorsSorting from '../general-helpers/actors-sorting';
+import MiddleTestCasesNotFound from '../middle-test-cases-not-found';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesTabAnalyze extends ReactComponentStore {
+  constructor(props) {
+    super(props, [TestCaseStore, LoginStore]);
+  }
+  
+  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.TestCaseStore.error, nextState.TestCaseStore.error)
+        || !this.shallowCompare(this.state.TestCaseStore.testCase, nextState.TestCaseStore.testCase)
+        || !this.shallowCompare(this.state.TestCaseStore.analyze, nextState.TestCaseStore.analyze)
+        || !this.shallowCompare(this.state.LoginStore.login, nextState.LoginStore.login)
+      );
+  }
+  
+  renderAddressesDescription() {
+    return (
+      <div>
+        <h3>Analyze - Addresses</h3>
+      </div>
+    );
+  }
+  
+  renderActorDependencyAnalyzeRow(index, phase, name, dependencies) {
+    let tdIndex = 0;
+    let formattedDependencies = dependencies.map((dependeny) => {
+      if(-1 === dependeny) {
+        return "phase start";
+      }
+      else {
+        return (dependeny + 1).toString();
+      }
+    });
+    return (
+      <tr>
+        <td key={++tdIndex} className={`test_case_phase_${phase}`}>{index + 1}</td>
+        <td key={++tdIndex} className={`test_case_phase_${phase}`}>{phase}</td>
+        <td key={++tdIndex}>{name}</td>
+        <td key={++tdIndex}>{formattedDependencies.join(', ')}</td>
+      </tr>
+    );
+  }
+  
+  renderActorDependencyAnalyzeRows(actor, index, phase) {
+    const key = `${actor.name}_${index}`;
+    let dependencies = this.state.TestCaseStore.analyze.dependencies.get(key);
+    if(undefined !== dependencies) {
+      return (
+        <React.Fragment key={key}>
+          {this.renderActorDependencyAnalyzeRow(index, phase, actor.name, dependencies.dependencies)}
+        </React.Fragment>
+      );
+    }
+    else {
+      return (
+        <React.Fragment key={key}>
+          {this.renderActorDependencyAnalyzeRow(index, phase, actor.name, [])}
+        </React.Fragment>
+      );
+    }
+  }
+  
+  renderActorDependenciesAnalyzeTable() {
+    const result = ActorsSorting.sortPhase(this.state.TestCaseStore.testCase.tc.actors);
+    const actorRowsPre = result.preRows.map((actorData) => {
+      return this.renderActorDependencyAnalyzeRows(actorData.actor, actorData.index, actorData.phase);
+    });
+    const actorRowsExec = result.execRows.map((actorData) => {
+      return this.renderActorDependencyAnalyzeRows(actorData.actor, actorData.index, actorData.phase);
+    });
+    const actorRowsPost = result.postRows.map((actorData) => {
+      return this.renderActorDependencyAnalyzeRows(actorData.actor, actorData.index, actorData.phase);
+    });    
+    return (
+      <table className="test_case_table">
+        <thead className="">
+          <tr>
+            <th className="">#</th>
+            <th className="">phase</th>
+            <th className="">actor name</th>
+            <th className="">dependency</th>
+          </tr>
+        </thead>  
+        <tbody className="">
+          {actorRowsPre}
+          {actorRowsExec}
+          {actorRowsPost}
+        </tbody>
+      </table>
+    );
+  }
+  
+  renderActorDependenciesAnalyze() {
+    return (
+      <div>
+        <h3>Analyze - Dependencies</h3>
+        {this.renderActorDependenciesAnalyzeTable()}
+      </div>
+    );
+  }
+  
+  renderTestDataAnalyzeColumns(testData) {
+    let index = 1;
+    testData = undefined !== testData ? testData : {
+      result: '',
+      name: '',
+      type: '',
+      depth: 0,
+      value: undefined,
+      layer: '',
+      default: '',
+      raw: undefined,
+      children: []
+    };
+    let resultClass = 'table_header_status';
+    if('ok' === testData.result) {
+      resultClass += ' header_status_success'
+    }
+    else if('' !== testData.result) {
+      resultClass += ' header_status_failure';
+    }
+    return (
+      <>
+        <td key={++index} className={resultClass}>{testData.result}</td>
+        <td key={++index} className={resultClass}>{testData.name}</td>
+        <td key={++index} className={resultClass}>{testData.type}</td>
+        <td key={++index} className={resultClass}>{0 !== testData.depth ? testData.depth : testData.depth}</td>
+        <td key={++index} className={resultClass}>{JSON.stringify(testData.value)}</td>
+        <td key={++index} className={resultClass}>{testData.layer}</td>
+        <td key={++index} className={resultClass}>{testData.default}</td>
+        <td key={++index} className={resultClass}>{JSON.stringify(testData.raw)}</td>
+      </>
+    );
+  }
+  
+  renderTestDataAnalyzeRow(testDatas, actorName) {
+    if(undefined === testDatas) {
+      return null;
+    }
+    return testDatas.map((testData, index) => {
+      return (
+        <tr key={actorName + '_' + (index + 1)}>
+          {this.renderTestDataAnalyzeColumns(testData)}
+        </tr>
+      );
+    });
+  }
+  
+  renderTestDataAnalyzeRows(actor, index) {
+    let testDatas = this.state.TestCaseStore.analyze.testData.get(actor.name);
+    testDatas = undefined !== testDatas ? testDatas : [];
+    let length = 0 < testDatas.length ? testDatas.length : 1;
+    return (
+      <React.Fragment key={actor.name + '_td_' + index}>
+        <tr>
+          <td className="table_header_status" rowSpan={length}>{actor.name}</td>
+          <td className="table_header_status" rowSpan={length}>{actor.type}</td>
+          {this.renderTestDataAnalyzeColumns(0 < testDatas.length ? testDatas[0] : undefined)}
+        </tr>
+        {this.renderTestDataAnalyzeRow(1 < testDatas.length ? testDatas.slice(1) : undefined, actor.name)}
+      </React.Fragment>  
+    );
+  }
+  
+  renderTestDataAnalyzeTable() {
+    let actors = this.state.TestCaseStore.testCase.tc.actors;
+    let actorRows = actors.map((actor, index) => {
+      return this.renderTestDataAnalyzeRows(actor, index);
+    });
+    return (
+      <table className="test_case_table">
+        <thead className="">
+          <tr className="">
+            <th className="" colSpan="2">Actor</th>
+            <th className="" colSpan="7">Test Data</th>
+          </tr>
+          <tr>
+            <th className="">Name</th>
+            <th className="">Type</th>
+            <th className="">Result</th>
+            <th className="">Name</th>
+            <th className="">Type</th>
+            <th className="">Child</th>
+            <th className="">Value</th>
+            <th className="">Layer</th>
+            <th className="">Default</th>
+            <th className="">Raw</th>
+          </tr>
+        </thead>  
+        <tbody className="">
+          {actorRows}
+        </tbody>
+      </table>
+    );
+  }
+  
+  renderTestDataAnalyze() {
+    return (
+      <div>
+        <h3>Analyze - Test Data</h3>
+        {this.renderTestDataAnalyzeTable()}
+      </div>
+    );
+  }
+  
+  renderAnalyzeButton() {
+    return (
+      <ButtonNew id="test_case_analyze_start" colorMark="markup_color" icon="icon-execution-play" size="aj_btn_xs" placement="bottom" heading="Analyze" content="Run"
+        onClick={(e) => {
+          this.dispatch(TestCaseStore, new ActionTestCaseAnalyze(this.props.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance));
+        }}
+      />
+    );
+  }
+  
+  renderAnalyzeClearButton() {
+    return (
+      <ButtonNew id="test_case_analyze_clear" colorMark="markup_color" icon="icon-execution-clear" size="aj_btn_xs" placement="bottom" heading="Analyze" content="Clear"
+        onClick={(e) => {
+          this.dispatch(TestCaseStore, new ActionTestCaseAnalyzeClear());
+        }}
+      />
+    );
+  }
+  
+  renderAnalyzeTime() {
+    if(this.state.TestCaseStore.analyze.time && '' !== this.state.TestCaseStore.analyze.time) {
+      return (
+        <span className="analyze_time">
+          {this.state.TestCaseStore.analyze.time}
+        </span>
+      );
+    }
+  }
+  
+  render() {
+    if(!this.props.active) {
+      return null;
+    }
+    if(this.state.TestCaseStore.error) {
+      return (
+        <div className="test_cases_tab_view">
+          <MiddleTestCasesNotFound 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>
+          <div className="analyze_panel">
+            <div className="toolbar" role="toolbar" aria-label="...">
+              <div className="aj_btn_group" role="group" aria-label="...">
+                {this.renderAnalyzeButton()}
+                {this.renderAnalyzeClearButton()}
+                {this.renderAnalyzeTime()}
+              </div>
+            </div>
+          </div>
+          <div className="test_case_tab_view_with_toolbar">
+            {this.renderTestDataAnalyze()}
+            {this.renderActorDependenciesAnalyze()}
+            {/*this.renderAddressesDescription()*/}
+          </div>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+}