feat(UI): Add option to expand results

src/App.js

@@ -21,6 +21,7 @@ class App extends Component {
         this.state.gridData = this.state.treeViewData;
         this.menuStateChange = this.menuStateChange.bind(this);
         this.onStatusChecked = this.onStatusChecked.bind(this);
+        this.state.toggleState = this.state.testResults?.reporterOptions?.expandResults;
     }
     getStatusList() {
         return statusList;
@@ -230,6 +231,10 @@ class App extends Component {
         });
     };
 
+    onExpandToggle = toggleState => {
+        this.setState({ toggleState: toggleState });
+    };
+
     render() {
         return (
             <div className="App">
@@ -248,12 +253,11 @@ class App extends Component {
                 />
                 <Main
                     testResults={this.state.gridData}
-                    expandResults={
-                        this.state.testResults?.reporterOptions?.expandResults
-                    }
+                    expandResults={this.state.toggleState}
                     information={this.state.information}
                     statusList={this.getStatusList()}
                     onStatusChecked={this.onStatusChecked}
+                    onExpandToggle={this.onExpandToggle}
                 />
             </div>
         );

src/App.test.js

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import App from './App';
 import { render, fireEvent } from '@testing-library/react';
@@ -69,8 +68,11 @@ describe('Tree click', () => {
             container.querySelector('.sidenav').classList.contains('open'),
         ).toEqual(true);
         const elem = container.querySelectorAll('.nodeTitle');
+        expect(container.querySelectorAll('.tabs')).toHaveLength(12);
+        expect(container.querySelectorAll('.tab-content')).toHaveLength(12);
         fireEvent.click(elem[1]);
-        expect(container.querySelector('.main')).toMatchSnapshot();
+        expect(container.querySelectorAll('.tabs')).toHaveLength(11);
+        expect(container.querySelectorAll('.tab-content')).toHaveLength(11);
     });
 });
 
@@ -90,3 +92,16 @@ describe('Status filter', () => {
         expect(container.querySelectorAll('.tab-content').length).toEqual(40);
     });
 });
+describe('Toggle Button', () => {
+    test('Should fire event', () => {
+        window.resultData = data;
+        const { container } = render(<App></App>);
+        expect(
+            container.querySelectorAll('.togglerCheckBox:checked'),
+        ).toHaveLength(0);
+        fireEvent.click(container.querySelector('#toggleButton'));
+        expect(
+            container.querySelectorAll('.togglerCheckBox:checked'),
+        ).toHaveLength(12);
+    });
+});

src/Components/FilterToggler/FilterToggler.css

@@ -0,0 +1,3 @@
+.filterWrapper {
+    display: inline-block;
+}

src/Components/FilterToggler/FilterToggler.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import CheckBox from './CheckBox';
 import PropTypes from 'prop-types';
