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

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

@@ -0,0 +1,222 @@
+
+'use strict';
+
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import TestCaseStore from '../../../stores/test-case-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import MiddleTestCasesViewRecent from './middle-test-cases-view-recent';
+import MiddleTestCasesViewSut from './middle-test-cases-view-sut';
+import MiddleTestCasesViewFut from './middle-test-cases-view-fut';
+import MiddleTestCasesViewTc from './middle-test-cases-view-tc';
+import MiddleTestCasesViewTestCase from './middle-test-cases-view-test-case';
+import { ActionSystemUnderTestSet } from '../../../actions/action-system-under-test/action-system-under-test';
+import { ActionTestCasesSetView } from '../../../actions/action-test-cases';
+import MiddleNotFound from '../middle-not-found';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ComponentBreadcrump from 'z-abs-complayer-bootstrap-client/client/breadcrump';
+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 MiddleTestCasesViewColumns extends ReactComponentStore {
+  constructor(props) {
+    super(props, [TestCaseStore, SystemUnderTestStore]);
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.scrollRecent = 0;
+    this.scrollFut = 0;
+    this.scrollSut = 0;
+    this.scrollTc = 0;
+  }
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+    this.setView();
+    if(this.props.onTcName && this.props.tc) {
+      this.props.onTcName(this.props.tc);
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.props.fut, nextProps.fut)
+      || !this.shallowCompare(this.props.tc, nextProps.tc)
+      || this.state.TestCaseStore.markup.definition !== nextState.TestCaseStore.markup.definition
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests);
+  }
+  
+  didUpdate(prevProps) {
+    this.setView();
+    if(this.props.tc !== prevProps.tc) {
+      this.props.onTcName(this.props.tc);
+    }
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _keyDown(e) {
+    if(e.altKey && 'c' === e.key && !this._disabledCopy()) {
+      e.preventDefault();
+      this._copyMarkupName(e);      
+    }
+  }
+  
+  setView() {
+    if(this.props.tc) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+      this.dispatch(TestCasesStore, new ActionTestCasesSetView('tc'));
+    }
+    else if(this.props.fut) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+      this.dispatch(TestCasesStore, new ActionTestCasesSetView('fut'));
+    }
+    else if(this.props.sut) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(null));
+      this.dispatch(TestCasesStore, new ActionTestCasesSetView('sut'));
+    }
+    else {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(null));
+      this.dispatch(TestCasesStore, new ActionTestCasesSetView('none'));
+    }
+  }
+  
+  renderTestCases() {
+    return (
+      <div className="test_case_columns">
+        <MiddleTestCasesViewRecent  />
+        <MiddleTestCasesViewSut />
+      </div>
+    );
+  }
+  
+  renderTestCasesSut(repo) {
+    return (
+      <div className="test_case_columns">
+        <MiddleTestCasesViewRecent />
+        <MiddleTestCasesViewSut />
+        <MiddleTestCasesViewFut repo={repo} sut={this.props.sut} />
+      </div>
+    );
+  }
+  
+  renderTestCasesFut(repo) {
+    return (
+      <div className="test_case_columns">
+        <MiddleTestCasesViewRecent scroll={this.scrollRecent}
+          onRestoreData={(scrollTop) => {
+            this.scrollRecent = scrollTop;
+          }}
+        />
+        <MiddleTestCasesViewSut scroll={this.scrollSut}
+          onRestoreData={(scrollTop) => {
+            this.scrollSut = scrollTop;
+          }}
+        />
+        <MiddleTestCasesViewFut repo={repo} sut={this.props.sut} scroll={this.scrollFut}
+          onRestoreData={(scrollTop) => {
+            this.scrollFut = scrollTop;
+          }}
+        />
+        <MiddleTestCasesViewTc repo={repo} sut={this.props.sut} fut={this.props.fut} scroll={this.scrollTc}
+          onRestoreData={(scrollTop) => {
+            this.scrollTc = scrollTop;
+          }}
+        />
+      </div>
+    );
+  }
+  
+  renderTestCasesTc(repo) {
+    return (
+      <Route switch={["/:tab*", ""]} sut={this.props.sut} fut={this.props.fut} repo={repo} tc={this.props.tc} handler={MiddleTestCasesViewTestCase} />
+    );
+  }
+  
+  renderColumns() {
+    const sut = !this.props.sut ? undefined : this.state.SystemUnderTestStore.systemUnderTests.find((sut) => {
+      return sut.name === this.props.sut;
+    });
+    const repo = sut ? sut.repo : undefined;
+    if(this.props.tc) {
+      return this.renderTestCasesTc(repo);
+    }
+    else if(this.props.fut) {
+      return this.renderTestCasesFut(repo);
+    }
+    else if(this.props.sut) {
+      return this.renderTestCasesSut(repo);
+    }
+    else {
+      return this.renderTestCases();
+    }
+  }
+  
+  _getTestCaseFullName() {
+    let testCaseFullName = 'tc';
+    if(this.props.sut) {
+      testCaseFullName += `.${this.props.sut}`;
+    }
+    if(this.props.fut) {
+      testCaseFullName += `.${this.props.fut}`;
+    }
+    if(this.props.tc) {
+      testCaseFullName += `.${this.props.tc}`;
+    }
+    return testCaseFullName;
+  }
+  
+  renderTestCaseFullName() {
+    return (
+      <div className="bootstrap_breadcrump_full_name">
+        {'Markup name: ' + this._getTestCaseFullName()}   
+      </div>
+    );
+  }
+  
+  _copyMarkupName(e) {
+    navigator.clipboard.writeText(this._getTestCaseFullName()).then(() => {
+      /* clipboard successfully set */
+    }, () => {
+      /* clipboard write failed */
+    });
+  }
+  
+  _disabledCopy() {
+    return this.state.TestCaseStore.markup.definition;
+  }
+  
+  renderCopyButton() {
+    return (
+      <ButtonNew icon="icon-markup-copy" colorMark="markup_color" size="aj_btn_xs" placement="bottom" heading="Copy" content="Markup name" shortcut="Alt+c" disabled={this._disabledCopy()}
+        onClick={(e) => {
+          this._copyMarkupName(e);
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="same_size_as_parent">
+        <div className="test_case_breadcrump">
+          <ComponentBreadcrump items={[
+            {name: 'Test Cases', link: ''},
+            {name: this.props.sut, link: `${this.props.sut}`},
+            {name: this.props.fut, link: `${this.props.sut}/${this.props.fut}`},
+            {name: this.props.tc, link: `${this.props.sut}/${this.props.fut}/${this.props.tc}`}
+          ]}/>
+          <div className="bootstrap_breadcrump_full_name">
+            {'-'}   
+          </div>
+          <div className="aj_btn_group" style={{marginLeft:'8px'}} role="group" aria-label="...">
+            {this.renderCopyButton()}
+          </div>
+          {this.renderTestCaseFullName()}
+        </div>
+        {this.renderColumns()}
+      </div>
+    ); 
+  }
+}

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

@@ -0,0 +1,105 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import FunctionUnderTestStore from '../../../stores/function-under-test-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import { ActionTestCasesFutChecked, ActionTestCasesFutClear } from '../../../actions/action-test-cases';
+import { ActionFunctionUnderTestGet } from '../../../actions/action-function-under-test';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesViewFut extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, FunctionUnderTestStore, TestCasesStore]);
+    this.refFut = React.createRef();
+  }
+  
+  didMount() {
+    if(this.props.repo) {
+      this.dispatch(FunctionUnderTestStore, new ActionFunctionUnderTestGet(this.props.repo, this.props.sut));
+    }
+    if(this.props.scroll) {
+      this.refFut.current.scrollTop = this.props.scroll;
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.repo, nextProps.repo)
+      || !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompareArrayValues(this.state.FunctionUnderTestStore.functionUnderTests, nextState.FunctionUnderTestStore.functionUnderTests)
+      || !this.shallowCompareMapValues(this.state.TestCasesStore.functionUnderTestsChecked, nextState.TestCasesStore.functionUnderTestsChecked);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.props.repo && (this.props.repo !== prevProps.repo || this.props.sut !== prevProps.sut)) {
+      this.dispatch(FunctionUnderTestStore, new ActionFunctionUnderTestGet(this.props.repo, this.props.sut));
+      this.dispatch(TestCasesStore, new ActionTestCasesFutClear());
+    }
+  }
+  
+  willUnmount() {
+    this.dispatch(TestCasesStore, new ActionTestCasesFutClear());
+    this.props.onRestoreData && this.props.onRestoreData(this.refFut.current.scrollTop);
+  }
+  
+  renderCheckbox(futName) {
+    return (
+      <input type="checkbox" id={`test_cases_input_checkbox_fut_${futName}`} aria-label="..." autoComplete="off" checked={this.state.TestCasesStore.functionUnderTestsChecked.has(futName)}
+        onChange={(e) => {
+          this.dispatch(TestCasesStore, new ActionTestCasesFutChecked(this.props.repo, this.props.sut, futName, e.currentTarget.checked));
+        }}
+      />
+    );
+  }
+  
+  renderFunctionUnderTestRows() {
+    const functionUnderTestRows = this.state.FunctionUnderTestStore.functionUnderTests.map((fut, i) => {
+    return (
+      <tr key={`tc:fut_${this.props.sut}/${fut.name}`}>
+        <th scope="row">{i + 1}</th>
+        <td>{this.renderCheckbox(fut.name)}</td>
+        <td>
+          <Link className="test_case_link" href={`/${this.props.sut}/${fut.name}`}>
+            {fut.name}
+          </Link>
+        </td>
+      </tr>)
+    })
+  	return functionUnderTestRows;
+  }
+  
+  render() {
+    return (
+      <div ref={this.refFut} className="test_case_column">      
+        <div className="test_cases_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">
+                [
+                <Link className="test_case_link" href={`/${this.props.sut}`}>
+                  {this.props.sut}
+                </Link>
+                ]&nbsp;- Fut
+              </h3>
+            </div>
+            <table id="tc_fut_table" className="table test_cases_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th></th>
+                  <th>Name</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderFunctionUnderTestRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,74 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import TestCaseStore from '../../../stores/test-case-store';
+import { ActionTestCaseRecentGet } from '../../../actions/action-test-case/action-test-case';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesViewRecent extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, TestCaseStore]);
+    this.refRecent = React.createRef();
+  }
+  
+  didMount() {
+    this.dispatch(TestCaseStore, new ActionTestCaseRecentGet());
+    if(this.props.scroll) {
+      this.refRecent.current.scrollTop = this.props.scroll;
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.TestCaseStore.recentTestCases, nextState.TestCaseStore.recentTestCases);
+  }
+    
+  willUnmount() {
+    this.props.onRestoreData && this.props.onRestoreData(this.refRecent.current.scrollTop);
+  }
+  
+  renderRecentTestCasesRows() {
+    let recentTestCasesRows = this.state.TestCaseStore.recentTestCases.map((recentTc, i) => {
+    return (
+      <tr key={`tc.${recentTc.sut}.${recentTc.fut}.${recentTc.tc}`}>
+        <th scope="row">{i + 1}</th>    
+        <td>
+          <Link className="test_case_link" href={`/${recentTc.sut}/${recentTc.fut}/${recentTc.tc}`}>
+            {`tc.${recentTc.sut}.${recentTc.fut}.${recentTc.tc}`}
+          </Link>
+        </td>
+        <td>{recentTc.repo}</td>
+      </tr>)
+    })
+  	return recentTestCasesRows;
+  }
+  
+  render() {
+    return (
+      <div ref={this.refRecent} className="test_case_column">
+        <div className="test_cases_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">Recent</h3>
+            </div>
+            <table id="tc_recent_table" className="table test_cases_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Name</th>
+                  <th>Repo</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderRecentTestCasesRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,98 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import { ActionTestCasesSutChecked, ActionTestCasesSutClear } from '../../../actions/action-test-cases';
+import { ActionSystemUnderTestGet } from '../../../actions/action-system-under-test/action-system-under-test';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesViewSut extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, SystemUnderTestStore, TestCasesStore]);
+    this.refSut = React.createRef();
+  }
+  
+  didMount() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestGet());
+    if(this.props.scroll) {
+      this.refSut.current.scrollTop = this.props.scroll;
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return this.state.FilterStore !== nextState.FilterStore
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests)
+      || !this.shallowCompareMapValues(this.state.TestCasesStore.systemUnderTestsChecked, nextState.TestCasesStore.systemUnderTestsChecked);
+  }
+  
+  willUnmount() {
+    this.dispatch(TestCasesStore, new ActionTestCasesSutClear());
+    this.props.onRestoreData && this.props.onRestoreData(this.refSut.current.scrollTop);
+  }
+  
+  renderCheckbox(sut) {
+    if('Global' === sut.repo && 'Actor' === sut.name) {
+      return;
+    }
+    else {
+      return (
+        <input type="checkbox" id={`test_cases_input_checkbox_sut_${sut.name}`} aria-label="..." autoComplete="off" checked={this.state.TestCasesStore.systemUnderTestsChecked.has(sut.name)}
+          onChange={(e) => {
+            this.dispatch(TestCasesStore, new ActionTestCasesSutChecked(sut, e.currentTarget.checked));
+          }}
+        />
+      );
+    }
+  }
+  
+  renderSystemUnderTestRows() {
+    if('*' === this.state.FilterStore.sut) {
+      return this.state.SystemUnderTestStore.systemUnderTests.map((sut, i) => {
+        return (
+          <tr key={`tc:sut_${sut.name}`}>
+            <th scope="row">{i + 1}</th>    
+            <td>{this.renderCheckbox(sut)}</td>
+            <td>
+               <Link className="test_case_link" href={`/${sut.name}`}>
+                {sut.name}
+              </Link>
+            </td>
+            <td>{sut.repo}</td>
+          </tr>
+        );
+      });
+    }
+  }
+  
+  render() {
+    return (
+      <div ref={this.refSut} className="test_case_column">
+        <div className="test_cases_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">Sut</h3>
+            </div>
+            <table id="tc_sut_table" className="table test_cases_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Repo</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderSystemUnderTestRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,108 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import TestCaseStore from '../../../stores/test-case-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import { ActionTestCasesTcChecked, ActionTestCasesTcClear } from '../../../actions/action-test-cases';
+import { ActionTestCaseGet } from '../../../actions/action-test-case/action-test-case';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleTestCasesViewTc extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, TestCasesStore, TestCaseStore]);
+    this.refTc = React.createRef();
+  }
+  
+  didMount() {
+    if(this.props.repo) {
+      this.dispatch(TestCaseStore, new ActionTestCaseGet(this.props.repo, this.props.sut, this.props.fut));
+    }
+    if(this.props.scroll) {
+      this.refTc.current.scrollTop = this.props.scroll;
+    }
+  }
+  
+  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.state.TestCaseStore.testCases, nextState.TestCaseStore.testCases)
+      || !this.shallowCompareMapValues(this.state.TestCasesStore.testCasesChecked, nextState.TestCasesStore.testCasesChecked);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.props.repo && (this.props.repo !== prevProps.repo || this.props.sut !== prevProps.sut || this.props.fut !== prevProps.fut)) {
+      this.dispatch(TestCaseStore, new ActionTestCaseGet(this.props.repo, this.props.sut, this.props.fut));
+      this.dispatch(TestCasesStore, new ActionTestCasesTcClear());
+    }
+  }
+  
+  willUnmount() {
+    this.dispatch(TestCasesStore, new ActionTestCasesTcClear());
+    this.props.onRestoreData && this.props.onRestoreData(this.refTc.current.scrollTop);
+  }
+  
+  renderCheckbox(tcName) {
+    return (
+      <input type="checkbox" id={`test_cases_input_checkbox_tc_${tcName}`} aria-label="..." autoComplete="off" checked={this.state.TestCasesStore.testCasesChecked.has(tcName)}
+        onChange={(e) => {
+          this.dispatch(TestCasesStore, new ActionTestCasesTcChecked(this.props.repo, this.props.sut, this.props.fut, tcName, e.currentTarget.checked));
+        }}
+      />
+    );
+  }
+  
+  renderTestCaseRows() {
+    return this.state.TestCaseStore.testCases.map((tc, i) => {
+      return (
+        <tr key={`tc:tc_${this.props.sut}/${this.props.fut}/${tc.name}`}>
+          <th scope="row">{i + 1}</th>
+          <td>{this.renderCheckbox(tc.name)}</td>
+          <td>
+            <Link className="test_case_link" href={`/${this.props.sut}/${this.props.fut}/${tc.name}/definition`}>
+              {tc.name}
+            </Link>
+          </td>
+          <td>{tc.description}</td>
+        </tr>
+      );
+    });
+  }
+  
+  render() {
+    return (
+      <div ref={this.refTc} className="test_case_column">
+        <div className="test_cases_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">
+                [
+                <Link className="test_case_link" global href={`/system-under-tests/${this.props.sut}/`}>
+                  {this.props.sut}
+                </Link>
+                ] - [{this.props.fut}] - Tc
+              </h3>
+            </div>
+            <table id="tc_tc_table" className="table test_cases_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderTestCaseRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}