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

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

@@ -0,0 +1,222 @@
+
+'use strict';
+
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import TestSuiteStore from '../../../stores/test-suite-store';
+import TestSuitesStore from '../../../stores/test-suites-store';
+import MiddleTestSuitesViewRecent from './middle-test-suites-view-recent';
+import MiddleTestSuitesViewSut from './middle-test-suites-view-sut';
+import MiddleTestSuitesViewFut from './middle-test-suites-view-fut';
+import MiddleTestSuitesViewTs from './middle-test-suites-view-ts';
+import MiddleTestSuitesViewTestSuite from './middle-test-suites-view-test-suite';
+import { ActionSystemUnderTestSet } from '../../../actions/action-system-under-test/action-system-under-test';
+import { ActionTestSuitesSetView } from '../../../actions/action-test-suites';
+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 MiddleTestSuitesViewColumns extends ReactComponentStore {
+  constructor(props) {
+    super(props, [TestSuiteStore, 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.onTsName && this.props.ts) {
+      this.props.onTsName(this.props.ts);
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.props.fut, nextProps.fut)
+      || !this.shallowCompare(this.props.ts, nextProps.ts)
+      || this.state.TestSuiteStore.markup.definition !== nextState.TestSuiteStore.markup.definition
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    this.setView();
+    if(this.props.ts !== prevProps.ts) {
+      this.props.onTsName(this.props.ts);
+    }
+  }
+  
+  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.ts) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+      this.dispatch(TestSuitesStore, new ActionTestSuitesSetView('ts'));
+    }
+    else if(this.props.fut) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+      this.dispatch(TestSuitesStore, new ActionTestSuitesSetView('fut'));
+    }
+    else if(this.props.sut) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+      this.dispatch(TestSuitesStore, new ActionTestSuitesSetView('sut'));
+    }
+    else {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(null));
+      this.dispatch(TestSuitesStore, new ActionTestSuitesSetView('none'));
+    }
+  }
+  
+  renderTestSuites() {
+    return (
+      <div className="test_suite_columns">
+        <MiddleTestSuitesViewRecent />
+        <MiddleTestSuitesViewSut />
+      </div>
+    );
+  }
+  
+  renderTestSuitesSut(repo) {
+    return (
+      <div className="test_suite_columns">
+        <MiddleTestSuitesViewRecent />
+        <MiddleTestSuitesViewSut />
+        <MiddleTestSuitesViewFut sut={this.props.sut} repo={repo} />
+      </div>
+    );
+  }
+  
+  renderTestSuitesFut(repo) {
+    return (
+      <div className="test_suite_columns">
+        <MiddleTestSuitesViewRecent scroll={this.scrollRecent}
+          onRestoreData={(scrollTop) => {
+            this.scrollRecent = scrollTop;
+          }}
+        />
+        <MiddleTestSuitesViewSut scroll={this.scrollSut}
+          onRestoreData={(scrollTop) => {
+            this.scrollSut = scrollTop;
+          }}
+        />
+        <MiddleTestSuitesViewFut repo={repo} sut={this.props.sut} scroll={this.scrollFut}
+          onRestoreData={(scrollTop) => {
+            this.scrollFut = scrollTop;
+          }}
+        />
+        <MiddleTestSuitesViewTs repo={repo} sut={this.props.sut} fut={this.props.fut} scroll={this.scrollTc}
+          onRestoreData={(scrollTop) => {
+            this.scrollTc = scrollTop;
+          }}
+        />
+      </div>
+    );
+  }
+  
+  renderTestSuitesTs(repo) {
+    return (
+      <Route switch={["/:tab*", ""]} repo={repo} sut={this.props.sut} fut={this.props.fut} ts={this.props.ts} handler={MiddleTestSuitesViewTestSuite} />
+    );
+  }
+  
+  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.ts) {
+      return this.renderTestSuitesTs(repo);
+    }
+    else if(this.props.fut) {
+      return this.renderTestSuitesFut(repo);
+    }
+    else if(this.props.sut) {
+      return this.renderTestSuitesSut(repo);
+    }
+    else {
+      return this.renderTestSuites();
+    }
+  }
+  
+  _getTestSuiteFullName() {
+    let testSuiteFullName = 'ts';
+    if(this.props.sut) {
+      testSuiteFullName += `.${this.props.sut}`;
+    }
+    if(this.props.fut) {
+      testSuiteFullName += `.${this.props.fut}`;
+    }
+    if(this.props.ts) {
+      testSuiteFullName += `.${this.props.ts}`;
+    }
+    return testSuiteFullName;
+  }
+  
+  renderTestSuiteFullName() {
+    return (
+      <div className="bootstrap_breadcrump_full_name">
+        {'Markup name: ' + this._getTestSuiteFullName()}   
+      </div>
+    );
+  }
+  
+  _copyMarkupName(e) {
+    navigator.clipboard.writeText(this._getTestSuiteFullName()).then(() => {
+      /* clipboard successfully set */
+    }, () => {
+      /* clipboard write failed */
+    });
+  }
+  
+  _disabledCopy() {
+    return this.state.TestSuiteStore.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_suite_breadcrump">
+          <ComponentBreadcrump items={[
+            {name: 'Test Suites', link: ''},
+            {name: this.props.sut, link: `${this.props.sut}`},
+            {name: this.props.fut, link: `${this.props.sut}/${this.props.fut}`},
+            {name: this.props.ts, link: `${this.props.sut}/${this.props.fut}/${this.props.ts}`}
+          ]}/>
+          <div className="bootstrap_breadcrump_full_name">
+            {'-'}   
+          </div>
+          <div className="aj_btn_group" style={{marginLeft:'8px'}} role="group" aria-label="...">
+            {this.renderCopyButton()}
+          </div>
+          {this.renderTestSuiteFullName()}
+        </div>
+        {this.renderColumns()}
+      </div>
+    ); 
+  }
+}
+

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

