feat(UI): Add option to filter by status

package.json

@@ -17,10 +17,10 @@
     ],
     "author": "Vinoth",
     "license": "ISC",
-"repository": {
-    "type": "git",
-    "url": "https://github.com/vinothdevelop/HTMLReport4Jest"
-  },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vinothdevelop/HTMLReport4Jest"
+    },
     "bugs": {
         "url": "https://github.com/vinothdevelop/HTMLReport4Jest/issues"
     },

src/App.js

@@ -6,21 +6,27 @@ import Header from './Components/Header/Header';
 import Sidebar from './Components/Sidebar/Sidebar';
 import Main from './Components/Main/Main';
 let data;
+const statusList = [];
 class App extends Component {
     constructor(props) {
         data = window.resultData;
         super(props);
         this.state = {
             menuState: 'close',
             testResults: data,
-            treeViewData: this.formatTreeViewData(data),
+            treeViewData: this.formatTreeViewData(data, []),
             information: this.getInformation(data),
         };
         this.onTreeNodeClick = this.onTreeNodeClick.bind(this);
         this.state.gridData = this.state.treeViewData;
         this.menuStateChange = this.menuStateChange.bind(this);
+        this.onStatusChecked = this.onStatusChecked.bind(this);
     }
-    formatTreeViewData(testResults) {
+    getStatusList() {
+        return statusList;
+    }
+
+    formatTreeViewData(testResults, statusFilter) {
         const testResultData = {};
         Object.assign(testResultData, testResults);
         let treeViewData = [];
@@ -40,13 +46,14 @@ class App extends Component {
                 testResultData.testResults,
                 [],
                 id,
+                statusFilter,
             );
         }
         treeViewData = rootElement;
         return treeViewData;
     }
 
-    parseTreeData(testResults, parentArray, id) {
+    parseTreeData(testResults, parentArray, id, statusFilter) {
         let subArray = [];
         testResults.forEach(element => {
             if (element.testFilePath || element.fullName) {
@@ -70,15 +77,30 @@ class App extends Component {
                         element.testResults,
                         [],
                         id,
+                        statusFilter,
                     );
-                    parentArray.push(nodeValue);
+                    if (
+                        statusFilter.length === 0 ||
+                        nodeValue.children.length > 0
+                    ) {
+                        parentArray.push(nodeValue);
+                    }
                 } else if (element.ancestorTitles) {
-                    [subArray, id] = this.parseAncestor(
-                        element.ancestorTitles,
-                        element,
-                        subArray,
-                        id,
-                    );
+                    if (statusList.indexOf(element.status) < 0) {
+                        statusList.push(element.status);
+                    }
+                    if (
+                        statusFilter.length === 0 ||
+                        statusFilter.indexOf(element.status) >= 0
+                    ) {
+                        [subArray, id] = this.parseAncestor(
+                            element.ancestorTitles,
+                            element,
+                            subArray,
+                            id,
+                            statusFilter,
+                        );
+                    }
                 }
             }
         });
@@ -88,7 +110,7 @@ class App extends Component {
         return [parentArray, id];
     }
 
-    parseAncestor(ancestors, testCase, parentArray, id) {
+    parseAncestor(ancestors, testCase, parentArray, id, statusFilter) {
         const ancestorCopy = [...ancestors];
         if (ancestors.length > 0) {
             const itemTitle = ancestors[0];
@@ -113,6 +135,7 @@ class App extends Component {
                     testCase,
                     [],
                     id,
+                    statusFilter,
                 );
                 parentArray.push(nodeValue);
             } else {
@@ -139,6 +162,7 @@ class App extends Component {
                     testCase,
                     parentArray[elementIndex].children,
                     id,
+                    statusFilter,
                 );
             }
         } else {
@@ -197,6 +221,15 @@ class App extends Component {
         return information;
     }
 
+    onStatusChecked = checkedStatuses => {
+        this.setState({
+            gridData: this.formatTreeViewData(
+                this.state.testResults,
+                checkedStatuses,
+            ),
+        });
+    };
+
     render() {
         return (
             <div className="App">
@@ -219,6 +252,8 @@ class App extends Component {
                         this.state.testResults?.reporterOptions?.expandResults
                     }
                     information={this.state.information}
+                    statusList={this.getStatusList()}
+                    onStatusChecked={this.onStatusChecked}
                 />
             </div>
         );

src/App.test.js

@@ -73,3 +73,20 @@ describe('Tree click', () => {
         expect(container.querySelector('.main')).toMatchSnapshot();
     });
 });
+
+describe('Status filter', () => {
+    test('Should have checkboxes', () => {
+        window.resultData = sampleData;
+        const { container } = render(<App></App>);
+        expect(container.querySelectorAll('.checkboxLabel').length).toEqual(4);
+    });
+    test('Should filter on checkbox click', () => {
+        window.resultData = sampleData;
+        const { container } = render(<App></App>);
+        const statusCheckboxes = container.querySelectorAll('.checkboxLabel');
+        fireEvent.click(statusCheckboxes[3]);
+        expect(container.querySelectorAll('.tab-content').length).toEqual(2);
+        fireEvent.click(statusCheckboxes[3]);
+        expect(container.querySelectorAll('.tab-content').length).toEqual(40);
+    });
+});

src/Components/FilterToggler/CheckBox.css

@@ -0,0 +1,51 @@
+.checkboxLabel {
+    text-transform: capitalize;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    display: 'inline';
+}
+
+/* Hide the default checkbox */
+.checkboxLabel input[type='checkbox'] {
+    visibility: hidden;
+}
+
+/* creating a custom checkbox based 
+    on demand */
+.checkboxSpan {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1em;
+    width: 1em;
+    background-color: white;
+    border: solid black;
+    border-width: 1px 1px 1px 1px;
+}
+
+/* specify the background color to be 
+shown when checkbox is checked */
+.checkboxLabel input:checked ~ .checkboxSpan {
+    background-color: #333334;
+}
+
+/* checkmark to be shown in checkbox */
+/* It is not be shown when not checked */
+.checkboxSpan:after {
+    position: absolute;
+    display: none;
+}
+
+/* styling the checkmark using webkit */
+/* creating a square to be the sign of 
+    checkmark */
+.checkboxLabel .checkboxSpan:after {
+    left: 6px;
+    bottom: 5px;
+    width: 6px;
+    height: 6px;
+    border: solid black;
+    border-width: 4px 4px 4px 4px;
+}

src/Components/FilterToggler/CheckBox.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CheckBox.css';
+export const CheckBox = props => {
+    return (
+        <label className="checkboxLabel">
+            {props.value}
+            <input
+                key={props.value}
+                onChange={props.handleCheck}
+                type="checkbox"
+                checked={props.isChecked}
+                value={props.value}
+                id={props.value}
+            />
+            <span className="checkboxSpan"></span>
+        </label>
+    );
+};
+CheckBox.propTypes = {
+    handleCheck: PropTypes.func.isRequired,
+    isChecked: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+};
+export default CheckBox;

src/Components/FilterToggler/CheckBox.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import CheckBox from './CheckBox';
+import { render, fireEvent } from '@testing-library/react';
+test('Should contain value', () => {
+    const { container } = render(
+        <CheckBox
+            value="Test"
+            isChecked={false}
+            handleCheck={function () {}}
+        ></CheckBox>,
+    );
+    expect(container).toHaveTextContent('Test');
+});
+
+test('Should not be checked', () => {
+    const { container } = render(
+        <CheckBox
+            value="Test"
+            isChecked={false}
+            handleCheck={function () {}}
+        ></CheckBox>,
+    );
+    expect(container.firstChild.lastChild.previousSibling).not.toBeChecked();
+});
+
+test('Should be checked', () => {
+    const { container } = render(
+        <CheckBox
+            value="Test"
+            isChecked={true}
+            handleCheck={function () {}}
+        ></CheckBox>,
+    );
+    expect(container.firstChild.lastChild.previousSibling).toBeChecked();
+});
+
+test('Should call function on change', () => {
+    const mockCallback = jest.fn();
+    const { container } = render(
+        <CheckBox
+            value="Test"
+            isChecked={false}
+            handleCheck={mockCallback}
+        ></CheckBox>,
+    );
+    fireEvent.click(container.firstChild);
+    expect(mockCallback.mock.calls.length).toBe(1);
+    fireEvent.click(container.firstChild);
+    expect(mockCallback.mock.calls.length).toBe(2);
+});

src/Components/FilterToggler/FilterToggler.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import CheckBox from './CheckBox';
+import PropTypes from 'prop-types';
+export default class FilterToggler extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            statusList: this.init(this.props.statusList),
+        };
+    }
+
+    init(statusList) {
+        if (statusList && statusList.length > 0) {
+            return statusList.map(status => {
+                return { value: status, isChecked: false };
+            });
+        } else {
+            return [];
+        }
+    }
+
+    handleChecked = event => {
+        const checkStatuses = [];
+        this.state.statusList.forEach(status => {
+            if (status.value === event.target.value) {
+                status.isChecked = event.target.checked;
+            }
+            if (status.isChecked) {
+                checkStatuses.push(status.value);
+            }
+        });
+        this.setState(this.state.statusList);
+        this.props.onStatusChecked(checkStatuses);
+    };
+    render() {
+        if (this.props.statusList && this.props.statusList.length > 0) {
+            return (
+                <div>
+                    <p>
+                        Filter:{' '}
+                        {this.state.statusList.map(status => {
+                            return (
+                                <CheckBox
+                                    key={status.value}
+                                    handleCheck={this.handleChecked}
+                                    {...status}
+                                />
+                            );
+                        })}
+                    </p>
+                </div>
+            );
+        } else {
+            return null;
+        }
+    }
+}
+FilterToggler.propTypes = {
+    statusList: PropTypes.array,
+    onStatusChecked: PropTypes.func.isRequired,
+};