diff --git a/.env b/.env new file mode 100644 index 0000000..c2178f5 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +VITE_TAGGUN_API_KEY=65d90c50f6b911ee9433edbb2578dfab +VITE_SECRET_KEY=Bs2LMXC0BCli2QxblUagHCbpryioVow2 diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3e212e1..d386997 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,6 +1,6 @@ module.exports = { root: true, - env: { browser: true, es2020: true }, + env: { browser: true, es2020: true, jest: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js new file mode 100644 index 0000000..aae94a8 --- /dev/null +++ b/__mocks__/fileMock.js @@ -0,0 +1,3 @@ +// __mocks__/fileMock.js +const path = require('path'); +module.exports = path.join(__dirname, 'fileMock.js'); diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js new file mode 100644 index 0000000..a099545 --- /dev/null +++ b/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; \ No newline at end of file diff --git a/__tests__/react.test.js b/__tests__/react.test.js new file mode 100644 index 0000000..0b06717 --- /dev/null +++ b/__tests__/react.test.js @@ -0,0 +1,150 @@ +jest.mock('@ant-design/plots', () => ({ + Pie: () => null, + })); +import React from 'react' +import App from '../src/App'; +import Home from '../src/components/Home'; +import TitleHeader from '../src/components/TitleHeader'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import userEvent from '@testing-library/user-event'; +import UploadButton from '../src/components/UploadButton'; +import Footer from '../src/components/Footer'; +import Instructions from '../src/components/Instructions'; +import Pie from '../src/components/Pie'; +import DragAndDrop from '../src/components/DragAndDrop'; +import ProgressBar from '../src/components/ProgressBar'; +import axios from 'axios'; + +// Mock axios post request +jest.mock('axios'); + +describe('Testing React components', () => { + + xdescribe('App', () => { + it('renders the App component', () => { + render(); + }) + }); + + xdescribe('Title Header', () => { + + it('renders title header', () => { + const { getByText } = render(); + const titleElement = getByText('AxoScan') + expect(titleElement).toBeInTheDocument(); + + + }); + it ('renders correct styles for title header', () => { + const { getByTestId } = render(); + const cardElement = getByTestId('title-header-card'); + // console.log(titleElement); + expect(cardElement).toHaveStyle(` + color: white; + backgroundColor: '#272727', + border: 'none', + width: '100%', + height: '80px', + borderRadius: 0, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + `); + }); + }); + + xdescribe('UploadButton', () => { + + it('renders correctly', () => { + const mockSetHasUploaded = jest.fn(); + render(); + expect(screen.getByText(/Back to Upload/i)).toBeInTheDocument(); + expect(screen.getByRole('button')).toHaveStyle('marginBottom: 50px'); + }); + + it('calls setHasUploaded with false on click', () => { + const mockSetHasUploaded = jest.fn(); + render(); + fireEvent.click(screen.getByText(/Back to Upload/i)); + expect(mockSetHasUploaded).toHaveBeenCalledWith(false); + }); + }) + + xdescribe('Footer', ()=> { + + it('renders correctly', () => { + render(