@@ -0,0 +1,105 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import FunctionUnderTestStore from '../../../stores/function-under-test-store';
+import TestSuitesStore from '../../../stores/test-suites-store';
+import { ActionTestSuitesFutChecked, ActionTestSuitesFutClear } from '../../../actions/action-test-suites';
+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 MiddleTestSuitesViewFut extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, FunctionUnderTestStore, TestSuitesStore]);
+    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.TestSuitesStore.functionUnderTestsChecked, nextState.TestSuitesStore.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(TestSuitesStore, new ActionTestSuitesFutClear());
+    }
+  }
+  
+  willUnmount() {
+    this.dispatch(TestSuitesStore, new ActionTestSuitesFutClear());
+    this.props.onRestoreData && this.props.onRestoreData(this.refFut.current.scrollTop);
+  }
+  
+  renderCheckbox(futName) {
+    return (
+      <input type="checkbox" id={`test_suites_input_checkbox_fut_${futName}`} aria-label="..." autoComplete="off" checked={this.state.TestSuitesStore.functionUnderTestsChecked.has(futName)}
+        onChange={(e) => {
+          this.dispatch(TestSuitesStore, new ActionTestSuitesFutChecked(this.props.repo, this.props.sut, futName, e.currentTarget.checked));
+        }}
+      />
+    );
+  }
+  
+  renderFunctionUnderTestRows() {
+    const functionUnderTestRows = this.state.FunctionUnderTestStore.functionUnderTests.map((fut, i) => {
+    return (
+      <tr key={`ts:fut_${this.props.sut}/${fut.name}`}>
+        <th scope="row">{i + 1}</th>
+        <td>{this.renderCheckbox(fut.name)}</td>
+        <td>
+          <Link className="test_suite_link" href={`/${this.props.sut}/${fut.name}`}>
+            {fut.name}
+          </Link>
+        </td>
+      </tr>)
+    })
+    return functionUnderTestRows;
+  }
+  
+  render() {
+    return (
+      <div ref={this.refFut} className="test_suite_column">      
+        <div className="test_suites_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">
+                [
+                <Link className="test_suite_link" href={`/${this.props.sut}`}>
+                  {this.props.sut}
+                </Link>
+                ]&nbsp;- Fut
+              </h3>
+            </div>
+            <table id="ts_fut_table" className="table test_suites_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-suites/middle-test-suites-view-recent.jsx

@@ -0,0 +1,74 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import TestSuiteStore from '../../../stores/test-suite-store';
+import { ActionTestSuiteRecentGet } from '../../../actions/action-test-suite/action-test-suite';
+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 MiddleTestSuitesViewRecent extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, TestSuiteStore]);
+    this.refRecent = React.createRef();
+  }
+  
+  didMount() {
+    this.dispatch(TestSuiteStore, new ActionTestSuiteRecentGet());
+    if(this.props.scroll) {
+      this.refRecent.current.scrollTop = this.props.scroll;
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompareArrayValues(this.state.TestSuiteStore.recentTestSuites, nextState.TestSuiteStore.recentTestSuites);
+  }
+    
+  willUnmount() {
+    this.props.onRestoreData && this.props.onRestoreData(this.refRecent.current.scrollTop);
+  }
+  
+  renderRecentTestSuitesRows() {
+    const recentTestSuitesRows = this.state.TestSuiteStore.recentTestSuites.map((recentTs, i) => {
+    return (
+      <tr key={`ts:recent_ts.${recentTs.sut}.${recentTs.fut}.${recentTs.ts}`}>
+        <th scope="row">{i + 1}</th>    
+        <td>
+          <Link className="test_suite_link" href={`/${recentTs.sut}/${recentTs.fut}/${recentTs.ts}`}>
+            {`ts.${recentTs.sut}.${recentTs.fut}.${recentTs.ts}`}
+          </Link>
+        </td>
+        <td>{recentTs.repo}</td>
+      </tr>)
+    })
+  	return recentTestSuitesRows;
+  }
+  
+  render() {
+    return (
+      <div ref={this.refRecent} className="test_suite_column">
+        <div className="test_suites_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">Recent</h3>
+            </div>
+            <table id="ts_recent_table" className="table test_suites_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Name</th>
+                  <th>Repo</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderRecentTestSuitesRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,96 @@
+
+'use strict';
+
+import FilterStore from '../../../stores/filter-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import TestSuitesStore from '../../../stores/test-suites-store';
+import { ActionTestSuitesSutChecked, ActionTestSuitesSutClear } from '../../../actions/action-test-suites';
+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 MiddleTestSuitesViewSut extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, SystemUnderTestStore, TestSuitesStore]);
+    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.shallowCompareSetValues(this.state.TestSuitesStore.systemUnderTestsChecked, nextState.TestSuitesStore.systemUnderTestsChecked);
+  }
+    
+  willUnmount() {
+    this.dispatch(TestSuitesStore, new ActionTestSuitesSutClear());
+    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_suites_input_checkbox_sut_${sut.name}`} aria-label="..." autoComplete="off" checked={this.state.TestSuitesStore.systemUnderTestsChecked.has(sut.name)}
+          onChange={(e) => {
+            this.dispatch(TestSuitesStore, new ActionTestSuitesSutChecked(sut, e.currentTarget.checked));
+          }}
+        />
+      );
+    }
+  }
+  
+  renderSystemUnderTestRows() {
+    const systemUnderTestRows = this.state.SystemUnderTestStore.systemUnderTests.map((sut, i) => {
+    return (
+      <tr key={`ts:sut_${sut.name}`}>
+        <th scope="row">{i + 1}</th>    
+        <td>{this.renderCheckbox(sut)}</td>
+        <td>
+          <Link className="test_suite_link" href={`/${sut.name}`}>
+            {sut.name}
+          </Link>
+        </td>
+        <td>{sut.repo}</td>
+      </tr>)
+    })
+    return systemUnderTestRows;
+  }
+  
+  render() {
+    return (
+      <div ref={this.refSut} className="test_suite_column">
+        <div className="test_suites_table">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h3 className="panel-title">Sut</h3>
+            </div>
+            <table id="ts_sut_table" className="table test_suites_table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Repo</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.renderSystemUnderTestRows()}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}