(WIP) Feat: QA automation

packages/permission-settings/src/containers/manage-data-details.js

@@ -82,7 +82,7 @@ function ManageDataDetailsDisplay({categoryId, useCaseId, onBackButtonClick}) {
             },
           ],
           blockNumber: R.path(['activity', 'txDetails', 'blockNumber'], u),
-          date: R.path(['activity', 'date'], u),
+          date: new Date(R.path(['activity', 'date'], u)).toLocaleString(),
           transactionHash: R.path(['activity', 'txDetails', 'hash'], u),
         },
       }))}

packages/permission-settings/src/state/activity.js

@@ -7,7 +7,7 @@ import useFetch from '../utils/use-fetch';
 import User from './user';
 
 function parseDate(date) {
-  return new Date(date).toLocaleString();
+  return new Date(date);
 }
 
 function parseStatus(status) {

packages/storybook/stories/modals/permissioning-app/tx-details-modal.js

@@ -20,7 +20,7 @@ const txDetailsParams = {
     },
   ],
   blockNumber: '5513415',
-  date: 0 + new Date(0).getTimezoneOffset() * 60 * 1000,
+  date: new Date(0 + new Date(0).getTimezoneOffset() * 60 * 1000),
   transactionHash:
     '22140E794F78B853E29C810F7FE59260B610E845D0315E82F68162DCB8DD9C81',
 };

packages/ui/components/button.js

@@ -50,6 +50,7 @@ const Button = ({
   plain,
   icon,
   reverseIcon,
+  testId,
   ...props
 }) => {
   let backgroundColor = primary ? 'primary' : 'light-2';
@@ -71,10 +72,16 @@ const Button = ({
       justify="center"
       align="center"
       disabled={disabled}
-      onClick={disabled ? null : onClick}
       {...props}
     >
-      <Btn plain label={label} icon={icon} reverse={reverseIcon} />
+      <Btn
+        plain
+        label={label}
+        icon={icon}
+        reverse={reverseIcon}
+        data-test-id={testId}
+        onClick={disabled ? null : onClick}
+      />
     </BtnContainer>
   );
 };
@@ -97,6 +104,7 @@ Button.propTypes = {
   plain: PropTypes.bool,
   icon: PropTypes.node,
   onClick: PropTypes.func,
+  testId: PropTypes.string.isRequired,
   ...GrommetButton.propTypes,
 };
 

packages/ui/components/form-field.js

@@ -73,6 +73,7 @@ const FormField = ({
   onRemove,
   disabled,
   autoComplete,
+  testId,
   ...props
 }) => (
   <>
@@ -91,6 +92,7 @@ const FormField = ({
         onChange={onChange}
         error={error}
         autoComplete={autoComplete}
+        data-test-id={testId}
       />
       {onRemove && <Remove onClick={onRemove} />}
     </Box>
@@ -113,6 +115,7 @@ FormField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
   autoComplete: PropTypes.string,
+  testId: PropTypes.string.isRequired,
 };
 
 FormField.defaultProps = {

packages/ui/components/text-area.js

@@ -39,7 +39,15 @@ const StyledTextArea = styled(GrommetTextArea)`
   }
 `;
 
-const TextArea = ({placeholder, value, name, onChange, error, disabled}) => {
+const TextArea = ({
+  placeholder,
+  value,
+  name,
+  onChange,
+  error,
+  disabled,
+  testId,
+}) => {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
@@ -60,6 +68,7 @@ const TextArea = ({placeholder, value, name, onChange, error, disabled}) => {
           onChange={onChange}
           ref={ref}
           resize={false}
+          data-test-id={testId}
         />
         {error && typeof error === 'string' && (
           <Text color="red" margin={{left: 'small', top: 'small'}}>
@@ -78,6 +87,7 @@ TextArea.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  testId: PropTypes.string.isRequired,
 };
 
 TextArea.defaultProps = {

packages/ui/components/toggle.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import {bool, func} from 'prop-types';
+import {bool, func, string} from 'prop-types';
 
 function cursorStyle({readOnly, disabled}) {
   if (readOnly) {
@@ -62,7 +62,13 @@ const CheckBox = styled.input.attrs(({readOnly, disabled}) => ({
   height: 22px;
 `;
 
-export default function Toggle({checked, onChange, disabled, readOnly}) {
+export default function Toggle({
+  checked,
+  onChange,
+  disabled,
+  readOnly,
+  testId,
+}) {
   return (
     <CheckBoxLabel checked={checked} disabled={disabled} readOnly={readOnly}>
       <CheckBox
@@ -71,6 +77,7 @@ export default function Toggle({checked, onChange, disabled, readOnly}) {
         disabled={disabled}
         readOnly={readOnly}
         onChange={event => (readOnly ? null : onChange(event.target.checked))}
+        data-test-id={testId}
       />
     </CheckBoxLabel>
   );
@@ -86,4 +93,5 @@ Toggle.propTypes = {
   disabled: bool,
   onChange: func.isRequired,
   readOnly: bool,
+  testId: string.isRequired,
 };

packages/ui/modals/confirm.js

@@ -29,6 +29,7 @@ const ConfirmModal = ({
   cancelText,
   requiresDoubleConfirm,
   disabled,
+  testId,
 }) => {
   const [canClickConfirm, setCanClickConfirm] = useState(
     !requiresDoubleConfirm,
@@ -51,7 +52,12 @@ const ConfirmModal = ({
       >
         {renderHeader()}
         <CloseBtnContainer>
-          <Button onClick={onDismiss} icon={<Close size="small" />} plain />
+          <Button
+            onClick={onDismiss}
+            icon={<Close size="small" />}
+            plain
+            testId={`${testId}-cancel-btn`}
+          />
         </CloseBtnContainer>
       </Box>
       <Box pad={{horizontal: 'large', bottom: 'small'}}>{renderBody()}</Box>
@@ -64,6 +70,7 @@ const ConfirmModal = ({
             <CheckBox
               checked={canClickConfirm}
               onChange={() => setCanClickConfirm(currentValue => !currentValue)}
+              data-test-id={`${testId}-confirm-checkbox`}
             />
             <FormattedText
               id="modal.confirm.double"
@@ -85,6 +92,7 @@ const ConfirmModal = ({
                 {cancelText}
               </Text>
             }
+            testId={`${testId}-cancel-btn`}
             onClick={onDismiss}
           />
           <Button
@@ -98,6 +106,7 @@ const ConfirmModal = ({
                 {confirmText}
               </Text>
             }
+            testId={`${testId}-confirm-btn`}
           />
         </Box>
       </Box>
@@ -123,6 +132,7 @@ ConfirmModal.propTypes = {
   requiresDoubleConfirm: PropTypes.bool,
   alert: PropTypes.bool,
   disabled: PropTypes.bool,
+  testId: PropTypes.string.isRequired,
 };
 
 export default ConfirmModal;

packages/ui/modals/permissioning-app/tx-details-modal.js

@@ -61,7 +61,7 @@ const TxDetailsModal = ({
               defaultMessage="Written"
               color="dark-2"
             />
-            <Text color="dark-2">{new Date(date).toLocaleString()}</Text>
+            <Text color="dark-2">{date.toLocaleString()}</Text>
           </Box>
         </Box>
         <CloseBtnContainer>

packages/ui/screens/activity/record.js

@@ -60,7 +60,7 @@ const ActivityRecord = ({
             </Box>
           </Box>
           <Text color="dark-2" margin={{top: 'xsmall'}}>
-            {date}
+            {date.toLocaleString()}
           </Text>
           {permissionModalVisible && (
             <TxDetailsModal