Feature/182 - Reusable component for checkbox (#183)

* 182 - Create a simple and reusable checkbox component * 182 - Use the new component in ComparisonCheckbox and LastRunCheckbox * Fix Tab's hover styles * 182 - Fix tests and give a unique id for ComparisonCheckbox container
salabs · Apr 22, 2021 · e114a6f · e114a6f
1 parent 87deca5
commit e114a6f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 113 deletions.
diff --git a/end_to_end_tests/resources/page_locators/build_page.robot b/end_to_end_tests/resources/page_locators/build_page.robot
@@ -1,6 +1,6 @@
 ***Variables***
-${fail_checkbox_locator}    xpath://*[@id="last-run-checkbox-container"]/label[1]/span
-${pass_checkbox_locator}    xpath://*[@id="last-run-checkbox-container"]/label[2]/span
+${fail_checkbox_locator}    xpath://*[@id="last-run-checkbox-container"]/label[2]
+${pass_checkbox_locator}    xpath://*[@id="last-run-checkbox-container"]/label[1]
 ${table_locator}            xpath://*[@id="last-run-table"]/tbody
 ${table_row_locator}        xpath://*[@id="last-run-table"]/tbody/tr
 

diff --git a/end_to_end_tests/resources/page_locators/history_page.robot b/end_to_end_tests/resources/page_locators/history_page.robot
@@ -22,6 +22,6 @@ ${disabled_offset_right}      xpath://*[contains(@class, 'rightrue')]
 ${disabled_offset_left}      xpath://*[contains(@class, 'leftrue')]
 
 
-${clicked_pass}      xpath://*[contains(@class, 'passtrue')]
+${clicked_pass}      css:input[value="PASS"][type="checkbox"]:checked
 
-${clicked_fail}      xpath://*[contains(@class, 'failtrue')]
+${clicked_fail}      css:input[value="FAIL"][type="checkbox"]:checked
diff --git a/frontend/src/components/checkbox/Checkbox.jsx b/frontend/src/components/checkbox/Checkbox.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReactComponent as Checked } from '../../images/checked.svg';
+import { ReactComponent as Unchecked } from '../../images/unchecked.svg';
+import { StyledCheckbox, StyledLabel } from './Checkbox.styles';
+
+const Checkbox = ({ checked, onChange, value, label }) => {
+    return (
+        <StyledLabel>
+            <StyledCheckbox
+                type="checkbox"
+                value={value}
+                checked={checked}
+                onChange={onChange}
+            />
+            <span>{checked ? <Checked /> : <Unchecked />}</span>
+            {label}
+        </StyledLabel>
+    );
+};
+
+export default Checkbox;
diff --git a/frontend/src/components/checkbox/Checkbox.styles.js b/frontend/src/components/checkbox/Checkbox.styles.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const StyledLabel = styled.label`
+    margin-right: 20px;
+    display: block;
+    position: relative;
+
+    span {
+        padding-right: var(--space-8);
+
+        svg {
+            position: relative;
+            top: -1px;
+        }
+    }
+`;
+
+export const StyledCheckbox = styled.input`
+    appearance: none;
+    opacity: 0;
+    position: absolute;
+    top: 7px;
+    height: var(--space-16);
+    width: var(--space-16);
+    border-radius: 2px;
+
+    &:focus {
+        opacity: 1;
+    }
+`;
diff --git a/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx b/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx
@@ -1,16 +1,13 @@
 import React, { useState } from 'react';
 import { useStateValue } from '../../contexts/state';
-import {
-    StyledInput,
-    StyledLabel,
-} from '../testFilters/LastRunCheckbox.styles';
-import { ReactComponent as Checked } from '../../images/checked.svg';
-import { ReactComponent as Unchecked } from '../../images/unchecked.svg';
+import Checkbox from '../checkbox/Checkbox';
 import { CheckboxContainer } from './ComparisonCheckbox.styles';
 
