From bf716a9cfd56ba42e08f8fa30f658d0a76bb75b5 Mon Sep 17 00:00:00 2001 From: Sunny Sahsi Date: Tue, 7 Nov 2023 21:25:13 +0530 Subject: [PATCH] UI : removed uncessary buttons and improve UI (#35) * UI : removed uncessary buttons and improve UI * feat: add test component * config: add changes to not generate snapshots * config: add changes to not generate snapshots * test: removing test which generate snpshots * test: improve test of dashboard page * fix: change backend API URL --- .github/workflows/pre-commit-checks.yml | 2 +- .gitignore | 1 - __tests__/components/Navbar.test.tsx | 16 +++- __tests__/components/ProfileIcon.test.tsx | 5 -- __tests__/components/Toast.test.tsx | 25 ++++++ __tests__/hello.test.tsx | 10 --- __tests__/pages/dashboard.test.tsx | 100 ++++++++++++++++++++++ __tests__/pages/login.test.tsx | 5 -- jest.config.js | 1 + package.json | 2 +- src/components/Navbar/index.tsx | 10 --- src/components/Toast/index.tsx | 33 +++++++ src/constants/url.ts | 2 +- src/pages/dashboard/index.tsx | 76 ++++++++-------- 14 files changed, 210 insertions(+), 78 deletions(-) create mode 100644 __tests__/components/Toast.test.tsx delete mode 100644 __tests__/hello.test.tsx create mode 100644 __tests__/pages/dashboard.test.tsx create mode 100644 src/components/Toast/index.tsx diff --git a/.github/workflows/pre-commit-checks.yml b/.github/workflows/pre-commit-checks.yml index 043e47d..b117cd7 100644 --- a/.github/workflows/pre-commit-checks.yml +++ b/.github/workflows/pre-commit-checks.yml @@ -35,4 +35,4 @@ jobs: run: yarn format:check - name: Test check - run: yarn test -u + run: yarn test diff --git a/.gitignore b/.gitignore index eef19c9..b7d2741 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,6 @@ # testing /coverage -./__tests__/__snapshots__ # next.js /.next/ diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx index ac626e3..8ef8642 100644 --- a/__tests__/components/Navbar.test.tsx +++ b/__tests__/components/Navbar.test.tsx @@ -13,9 +13,7 @@ describe('Navbar', () => { it('should have dropdown menu', () => { const { container } = render(); expect(container.querySelector('ul')).toBeInTheDocument(); - expect(container.querySelector('ul')).toContainHTML('Profile'); expect(container.querySelector('ul')).toContainHTML('Dashboard'); - expect(container.querySelector('ul')).toContainHTML('Settings'); expect(container.querySelector('ul')).toContainHTML('Sign Out'); }); @@ -24,7 +22,10 @@ describe('Navbar', () => { const googleLoginButton = screen.getByTestId('google-login'); expect(googleLoginButton).toBeInTheDocument(); expect(googleLoginButton).toHaveTextContent('Sign In'); - expect(googleLoginButton).toHaveAttribute('href', 'https://api-tinysite.onrender.com/v1/auth/google/login'); + expect(googleLoginButton).toHaveAttribute( + 'href', + 'https://staging-tinysite-api.realdevsquad.com/v1/auth/google/login' + ); }); it('should display "Sign In" when not logged in', () => { @@ -48,4 +49,13 @@ describe('Navbar', () => { const signInButton = screen.getByText('Sign In'); expect(signInButton).toBeInTheDocument(); }); + + it('should display "Sign Out" when logged in', () => { + render(); + const originalIsLoggedIn = screen.getByText('Sign In'); + fireEvent.click(originalIsLoggedIn); + + const signOutButton = screen.getByText('Sign Out'); + expect(signOutButton).toBeInTheDocument(); + }); }); diff --git a/__tests__/components/ProfileIcon.test.tsx b/__tests__/components/ProfileIcon.test.tsx index fe2ba6e..ef5d75a 100644 --- a/__tests__/components/ProfileIcon.test.tsx +++ b/__tests__/components/ProfileIcon.test.tsx @@ -3,11 +3,6 @@ import { render } from '@testing-library/react'; import ProfileIcon from '@/components/ProfileIcon/ProfileIcon'; describe('ProfileIcon', () => { - it('should render', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - it('should have the correct initials', () => { const { container } = render(); expect(container).toHaveTextContent('SS'); diff --git a/__tests__/components/Toast.test.tsx b/__tests__/components/Toast.test.tsx new file mode 100644 index 0000000..a54a10c --- /dev/null +++ b/__tests__/components/Toast.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import Toast from '../../src/components/Toast'; + +describe('Toast', () => { + const onDismiss = jest.fn(); + + test('should render the toast component with the message', () => { + render(); + + expect(screen.getByText('This is a toast message')).toBeInTheDocument(); + }); + + test('should not call onDismiss function when the timeToShow is not completed', () => { + render(); + + expect(onDismiss).not.toHaveBeenCalled(); + }); + + test('should call onDismiss function when the timeToShow is completed', async () => { + render(); + + await waitFor(() => expect(onDismiss).toHaveBeenCalled()); + }); +}); diff --git a/__tests__/hello.test.tsx b/__tests__/hello.test.tsx deleted file mode 100644 index e62397d..0000000 --- a/__tests__/hello.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Hello } from '../src/app/hello'; - -describe('Hello', () => { - it('should render', () => { - const { container } = render(); - expect(container).toHaveTextContent('Hello'); - }); -}); diff --git a/__tests__/pages/dashboard.test.tsx b/__tests__/pages/dashboard.test.tsx new file mode 100644 index 0000000..609de23 --- /dev/null +++ b/__tests__/pages/dashboard.test.tsx @@ -0,0 +1,100 @@ +import Dashboard from '../../src/pages/dashboard'; +import { render, screen, fireEvent, act } from '@testing-library/react'; + +describe('Dashboard Component', () => { + const mockWriteText = jest.fn(); + global.navigator.clipboard = { writeText: mockWriteText }; + + test('renders the Dashboard component', () => { + render(); + const urlInput = screen.getByPlaceholderText('🔗 Enter the URL'); + const generateButton = screen.getByText('Generate'); + const copyButton = screen.getByTestId('copy-button'); + + expect(urlInput).toBeInTheDocument(); + expect(generateButton).toBeInTheDocument(); + expect(copyButton).toBeInTheDocument(); + }); + + test('generates a short URL when clicking the Generate button', () => { + render(); + const generateButton = screen.getByText('Generate'); + const shortUrlInput = screen.getByPlaceholderText('Copy the URL'); + + fireEvent.click(generateButton); + const shortUrlValue = shortUrlInput.value; + + expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/); + }); + + it('should have two inputs and two buttons', () => { + render(); + + const urlInput = screen.getByPlaceholderText('🔗 Enter the URL'); + expect(urlInput).toBeInTheDocument(); + const shortUrlInput = screen.getByPlaceholderText('Copy the URL'); + expect(shortUrlInput).toBeInTheDocument(); + + const generateButton = screen.getByText('Generate'); + expect(generateButton).toBeInTheDocument(); + + const copyButton = screen.getByTestId('copy-button'); + expect(copyButton).toBeInTheDocument(); + }); + + it('should get the value from the input box', () => { + render(); + const urlInput = screen.getByPlaceholderText('🔗 Enter the URL'); + fireEvent.change(urlInput, { target: { value: 'https://www.google.com' } }); + expect(urlInput.value).toBe('https://www.google.com'); + }); + + test('should generate the short url when clicking the generate button', () => { + render(); + const generateButton = screen.getByText('Generate'); + fireEvent.click(generateButton); + const shortUrlInput = screen.getByPlaceholderText('Copy the URL'); + const shortUrlValue = shortUrlInput.value; + expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/); + }); + + it('should copy the short url when clicking the copy button', () => { + render(); + const generateButton = screen.getByText('Generate'); + fireEvent.click(generateButton); + const shortUrlInput = screen.getByPlaceholderText('Copy the URL'); + const shortUrlValue = shortUrlInput.value; + expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/); + const copyButton = screen.getByTestId('copy-button'); + fireEvent.click(copyButton); + expect(mockWriteText).toHaveBeenCalledWith(shortUrlValue); + }); + + test('should show toast message when clicking the copy button', () => { + render(); + const copyButton = screen.getByTestId('copy-button'); + fireEvent.click(copyButton); + const toast = screen.getByTestId('toast'); + expect(toast).toBeInTheDocument(); + }); + + test('should not show toast message when not clicking the copy button', () => { + render(); + const toast = screen.queryByTestId('toast'); + expect(toast).not.toBeInTheDocument(); + }); + + test('should not show toast message after 3 seconds', async () => { + jest.useFakeTimers(); + render(); + const copyButton = screen.getByTestId('copy-button'); + fireEvent.click(copyButton); + const toast = screen.getByTestId('toast'); + expect(toast).toBeInTheDocument(); + await act(async () => { + jest.advanceTimersByTime(3000); + }); + render(); + expect(toast).not.toBeInTheDocument(); + }); +}); diff --git a/__tests__/pages/login.test.tsx b/__tests__/pages/login.test.tsx index 6b1da04..21a5fe2 100644 --- a/__tests__/pages/login.test.tsx +++ b/__tests__/pages/login.test.tsx @@ -2,11 +2,6 @@ import { fireEvent, render } from '@testing-library/react'; import LoginPage from '../../src/pages/login'; describe('LoginPage', () => { - it('should render without throwing an error', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - it('should render username input', () => { const { getByLabelText } = render(); const usernameInput = getByLabelText('username') as HTMLInputElement; diff --git a/jest.config.js b/jest.config.js index 213f270..5a85076 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,6 +7,7 @@ const createJestConfig = nextJest({ const customJestConfig = { setupFilesAfterEnv: ['/jest.setup.js'], testEnvironment: 'jest-environment-jsdom', + snapshotSerializers: [], }; module.exports = createJestConfig(customJestConfig); diff --git a/package.json b/package.json index 708fd43..0777cd7 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "check:all": "yarn format:check && yarn lint:check", "fix:all": "yarn format:fix && yarn lint:fix", "prepare": "husky install", - "test": "jest --coverage -u", + "test": "jest --coverage", "lint": "eslint .", "lint-fix": "eslint . --fix" }, diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 5c1dfae..804aceb 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -57,21 +57,11 @@ const Navbar: React.FC = () => { )}