From 6c90be0541a436bfe827eaf42809082e9ea334bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Flausino=20de=20Lima?= Date: Tue, 18 Jun 2024 12:57:07 -0300 Subject: [PATCH] Added Test Config files changes to work with d3-scale (https://github.com/mui/mui-x/issues/11568) --- frontend/goldinvesting/.babelrc | 5 +- frontend/goldinvesting/src/jest.config.js | 14 ++++ frontend/goldinvesting/src/setupTests.ts | 12 +-- .../goldinvesting/src/tests/Login.test.tsx | 83 +++++++++++++++++++ .../goldinvesting/src/tests/News.test.tsx | 64 ++++++++++++++ 5 files changed, 171 insertions(+), 7 deletions(-) create mode 100644 frontend/goldinvesting/src/jest.config.js create mode 100644 frontend/goldinvesting/src/tests/Login.test.tsx create mode 100644 frontend/goldinvesting/src/tests/News.test.tsx diff --git a/frontend/goldinvesting/.babelrc b/frontend/goldinvesting/.babelrc index 456751f..8b951e9 100644 --- a/frontend/goldinvesting/.babelrc +++ b/frontend/goldinvesting/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"] -} \ No newline at end of file + "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] + } + \ No newline at end of file diff --git a/frontend/goldinvesting/src/jest.config.js b/frontend/goldinvesting/src/jest.config.js new file mode 100644 index 0000000..a1a5834 --- /dev/null +++ b/frontend/goldinvesting/src/jest.config.js @@ -0,0 +1,14 @@ +module.exports = { + // ... other configurations + transform: { + "^.+\\.[t|j]sx?$": "babel-jest", + "^.+\\.svg$": "jest-transform-stub", + "^.+\\.css$": "jest-transform-stub", + }, + moduleNameMapper: { + "\\.(css|less|scss|sass)$": "identity-obj-proxy", + }, + + setupFilesAfterEnv: ['/src/setupTests.ts'], + }; + \ No newline at end of file diff --git a/frontend/goldinvesting/src/setupTests.ts b/frontend/goldinvesting/src/setupTests.ts index b28b910..5ff707a 100644 --- a/frontend/goldinvesting/src/setupTests.ts +++ b/frontend/goldinvesting/src/setupTests.ts @@ -1,5 +1,7 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; \ No newline at end of file +// setupTests.ts +import '@testing-library/jest-dom/extend-expect'; + +// Mocking the PieChart component globally +jest.mock('@mui/x-charts/PieChart', () => ({ + PieChart: jest.fn().mockImplementation(({ children }) => children), +})); diff --git a/frontend/goldinvesting/src/tests/Login.test.tsx b/frontend/goldinvesting/src/tests/Login.test.tsx new file mode 100644 index 0000000..706a44c --- /dev/null +++ b/frontend/goldinvesting/src/tests/Login.test.tsx @@ -0,0 +1,83 @@ +// Login.test.tsx +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { MemoryRouter } from 'react-router-dom'; +import { createStore } from 'redux'; +import Login from '../Pages/login/Login'; +import rootReducer from '../store/rootReducer'; +import LocalStorageService from '../app/services/localStorageService'; + +jest.mock('../app/services/localStorageService'); + +const store = createStore(rootReducer); + +describe('Login Component', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + test('renders login form', () => { + render( + + + + + + ); + + expect(screen.getByLabelText(/E-mail/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Senha/i)).toBeInTheDocument(); + expect(screen.getByText(/Login/i)).toBeInTheDocument(); + }); + + test('shows error message when fields are empty', () => { + render( + + + + + + ); + + fireEvent.click(screen.getByText(/Entrar/i)); + + expect(screen.getByText(/Preencha todos os campos/i)).toBeInTheDocument(); + }); + + test('shows error message with invalid credentials', () => { + render( + + + + + + ); + + fireEvent.change(screen.getByLabelText(/E-mail/i), { target: { value: 'wrong' } }); + fireEvent.change(screen.getByLabelText(/Senha/i), { target: { value: 'wrong' } }); + fireEvent.click(screen.getByText(/Entrar/i)); + + expect(screen.getByText(/Invalid username or password/i)).toBeInTheDocument(); + }); + + test('calls login with correct credentials', () => { + const fakeUser = 'user'; + const fakePassword = 'password'; + + render( + + + + + + ); + + fireEvent.change(screen.getByLabelText(/E-mail/i), { target: { value: fakeUser } }); + fireEvent.change(screen.getByLabelText(/Senha/i), { target: { value: fakePassword } }); + fireEvent.click(screen.getByText(/Entrar/i)); + + expect(LocalStorageService.addItem).toHaveBeenCalledWith('isAuthenticated', true); + expect(LocalStorageService.addItem).toHaveBeenCalledWith('user', fakeUser); + }); +}); diff --git a/frontend/goldinvesting/src/tests/News.test.tsx b/frontend/goldinvesting/src/tests/News.test.tsx new file mode 100644 index 0000000..04730c4 --- /dev/null +++ b/frontend/goldinvesting/src/tests/News.test.tsx @@ -0,0 +1,64 @@ +// InvestmentCalculator.test.tsx +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import InvestmentCalculator from '../Pages/simulateInvestment/SimulateInvestment'; +import { Provider } from 'react-redux'; +import { createStore } from 'redux'; +import rootReducer from '../store/rootReducer'; + + +// Mocking the PieChart component +jest.mock('@mui/x-charts/PieChart', () => ({ + PieChart: jest.fn().mockImplementation(({ children }) =>
{children}
), + })); + + const store = createStore(rootReducer); + + describe('InvestmentCalculator Component', () => { + test('renders the form fields correctly', () => { + render( + + + + ); + + expect(screen.getByLabelText(/Initial Investment/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Monthly Inflation Rate/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Monthly Contribution/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Investment Period \(months\)/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Monthly Interest Rate/i)).toBeInTheDocument(); + }); + + test('shows error message when required fields are empty', () => { + render( + + + + ); + + fireEvent.click(screen.getByText(/Calculate/i)); + + expect(screen.getByText(/Please fill in all required fields with valid numbers./i)).toBeInTheDocument(); + }); + + test('calculates and displays results when form is submitted with valid inputs', () => { + render( + + + + ); + + fireEvent.change(screen.getByLabelText(/Initial Investment/i), { target: { value: '1000' } }); + fireEvent.change(screen.getByLabelText(/Monthly Inflation Rate/i), { target: { value: '0.5' } }); + fireEvent.change(screen.getByLabelText(/Monthly Contribution/i), { target: { value: '100' } }); + fireEvent.change(screen.getByLabelText(/Investment Period \(months\)/i), { target: { value: '12' } }); + fireEvent.change(screen.getByLabelText(/Monthly Interest Rate/i), { target: { value: '1' } }); + + fireEvent.click(screen.getByText(/Calculate/i)); + + expect(screen.getByText(/Results:/i)).toBeInTheDocument(); + expect(screen.getByText(/Future Value:/i)).toBeInTheDocument(); + expect(screen.getByText(/Total Invested:/i)).toBeInTheDocument(); + expect(screen.getByText(/Gross Profit:/i)).toBeInTheDocument(); + }); + }); \ No newline at end of file