+import './FilterToggler.css';
 export default class FilterToggler extends React.Component {
     constructor(props) {
         super(props);
@@ -35,7 +36,7 @@ export default class FilterToggler extends React.Component {
     render() {
         if (this.props.statusList && this.props.statusList.length > 0) {
             return (
-                <div>
+                <div className="filterWrapper">
                     <p>
                         Filter:{' '}
                         {this.state.statusList.map(status => {

src/Components/Grid/TabContent.js

@@ -19,6 +19,7 @@ class TabContent extends Component {
                     expandResults={this.props.expandResults}
                     item={this.props.item}
                     onShowModel={this.props.onShowModel}
+                    key={`${this.props.item.id}${this.props.expandResults}`}
                 />
             );
         } else {

src/Components/Main/Main.js

@@ -7,6 +7,7 @@ import Modal from './../Modal/Modal';
 import PropTypes from 'prop-types';
 import Information from '../Information/Information';
 import FilterToggler from '../FilterToggler/FilterToggler';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 
 class Main extends Component {
     constructor(props) {
@@ -59,15 +60,23 @@ class Main extends Component {
         this.setState({ showModel: true });
         this.setState({ modelData: item });
     }
+
     render() {
         return (
             <div className="main">
                 <Summary resultSummary={this.state.resultSummary} />
                 <Information info={this.props.information}></Information>
-                <FilterToggler
-                    statusList={this.props.statusList}
-                    onStatusChecked={this.props.onStatusChecked}
-                />
+                <div className="togglesWrapper">
+                    <FilterToggler
+                        statusList={this.props.statusList}
+                        onStatusChecked={this.props.onStatusChecked}
+                    />
+                    <ToggleButton
+                        checkedText="Expand All"
+                        onToggle={this.props.onExpandToggle}
+                        toggleState={this.props.expandResults}
+                    />
+                </div>
                 <GridHeader />
                 <GridTabView
                     expandResults={this.props.expandResults}
@@ -89,5 +98,6 @@ Main.propTypes = {
     information: PropTypes.array,
     statusList: PropTypes.array,
     onStatusChecked: PropTypes.func.isRequired,
+    onExpandToggle: PropTypes.func.isRequired,
 };
 export default Main;

src/Components/ToggleButton/ToggleButton.css

@@ -0,0 +1,107 @@
+.checkbox-switch input[type='checkbox'] {
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -9999px;
+    right: -9999px;
+    overflow: hidden;
+    display: none;
+}
+
+.checkbox-switch > *,
+.checkbox-switch > *:after,
+.checkbox-switch > *:before {
+    box-sizing: border-box;
+}
+
+.checkbox-switch {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    margin-bottom: 2.2652rem;
+}
+.checkbox-switch:after {
+    content: '';
+    display: table;
+    clear: both;
+}
+.checkbox-switch .checkbox-right {
+    float: right;
+    padding-top: 12px;
+}
+.checkbox-switch legend {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-weight: 600;
+    font-size: 1.2rem;
+    line-height: 1.3rem;
+    margin-bottom: 1.618rem;
+}
+.checkbox-switch legend.legend-left {
+    margin: 0 1.618rem 0 0;
+    float: left;
+}
+.checkbox-switch input[type='checkbox'] + label {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height: 1.3rem;
+}
+@media screen and (max-width: 614px) {
+    .checkbox-switch input[type='checkbox'] + label {
+        padding-bottom: 5px;
+    }
+}
+.checkbox-switch input[type='checkbox'] + label:before {
+    width: 2.3rem;
+    height: 1.3rem;
+    content: '•';
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    text-align: left;
+    font-size: 2.5rem;
+    line-height: 0.9rem;
+    float: left;
+    overflow: hidden;
+    color: black;
+    border: 0.1949902505rem solid black;
+    border-radius: 0.65rem;
+    margin: auto 0;
+    border-color: gray;
+    background: gray;
+    color: white;
+}
+
+@media screen and (min-width: 25rem) {
+    .checkbox-switch input[type='checkbox'] + label:before {
+        margin-right: 0.5rem;
+    }
+}
+.checkbox-switch input[type='checkbox'] + label:after {
+    display: none;
+}
+@media screen and (min-width: 25rem) {
+    .checkbox-switch input[type='checkbox'] + label:after {
+        width: 1.75rem;
+        display: inline-block;
+    }
+}
+.checkbox-switch input[type='checkbox']:checked + label:before {
+    border-color: #1a252f;
+    background: #1a252f;
+    text-align: right;
+    color: white;
+}
+
+.checkbox-switch {
+    font-size: 16px;
+    line-height: 1.618;
+    color: black;
+}
+@media screen and (min-width: 25rem) {
+    .checkbox-switch {
+        font-size: 18px;
+    }
+}

src/Components/ToggleButton/ToggleButton.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import './ToggleButton.css';
+import PropTypes from 'prop-types';
+export const ToggleButton = ({ checkedText, onToggle, toggleState }) => {
+    const [toggle, setToggle] = useState(toggleState ?? false);
+    function toggleButton() {
+        if (!toggle) {
+            setToggle(true);
+            onToggle(true);
+        } else {
+            setToggle(false);
+            onToggle(false);
+        }
+    }
+    return (
+        <span className="checkbox-switch">
+            <input
+                type="checkbox"
+                checked={toggle}
+                id="toggleButton"
+                aria-label="test"
+                onChange={() => toggleButton()}
+            />
+            <label htmlFor="toggleButton" className="checkbox-right">
+                {checkedText}
+            </label>
+        </span>
+    );
+};
+ToggleButton.propTypes = {
+    onToggle: PropTypes.func.isRequired,
+    checkedText: PropTypes.string,
+    toggleState: PropTypes.bool,
+};
+export default ToggleButton;

src/Components/ToggleButton/ToggleButton.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ToggleButton from './ToggleButton';
+import { render, fireEvent } from '@testing-library/react';
+describe('Toggle button dom', () => {
+    test('Should contain intial value', () => {
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={function () {}}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        expect(container.querySelector('label')).toHaveTextContent('Expand');
+        expect(container.querySelector('input')).not.toBeChecked();
+    });
+});
+describe('Toggle button fire event', () => {
+    test('Should toggle', () => {
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={function () {}}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        fireEvent.click(container.querySelector('input'));
+        expect(container.querySelector('input')).toBeChecked();
+        fireEvent.click(container.querySelector('input'));
+        expect(container.querySelector('input')).not.toBeChecked();
+    });
+
+    test('Should toggle', () => {
+        const mockCallback = jest.fn();
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={mockCallback}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        fireEvent.click(container.querySelector('input'));
+        expect(mockCallback).toBeCalledTimes(1);
+        expect(mockCallback).toBeCalledWith(true);
+        mockCallback.mockReset();
+        fireEvent.click(container.querySelector('input'));
+        expect(mockCallback).toBeCalledTimes(1);
+        expect(mockCallback).toBeCalledWith(false);
+    });
+});

src/Components/TreeView/ParentNode.js

@@ -6,8 +6,6 @@ export default class ParentNode extends Component {
         super(props);
         this.state = {
             item: this.props.item,
-            caretClass: this.props.expandMenuItems ? 'caret-down' : '',
-            nestedClass: this.props.expandMenuItems ? 'active' : '',
         };
     }
     onTreeCaretClick(e) {
@@ -17,11 +15,19 @@ export default class ParentNode extends Component {
         e.target.classList.toggle('caret-down');
     }
 
+    getCaretClassName() {
+        return this.props.expandMenuItems ? 'caret-down' : '';
+    }
+
+    getNestedClassName() {
+        return this.props.expandMenuItems ? 'active' : '';
+    }
+
     render() {
         return (
             <li>
                 <span
-                    className={`caret ${this.state.caretClass}`}
+                    className={`caret ${this.getCaretClassName()}`}
                     onClick={event => {
                         return this.onTreeCaretClick(event);
                     }}
@@ -34,7 +40,7 @@ export default class ParentNode extends Component {
                 >
                     {this.props.item.title}
                 </span>
-                <ul className={`nested ${this.state.nestedClass}`}>
+                <ul className={`nested ${this.getNestedClassName()}`}>
                     <Treenode
                         expandMenuItems={this.props.expandMenuItems}
                         treeViewData={this.props.item.children}