-const Checkbox = () => {
-    // eslint-disable-next-line
-    const [{ compareFilterMatch, compareFilterMismatch }, dispatch] = useStateValue();
+const ComparisonCheckbox = () => {
+    const [
+        { compareFilterMatch, compareFilterMismatch },
+        dispatch,
+    ] = useStateValue();
     const [mismatchFilter, setMismatchFilter] = useState(
         compareFilterMatch.isChecked
     );
@@ -39,31 +36,21 @@ const Checkbox = () => {
     };
 
     return (
-        <CheckboxContainer id="last-run-checkbox-container">
-            <StyledLabel labelfor="filterMatch">
-                <StyledInput
-                    type="checkbox"
-                    name="filterMatch"
-                    value="match"
-                    checked={matchFilter}
-                    onChange={e => handleMatchFilterChange(e)}
-                />
-                <span>{matchFilter ? <Checked /> : <Unchecked />}</span>
-                Hide Matching tests
-            </StyledLabel>
-            <StyledLabel labelfor="filterMismatch">
-                <StyledInput
-                    type="checkbox"
-                    name="filterMismatch"
-                    value="mismatch"
-                    checked={mismatchFilter}
-                    onChange={e => handleMismatchFilterChange(e)}
-                />
-                <span>{mismatchFilter ? <Checked /> : <Unchecked />}</span>
-                Hide Mismatched tests
-            </StyledLabel>
+        <CheckboxContainer id="build-comparison-checkbox-filter">
+            <Checkbox
+                checked={matchFilter}
+                onChange={e => handleMatchFilterChange(e)}
+                value="match"
+                label="Hide Matching tests"
+            />
+            <Checkbox
+                checked={mismatchFilter}
+                onChange={e => handleMismatchFilterChange(e)}
+                value="mismatch"
+                label="Hide Mismatched tests"
+            />
         </CheckboxContainer>
     );
 };
 
-export default Checkbox;
+export default ComparisonCheckbox;
diff --git a/frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js b/frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js
@@ -9,15 +9,4 @@ export const CheckboxContainer = styled.div`
     line-height: 30px;
     padding: 0 var(--space-8);
     margin-bottom: var(--space-24);
-
-    span {
-        padding-right: var(--space-8);
-        position: relative;
-        top: -1px;
-
-        svg {
-            position: relative;
-            top: -1px;
-        }
-    }
 `;
diff --git a/frontend/src/components/tablist/Tab.styles.js b/frontend/src/components/tablist/Tab.styles.js
@@ -24,11 +24,13 @@ export const TabLink = styled(({ ...props }) => <NavLink {...props} />)`
         color: var(--pirlo-blue);
         border-bottom: var(--space-4) solid var(--pirlo-blue);
         height: var(--space-40);
+        background: var(--nero-white);
     }
 
     &:hover:not(.active) {
         color: var(--titan-green);
         border-bottom: var(--space-4) solid var(--tonic-grey);
         height: var(--space-40);
+        background: var(--nero-white);
     }
 `;
diff --git a/frontend/src/components/testFilters/LastRunCheckbox.jsx b/frontend/src/components/testFilters/LastRunCheckbox.jsx
@@ -1,20 +1,12 @@
-// eslint-disable-next-line
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStateValue } from '../../contexts/state';
-import { ReactComponent as Checked } from '../../images/checked.svg';
-import { ReactComponent as Unchecked } from '../../images/unchecked.svg';
-import {
-    Header,
-    StyledDiv,
-    StyledLabel,
-    StyledInput,
-} from './LastRunCheckbox.styles';
-
 import { useQueryParams } from '../../hooks/useQuery';
 import { useHistory, useLocation } from 'react-router-dom';
+import Checkbox from '../checkbox/Checkbox';
+import { Header, StyledDiv } from './LastRunCheckbox.styles';
 
 const LastRunCheckbox = ({ direction }) => {
     // eslint-disable-next-line
@@ -82,30 +74,18 @@ const LastRunCheckbox = ({ direction }) => {
         <div>
             <Header>{t('hide_tests.header')}</Header>
             <StyledDiv direction={direction} id="last-run-checkbox-container">
-                <StyledLabel labelfor="filterPassed">
-                    <StyledInput
-                        type="checkbox"
-                        name="filterPassed"
-                        value="PASS"
-                        className={`pass${passFilter}`}
-                        checked={passFilter}
-                        onChange={e => handlePassFilterChange(e)}
-                    />
-                    <span>{passFilter ? <Checked /> : <Unchecked />}</span>
-                    {t('hide_tests.passing')}
-                </StyledLabel>
-                <StyledLabel labelfor="filterFailed">
-                    <StyledInput
-                        type="checkbox"
-                        name="filterFailed"
-                        value="FAIL"
-                        checked={failFilter}
-                        className={`fail${failFilter}`}
-                        onChange={e => handleFailFilterChange(e)}
-                    />
-                    <span>{failFilter ? <Checked /> : <Unchecked />}</span>
-                    {t('hide_tests.failing')}
-                </StyledLabel>
+                <Checkbox
+                    checked={passFilter}
+                    onChange={e => handlePassFilterChange(e)}
+                    value="PASS"
+                    label={t('hide_tests.passing')}
+                />
+                <Checkbox
+                    checked={failFilter}
+                    onChange={e => handleFailFilterChange(e)}
+                    value="FAIL"
+                    label={t('hide_tests.failing')}
+                />
             </StyledDiv>
         </div>
     );

diff --git a/frontend/src/components/testFilters/LastRunCheckbox.styles.js b/frontend/src/components/testFilters/LastRunCheckbox.styles.js
@@ -22,35 +22,4 @@ export const StyledDiv = styled.div`
     @media only screen and (max-width: 768px) {
         width: 30%;
     }
-
-    span {
-        padding-right: var(--space-8);
-        position: relative;
-        top: -1px;
-
-        svg {
-            position: relative;
-            top: -1px;
-        }
-    }
-`;
-
-export const StyledLabel = styled.label`
-    margin-right: 20px;
-    display: block;
-    position: relative;
-`;
-
-export const StyledInput = styled.input`
-    appearance: none;
-    opacity: 0;
-    position: absolute;
-    top: 6px;
-    height: var(--space-16);
-    width: var(--space-16);
-    border-radius: 2px;
-
-    &:focus {
-        opacity: 1;
-    }
 `;