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();
+    });
+})