React testing library

__mocks__/File.context.test.js

@@ -0,0 +1,43 @@
+import React, {useContext} from "react";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AuthenticationContextProvider, FileContextProvider, RepositoryContextProvider } from "../src";
+import { FileContext } from '../src/components/file/File.context';
+
+
+
+const FileContextCustomer = () => {
+    const fileContextValues = useContext(FileContext);
+    const fileContextKeysArray = Object.keys(fileContextValues);
+
+    return(
+        <div 
+            data-testid="test"
+        >
+            {
+               fileContextKeysArray.map((key)=>(`${key}/`)) 
+            }
+        </div>
+    )
+}
+
+
+
+
+describe('FileContextProvider', () => {
+    test('FileContextProvider renders correctly', () => {
+        render(
+            <AuthenticationContextProvider>
+                <RepositoryContextProvider
+                    onRepository={()=>{}}
+                >
+                    <FileContextProvider>
+                        <FileContextCustomer text="text" data-testid="test"/>
+                    </FileContextProvider>
+                </RepositoryContextProvider>
+            </AuthenticationContextProvider>
+        );
+        const test = screen.getByTestId('test');
+        expect(test).toHaveTextContent('state/stateValues/actions/component/components/config');
+    });
+})

__mocks__/FileCard.test.js

@@ -0,0 +1,270 @@
+import React from "react";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileCard from '../src/components/file/FileCard';
+import { checkProps } from './testUtils';
+
+
+
+
+jest.mock('markdown-translatable/dist/components/block-editable/BlockEditable', () => 
+({markdown, onEdit, editable}) => (
+    <input
+        data-testid="blockEditable"
+        value={markdown}
+        onChange={(event) => {
+            if(editable){
+                onEdit(event.target.value)
+            }
+        }}
+        readOnly
+    />
+));
+
+
+
+
+const defaultProps = {
+    repository: {
+        owner: {
+            username: 'username',
+            avatar_url: 'avatar_url',
+        },
+        name: 'name',
+        avatar_url: 'avatar_url',
+        permissions: {
+            push: true,
+        },
+        full_name: 'full_name',
+        default_branch: 'default_branch'
+    },
+    file:{
+        name: 'file.name',
+        path: 'file.path',
+        sha: 'file.sha',
+        content: 'file.content',
+        branch: 'file.branch',
+        filepath: 'filepath',
+        save: () => {},
+        dangerouslyDelete: () => {},
+        close: () => {}
+    },
+    isAuthenticated: true
+}
+
+
+test('FileForm PropTypes', () => {
+    const conformingProps = {
+        repository: {
+            owner: {
+                username: 'username',
+                avatar_url: 'avatar_url',
+            },
+            name: 'name',
+            avatar_url: 'avatar_url',
+            permissions: {
+                push: true,
+            },
+            full_name: 'full_name',
+            default_branch: 'default_branch'
+        },
+        file:{
+            name: 'file.name',
+            path: 'file.path',
+            sha: 'file.sha',
+            content: 'file.content',
+            branch: 'file.branch',
+            filepath: 'filepath',
+            save: () => {},
+            dangerouslyDelete: () => {},
+            close: () => {}
+        },
+        isAuthenticated: true,
+    }
+    checkProps(FileCard, conformingProps);
+});
+
+describe('cardHeader',() => {
+    test('cardHeader is inside the document and visible', () => {
+        render(<FileCard {...defaultProps} />);
+        const cardHeader = screen.getByTestId('cardHeader');
+        expect(cardHeader).toBeInTheDocument();
+        expect(cardHeader).toBeVisible();
+    });
+})
+
+describe('blockEditable', () => {
+    test('blockEditable is inside the document', () => {
+        render(<FileCard {...defaultProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        expect(blockEditable).toBeInTheDocument();
+    });
+
+    test('blockEditable is editable when user is authenticated', () => {
+        render(<FileCard {...defaultProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        expect(blockEditable.value).toBe('changed text');
+    });
+
+    test('blockEditable is not editable when user is not authenticated', () => {
+        const updatedProps = {...defaultProps, isAuthenticated: false}
+        render(<FileCard {...updatedProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        expect(blockEditable.value).toBe(defaultProps.file.content);
+    });
+})
+
+describe('previewButton', () => {
+    test('previewButton is inside the document and visible', () => {
+        render(<FileCard {...defaultProps} />);
+        const previewButton = screen.getByTestId('previewButton');
+        expect(previewButton).toBeInTheDocument();
+        expect(previewButton).toBeVisible();
+    });
+})
+
+describe('previewIcon', () => {
+    test('Initially previewIconOutlined is inside the document and visible and previewIcon is not', () => {
+        render(<FileCard {...defaultProps} />);
+        const previewIconOutlined = screen.queryByTestId('previewIconOutlined');
+        expect(previewIconOutlined).toBeInTheDocument();
+        expect(previewIconOutlined).toBeVisible();
+        const previewIcon = screen.queryByTestId('previewIcon');
+        expect(previewIcon).toBeNull();
+    });
+
+    test('switch from previewIconOutlined to previewIcon and vice versa', () => {
+        render(<FileCard {...defaultProps} />);
+        const previewButton = screen.getByTestId('previewButton');
+        fireEvent.click(previewButton)
+        let previewIconOutlined = screen.queryByTestId('previewIconOutlined');
+        expect(previewIconOutlined).toBeNull();
+        let previewIcon = screen.queryByTestId('previewIcon');
+        expect(previewIcon).toBeInTheDocument();
+        expect(previewIcon).toBeVisible();
+        fireEvent.click(previewButton)
+        previewIconOutlined = screen.queryByTestId('previewIconOutlined');
+        expect(previewIconOutlined).toBeInTheDocument();
+        expect(previewIconOutlined).toBeVisible();
+        previewIcon = screen.queryByTestId('previewIcon');
+        expect(previewIcon).toBeNull();
+    });
+})
+
+describe('saveButton', () => {
+    test('saveButton is inside the document and visible and disabled initialy', () => {
+        render(<FileCard {...defaultProps} />);
+        const saveButton = screen.getByTestId('saveButton');
+        expect(saveButton).toBeInTheDocument();
+        expect(saveButton).toBeVisible();
+        expect(saveButton).toBeDisabled();
+    });
+
+    test('switch saveButton from enable to disable and vice versa', () => {
+        render(<FileCard {...defaultProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        let saveButton = screen.getByTestId('saveButton');
+        expect(saveButton).toBeEnabled();
+        fireEvent.change(blockEditable, {target: {value: defaultProps.file.content}});
+        saveButton = screen.getByTestId('saveButton');
+        expect(saveButton).toBeDisabled();
+    });
+
+    test('saveButton is enabled when the text change and the push permission is granted', () => {
+        render(<FileCard {...defaultProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        const saveButton = screen.getByTestId('saveButton');
+        expect(saveButton).toBeEnabled();
+    });
+
+    test('saveButton is disabled whenpush permission is not granted event it the text change or not', () => {
+        const updatedProps = {
+            ...defaultProps, 
+            repository: {...defaultProps.repository,
+                permissions: {
+                    ...defaultProps.repository.permissions, push: false
+                }
+            }
+        }
+        render(<FileCard {...updatedProps} />);
+        const saveButton = screen.getByTestId('saveButton');
+        expect(saveButton).toBeDisabled();
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        expect(saveButton).toBeDisabled();
+    });
+
+
+})
+
+describe('saveIcon', () => {
+    test('Initially saveIconOutlined is inside the document and visible and saveIcon is not', () => {
+        render(<FileCard {...defaultProps} />);
+        const saveIconOutlined = screen.queryByTestId('saveIconOutlined');
+        expect(saveIconOutlined).toBeInTheDocument();
+        expect(saveIconOutlined).toBeVisible();
+        const saveIcon = screen.queryByTestId('saveIcon');
+        expect(saveIcon).toBeNull();
+    });
+
+    test('switch from saveIconOutlined to saveIcon and vice versa', () => {
+        render(<FileCard {...defaultProps} />);
+        const blockEditable = screen.getByTestId('blockEditable');
+        fireEvent.change(blockEditable, {target: {value: 'changed text'}});
+        let saveIconOutlined = screen.queryByTestId('saveIconOutlined');
+        expect(saveIconOutlined).toBeNull();
+        let saveIcon = screen.queryByTestId('saveIcon');
+        expect(saveIcon).toBeInTheDocument();
+        expect(saveIcon).toBeVisible();
+        fireEvent.change(blockEditable, {target: {value: defaultProps.file.content}});
+        saveIconOutlined = screen.queryByTestId('saveIconOutlined');
+        expect(saveIconOutlined).toBeInTheDocument();
+        expect(saveIconOutlined).toBeVisible();
+        saveIcon = screen.queryByTestId('saveIcon');
+        expect(saveIcon).toBeNull();
+    });
+})
+
+
+describe('Delete button', () => {
+    test('Delete button is inside the document and visible', () => {
+        render(<FileCard {...defaultProps} />);
+        const deleteButton = screen.queryByTestId('deleteButton');
+        expect(deleteButton).toBeInTheDocument();
+        expect(deleteButton).toBeVisible();
+    });
+
+    test('Delete button is enabled when push permissions is granted', () => {
+        render(<FileCard {...defaultProps} />);
+        const deleteButton = screen.queryByTestId('deleteButton');
+        expect(deleteButton).toBeEnabled();
+    });
+
+    test('Delete button is disabled when push permissions is not granted', () => {
+        const updatedProps = {
+            ...defaultProps, 
+            repository: {...defaultProps.repository,
+                permissions: {
+                    ...defaultProps.repository.permissions, push: false
+                }
+            }
+        }
+        render(<FileCard {...updatedProps} />);
+        const deleteButton = screen.queryByTestId('deleteButton');
+        expect(deleteButton).toBeDisabled();
+    });
+})
+
+describe('closeButton', () => {
+    test('closeButton is inside the document and visible and enabled', () => {
+        render(<FileCard {...defaultProps} />);
+        const closeButton = screen.queryByTestId('closeButton');
+        expect(closeButton).toBeInTheDocument();
+        expect(closeButton).toBeVisible();
+        expect(closeButton).toBeEnabled();
+    });
+})

__mocks__/FileForm.test.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileForm from '../src/components/file/FileForm';
+import { checkProps } from './testUtils';
+
+const defaultProps = { onSubmit: () => {} }
+
+// render tests
+describe('TextFields',() => {
+    test('TextFields are inside the document', () => {
+        render(<FileForm {...defaultProps} />);
+        const branchTextField = screen.getByTestId('branch-textField');
+        expect(branchTextField).toBeInTheDocument();
+
+        const filepathTextField = screen.getByTestId('filepath-textField');
+        expect(filepathTextField).toBeInTheDocument();
+
+        const defaultContentTextField = screen.getByTestId('defaultContent-textField');
+        expect(defaultContentTextField).toBeInTheDocument();
+    });
+
+    test('TextFields are visible', () => {
+        render(<FileForm {...defaultProps} />);
+        const branchTextField = screen.getByTestId('branch-textField');
+        expect(branchTextField).toBeVisible();
+
+        const filepathTextField = screen.getByTestId('filepath-textField');
+        expect(filepathTextField).toBeVisible();
+
+        const defaultContentTextField = screen.getByTestId('defaultContent-textField');
+        expect(defaultContentTextField).toBeVisible();
+    });
+
+    test('TextFields handle input change correctly', () => {
+        render(<FileForm {...defaultProps} />);
+        const branchTextField = screen.getByTestId('branch-textField');
+        fireEvent.change(branchTextField, {target: {value: 'branch'}});
+        expect(branchTextField.value).toBe('branch');
+
+        const filepathTextField = screen.getByTestId('filepath-textField');
+        fireEvent.change(filepathTextField, {target: {value: 'filepath'}});
+        expect(filepathTextField.value).toBe('filepath');
+
+        const defaultContentTextField = screen.getByTestId('defaultContent-textField');
+        fireEvent.change(defaultContentTextField, {target: {value: 'defaultContent'}});
+        expect(defaultContentTextField.value).toBe('defaultContent');
+    });
+});
+
+describe('submit button',() => {
+    test('submit button is inside the document', () => {
+        render(<FileForm {...defaultProps} />);
+        const button = screen.getByTestId('button');
+        expect(button).toBeInTheDocument();
+    });
+    test('submit button is visible', () => {
+        render(<FileForm {...defaultProps} />);
+        const button = screen.getByTestId('button');
+        expect(button).toBeVisible();
+    });
+    test('submit button is disabled initially ', () => {
+        render(<FileForm {...defaultProps} />);
+        const button = screen.getByTestId('button');
+        expect(button).toBeDisabled();
+    });
+    test('submit button enabled/disable according to the input value of the branch and the filePath', () => {
+        render(<FileForm {...defaultProps} />);
+        const button = screen.getByTestId('button');
+        const branchTextField = screen.getByTestId('branch-textField');
+        const filepathTextField = screen.getByTestId('filepath-textField');
+        fireEvent.change(filepathTextField, {target: {value: 'filepath'}});
+        fireEvent.change(branchTextField, {target: {value: 'branch'}});
+        expect(button).toBeEnabled();
+        fireEvent.change(filepathTextField, {target: {value: ''}});
+        expect(button).toBeDisabled();
+        fireEvent.change(branchTextField, {target: {value: 'branch'}});
+        fireEvent.change(filepathTextField, {target: {value: ''}});
+        expect(button).toBeDisabled();
+    });
+});
+
+// PropTypes tests
+test('FileForm PropTypes', () => {
+    const conformingProps = {
+        submitText: "text",
+        onSubmit: () => {},
+        branch: 'branch',
+        filepath: 'filepath',
+        defaultContent: 'defaultContent',
+    }
+    checkProps(FileForm, conformingProps)
+});

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+module.exports = 'test-file-stub';
+import '@testing-library/jest-dom'

__mocks__/testUtils.js

@@ -0,0 +1,12 @@
+import checkPropTypes from 'check-prop-types';
+
+export const findByAttribute = (wrapper, attribute) => wrapper.find(`[data-test='${attribute}']`)
+
+export const checkProps = (component, conformingProps) => {
+    const propError = checkPropTypes(
+        component.propTypes,
+        conformingProps,
+        'prop',
+        component.name);
+    expect(propError).toBeUndefined();
+}

jest.enzyme.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    'roots': [
+      '<rootDir>/__mocks__',
+    ],
+    'moduleNameMapper': {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "identity-obj-proxy"
+    },
+    setupFilesAfterEnv: ['<rootDir>/__mocks__/fileMock']
+  };

package.json

@@ -29,6 +29,7 @@
     "test:e2e": "NODE_ENV=test start-test 6060 cypress:run && nyc report --reporter=json-summary",
     "test:unit": "NODE_ENV=test jest ./src/core --coverage && cat ./coverage/lcov.info | coveralls",
     "test": "nyc --exclude-after-remap=false npm run test:e2e",
+    "testJestReactTestingLibrary": "jest --watch -c ./jest.enzyme.config.js --verbose",
     "create-coverage-badge": "bash scripts/create-badge-json.sh"
   },
   "browserslist": [
@@ -55,6 +56,10 @@
     "@istanbuljs/nyc-config-typescript": "0.1.3",
     "@material-ui/core": "^4.7.0",
     "@material-ui/icons": "^4.9.1",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^13.2.1",
     "@types/base-64": "0.1.3",
     "@types/cypress": "1.1.3",
     "@types/jest": "^25.2.1",
@@ -66,14 +71,18 @@
     "babel-jest": "24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-istanbul": "6.0.0",
+    "check-prop-types": "^1.1.2",
     "coveralls": "3.0.7",
     "cypress": "^6.8.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
     "eslint-plugin-chai-friendly": "0.5.0",
     "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-mdx": "1.0.1",
     "eslint-plugin-react": "7.19.0",
+    "identity-obj-proxy": "^3.0.0",
     "istanbul-lib-coverage": "2.0.5",
     "jest": "24.9.0",
     "lorem-ipsum": "2.0.1",

src/components/file/FileCard.js

@@ -22,54 +22,71 @@ const useStyles = makeStyles(theme => ({
 }));
 
 function FileCard({
-  authentication,
+  isAuthenticated,
   repository,
   file,
 }) {
   const classes = useStyles();
   const [preview, setPreview] = useState(true);
-  const [markdown, setMarkdown] = useState(file ? file.content : '');
+  const [markdown, setMarkdown] = useState('');
   const changed = (markdown !== (file && file.content));
   const avatarUrl = repository.avatar_url || repository.owner.avatar_url;
   const access = repository.permissions.push;
 
   useEffect(() => {
-    setMarkdown(file && file.content);
+    setMarkdown(file && file.content ? file.content : '');
   }, [file]);
 
   const branch = (file && file.branch) ? file.branch : repository.default_branch;
 
   return (
-    <Card>
+    <Card
+      data-testid="component-fileCard"
+    >
       <CardHeader
         avatar={<Avatar src={avatarUrl} />}
         title={<strong>{file && file.path}</strong>}
         subheader={repository.full_name + '/' + branch}
+        data-testid="cardHeader"
       />
       <CardContent>
-        <Paper>
+        <Paper data-testid="BlockEditable">
           <BlockEditable
             preview={preview}
             markdown={markdown}
             onEdit={setMarkdown}
-            editable={!!authentication}
+            editable={isAuthenticated}
           />
         </Paper>
       </CardContent>
       <CardActions>
         <div className={classes.actions}>
-          <IconButton className={classes.action} aria-label="Preview" onClick={() => setPreview(!preview)}>
-            {!preview ? <Pageview /> : <PageviewOutlined />}
+          <IconButton 
+            className={classes.action}
+            aria-label="Preview"
+            onClick={() => setPreview(!preview)}
+            data-testid="previewButton"
+          >
+            {
+              !preview ?
+                <Pageview data-testid="previewIcon"/> :
+                <PageviewOutlined data-testid="previewIconOutlined"/>
+            }
           </IconButton>
           <IconButton
             className={classes.action}
             aria-label="Save"
-            disabled={!access}
+            disabled={!access || !changed}
             onClick={() => {
               if (changed) file.save(markdown);
             }}
+            data-testid="saveButton"
           >
-            {changed ? <Save /> : <SaveOutlined />}
+            {
+              changed ? 
+              <Save data-testid="saveIcon" /> : 
+              <SaveOutlined data-testid="saveIconOutlined" />
+            }
           </IconButton>
           <IconButton
             className={classes.action}
@@ -82,12 +99,14 @@ function FileCard({
 
               if (confirmation) file.dangerouslyDelete();
             }}
+            data-testid="deleteButton"
           >
             <DeleteSweepOutlined />
           </IconButton>
           <IconButton
             title="Close Repository"
             onClick={file.close}
+            data-testid="closeButton"
           >
             <CancelOutlined />
           </IconButton>
@@ -106,6 +125,11 @@ FileCard.propTypes = {
     }),
     name: PropTypes.string.isRequired,
     avatar_url: PropTypes.string,
+    permissions: PropTypes.shape({
+      push: PropTypes.bool,
+    }).isRequired,
+    full_name: PropTypes.string.isRequired,
+    default_branch: PropTypes.string.isRequired, 
   }).isRequired,
   /** Pass a previously returned file object to bypass the selection. */
   file: PropTypes.shape({
@@ -115,13 +139,12 @@ FileCard.propTypes = {
     content: PropTypes.string,
     branch: PropTypes.string,
     filepath: PropTypes.string,
+    save: PropTypes.func.isRequired,
+    dangerouslyDelete: PropTypes.func.isRequired,
+    close: PropTypes.func.isRequired
   }),
   /** Pass a previously returned authentication object to bypass login. */
-  authentication: PropTypes.shape({
-    user: PropTypes.object.isRequired,
-    token: PropTypes.object.isRequired,
-    config: PropTypes.object.isRequired,
-  }),
+  isAuthenticated: PropTypes.bool,
 };
 
 export default FileCard;

src/components/file/FileForm.js

@@ -17,28 +17,34 @@ function FileForm({
   const disabled = !(filepath);
 
   return (
-    <Paper style={{ marginBottom: '1em', padding: '1.3em' }}>
+    <Paper 
+      style={{ marginBottom: '1em', padding: '1.3em' }}
+    >
       <form>
         <button type="submit" disabled style={{ display: 'none' }} aria-hidden="true"></button>
         <TextField
           name='branch' label='branch' type='text' autoComplete={null}
-          variant="outlined" margin="normal" fullWidth defaultValue={branch}
+          variant="outlined" margin="normal" fullWidth defaultValue={'branch'}
           onChange={(e) => setBranch(e.target.value)}
+          inputProps={{ "data-testid": "branch-textField" }}
         />
         <TextField
           name='filepath' label='filepath' type='text' autoComplete={null}
           variant="outlined" margin="normal" fullWidth defaultValue={filepath}
           onChange={(e) => setFilepath(e.target.value)}
+          inputProps={{ "data-testid": "filepath-textField" }}
         />
         <TextField
           name='defaultContent' label='defaultContent' type='text' multiline={true} autoComplete={null}
           variant="outlined" margin="normal" fullWidth defaultValue={defaultContent}
           onChange={(e) => setDefaultContent(e.target.value)}
+          inputProps={{ "data-testid": "defaultContent-textField" }}
         />
         <Button type="button" disabled={disabled} fullWidth variant="contained" color="primary"
           onClick={() => onSubmit({
             branch, filepath, defaultContent,
           })}
+          data-testid="button"
         >
           {submitText}
         </Button>
@@ -52,6 +58,9 @@ FileForm.propTypes = {
   submitText: PropTypes.string,
   /** Function run when submit button is clicked */
   onSubmit: PropTypes.func.isRequired,
+  branch: PropTypes.string,
+  filepath: PropTypes.string,
+  defaultContent: PropTypes.string,
 };
 
 FileForm.defaultProps = { submitText: 'Submit' };

src/components/file/useFile.js

@@ -60,7 +60,7 @@ function useFile({
 
   useEffect(() => {
     setIsChanged(false);
-  }, [file, deleted, closed]);
+  }, [file, deleted]);
 
   const read = useCallback(async (_filepath) => {
     if (onFilepath) {
@@ -187,7 +187,7 @@ function useFile({
     browse: repository && blobComponents.browse,
     fileCard: repository && file && (
       <FileCard
-        authentication={authentication}
+        authentication={Object.keys(authentication).length === 0}
         repository={repository}
         file={{ ...file, ...actions }}
       />