feat(UI): Add styling to status

src/Components/Grid/Status.css

@@ -0,0 +1,18 @@
+.statusicon {
+    vertical-align: text-bottom;
+}
+
+.passed {
+    color: green;
+}
+
+.failed {
+    color: red;
+}
+.pending {
+    color: orange;
+}
+
+.todo {
+    color: gray;
+}

src/Components/Grid/Status.js

@@ -0,0 +1,106 @@
+import React, { Component, Fragment } from 'react';
+import './Status.css';
+import PropTypes from 'prop-types';
+class Status extends Component {
+    render() {
+        if (this.props.status === 'passed') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            aria-label="passed"
+                            fill="currentColor"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            role="img"
+                            className="passed statusicon"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                // eslint-disable-next-line max-len
+                                d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'failed') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            aria-label="failed"
+                            className="failed statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            role="img"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                // eslint-disable-next-line max-len
+                                d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'pending') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            className="pending statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            aria-hidden="true"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'todo') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            className="todo statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            aria-hidden="true"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else {
+            return <Fragment>{this.props.status}</Fragment>;
+        }
+    }
+}
+Status.propTypes = {
+    status: PropTypes.string.isRequired,
+};
+export default Status;

src/Components/Grid/Status.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Status from './Status';
+test('Should contain passed', () => {
+    const { container } = render(<Status status="passed"></Status>);
+    expect(container.textContent).toEqual('passed');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain failed', () => {
+    const { container } = render(<Status status="failed"></Status>);
+    expect(container.textContent).toEqual('failed');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain pending', () => {
+    const { container } = render(<Status status="pending"></Status>);
+    expect(container.textContent).toEqual('pending');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain todo', () => {
+    const { container } = render(<Status status="todo"></Status>);
+    expect(container.textContent).toEqual('todo');
+    expect(container).toMatchSnapshot();
+});

src/Components/Grid/TabContent.css

@@ -1,9 +1,17 @@
-.informationicon{
+.informationiconwrapper {
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10%;
     box-shadow: 1px -1px #fafafa inset;
+    color: black;
 }
 
+.informationicon {
+    vertical-align: text-bottom;
+}
+
+.status {
+    text-transform: capitalize;
+}

src/Components/Grid/TabContent.js

@@ -4,6 +4,7 @@ import './TabContent.css';
 import TabHeading from './TabHeading';
 import PropTypes from 'prop-types';
 import DateUtilities from './../../Utilities/DateUtilities';
+import Status from './Status';
 class TabContent extends Component {
     formatTime(value) {
         return new DateUtilities().convertMillisecondsToTime(value);
@@ -26,27 +27,28 @@ class TabContent extends Component {
                     <div className="column testcase">
                         {this.props.item.title}
                     </div>
-                    <div className="column result">
-                        {this.props.item.status}
+                    <div className="column result status">
+                        <Status status={this.props.item.status} />
                     </div>
                     <div className="column time">
                         {this.formatTime(this.props.item?.duration)}
                     </div>
                     <div className="column information">
                         <div
-                            className="informationicon"
+                            className="informationiconwrapper"
                             onClick={() =>
                                 this.props.onShowModel(this.props.item)
                             }
                         >
                             <i>
                                 <svg
+                                    aria-label="more information"
                                     viewBox="64 64 896 896"
                                     data-icon="exclamation-circle"
                                     width="1em"
                                     height="1em"
                                     fill="currentColor"
-                                    aria-hidden="true"
+                                    className="informationicon"
                                 >
                                     <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
                                 </svg>

src/Components/Grid/TabContent.test.js

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import TabContent from './TabContent';
 import { render, fireEvent } from '@testing-library/react';

src/Components/Grid/__snapshots__/Status.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should contain failed 1`] = `
+<div>
+  <i>
+    <svg
+      aria-label="failed"
+      class="failed statusicon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  failed
+</div>
+`;
+
+exports[`Should contain passed 1`] = `
+<div>
+  <i>
+    <svg
+      aria-label="passed"
+      class="passed statusicon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  passed
+</div>
+`;
+
+exports[`Should contain pending 1`] = `
+<div>
+  <i>
+    <svg
+      aria-hidden="true"
+      class="pending statusicon"
+      fill="currentColor"
+      height="1em"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  pending
+</div>
+`;
+
+exports[`Should contain todo 1`] = `
+<div>
+  <i>
+    <svg
+      aria-hidden="true"
+      class="todo statusicon"
+      fill="currentColor"
+      height="1em"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  todo
+</div>
+`;