From d1a3071163a8cf3884803321963384f0a0b25680 Mon Sep 17 00:00:00 2001 From: KRISH Date: Sat, 9 Aug 2025 02:01:49 +0530 Subject: [PATCH 1/4] test: add unit tests for GeneralCompliantComponent --- .../GeneralCompliantComponent.test.tsx | 73 +++++++++++++++++++ frontend/package.json | 1 + 2 files changed, 74 insertions(+) create mode 100644 frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx diff --git a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx new file mode 100644 index 0000000000..175289e9fe --- /dev/null +++ b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx @@ -0,0 +1,73 @@ +import { render } from '@testing-library/react'; +import { screen } from '@testing-library/dom'; + +import '@testing-library/jest-dom'; +import { faCertificate } from '@fortawesome/free-solid-svg-icons'; + +import GeneralCompliantComponent from '../../../src/components/GeneralCompliantComponent'; + +type GeneralCompliantComponentProps = { + compliant: boolean; + icon: any; + title: string; +}; + +describe('GeneralCompliantComponent', () => { + const baseProps: GeneralCompliantComponentProps = { + compliant: true, + icon: faCertificate, + title: 'Test Title', + }; + + it('renders successfully with minimal required props', () => { + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + }); + + it('applies correct color for compliant=true', () => { + const { container } = render(); + const icon = container.querySelector('.text-green-400/80'); + expect(icon).toBeInTheDocument(); + }); + + it('applies correct color for compliant=false', () => { + const { container } = render(); + const icon = container.querySelector('.text-red-400/80'); + expect(icon).toBeInTheDocument(); + }); + + it('renders the correct icon and title', () => { + render(); + expect(screen.getByText('My Title')).toBeInTheDocument(); + }); + + it('renders tooltip with the title', () => { + const { getByText } = render(); + // Tooltip content is rendered, but may require hover simulation in real DOM + expect(getByText('Tooltip Title')).toBeInTheDocument(); + }); + + it('handles edge case: empty title', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); + }); + + it('has accessible role and label', () => { + const { getByLabelText } = render( +
+ +
+ ); + expect(getByLabelText('compliance-icon')).toBeInTheDocument(); + }); + + it('renders with custom icon', () => { + const customIcon = faCertificate; // Replace with another icon if needed + const { container } = render(); + expect(container.querySelector('svg')).toBeInTheDocument(); + }); + + // Add more tests as needed for event handling, state, etc. +}); + +// ...existing code... diff --git a/frontend/package.json b/frontend/package.json index 8183f8339a..0485704bd9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -70,6 +70,7 @@ "@swc/core": "^1.13.3", "@swc/jest": "^0.2.39", "@tailwindcss/postcss": "^4.1.11", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.6.4", "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", From ecb80308c20304a0a860a41d7228c71af2e32a92 Mon Sep 17 00:00:00 2001 From: KRISH Date: Sat, 9 Aug 2025 02:27:14 +0530 Subject: [PATCH 2/4] fix(#1835): Refactor tests based on reviewer feedback --- .../GeneralCompliantComponent.test.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx index 175289e9fe..76f7531f4e 100644 --- a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx +++ b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx @@ -1,5 +1,4 @@ -import { render } from '@testing-library/react'; -import { screen } from '@testing-library/dom'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { faCertificate } from '@fortawesome/free-solid-svg-icons'; @@ -24,16 +23,18 @@ describe('GeneralCompliantComponent', () => { expect(screen.getByText('Test Title')).toBeInTheDocument(); }); - it('applies correct color for compliant=true', () => { - const { container } = render(); - const icon = container.querySelector('.text-green-400/80'); - expect(icon).toBeInTheDocument(); - }); + it('applies correct color for compliant=true', () => { + const { container } = render(); + const svg = container.querySelector('svg'); // Find the SVG icon + expect(svg).toBeInTheDocument(); + expect(svg).toHaveClass('text-green-400/80'); // Check for the specific class +}); it('applies correct color for compliant=false', () => { const { container } = render(); - const icon = container.querySelector('.text-red-400/80'); - expect(icon).toBeInTheDocument(); + const svg = container.querySelector('svg'); // Find the SVG icon + expect(svg).toBeInTheDocument(); + expect(svg).toHaveClass('text-red-400/80'); // Check for the specific class }); it('renders the correct icon and title', () => { @@ -53,13 +54,12 @@ describe('GeneralCompliantComponent', () => { }); it('has accessible role and label', () => { - const { getByLabelText } = render( -
- -
- ); - expect(getByLabelText('compliance-icon')).toBeInTheDocument(); - }); + render(); + const iconElement = screen.getByText(baseProps.title); // Asserts the title text is visible + expect(iconElement).toBeInTheDocument(); + // Or, if the icon has a specific role, you can check for that + // expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); +}); it('renders with custom icon', () => { const customIcon = faCertificate; // Replace with another icon if needed From 478c3939476c7f757bdfa075b249cbd067f0f382 Mon Sep 17 00:00:00 2001 From: Kate Date: Fri, 15 Aug 2025 16:19:55 -0700 Subject: [PATCH 3/4] Fix make check and revert unnecessary changes --- cspell/custom-dict.txt | 1 + .../GeneralCompliantComponent.test.tsx | 111 ++++++++++-------- frontend/package.json | 1 - 3 files changed, 61 insertions(+), 52 deletions(-) diff --git a/cspell/custom-dict.txt b/cspell/custom-dict.txt index b9365e4c76..89048d1daf 100644 --- a/cspell/custom-dict.txt +++ b/cspell/custom-dict.txt @@ -114,6 +114,7 @@ slackbot slideshare speakerdeck superfences +svgs tiktok tsc turbopack diff --git a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx index 76f7531f4e..18ff470575 100644 --- a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx +++ b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx @@ -1,73 +1,82 @@ -import { render, screen } from '@testing-library/react'; +import { IconProp } from '@fortawesome/fontawesome-svg-core' +import { faCertificate } from '@fortawesome/free-solid-svg-icons' +import { render, screen } from '@testing-library/react' +import React from 'react' -import '@testing-library/jest-dom'; -import { faCertificate } from '@fortawesome/free-solid-svg-icons'; +import '@testing-library/jest-dom' -import GeneralCompliantComponent from '../../../src/components/GeneralCompliantComponent'; +// Mock the Tooltip component to prevent async state update warnings +jest.mock('@heroui/tooltip', () => ({ + Tooltip: ({ children, content }: { children: React.ReactNode; content: string }) => ( +
+ {children} +
+ ), +})) + +import GeneralCompliantComponent from 'components/GeneralCompliantComponent' type GeneralCompliantComponentProps = { - compliant: boolean; - icon: any; - title: string; -}; + compliant: boolean + icon: IconProp + title: string +} describe('GeneralCompliantComponent', () => { const baseProps: GeneralCompliantComponentProps = { compliant: true, icon: faCertificate, title: 'Test Title', - }; + } it('renders successfully with minimal required props', () => { - render(); - expect(screen.getByText('Test Title')).toBeInTheDocument(); - }); + const { container } = render() + expect(container).toBeInTheDocument() + }) - it('applies correct color for compliant=true', () => { - const { container } = render(); - const svg = container.querySelector('svg'); // Find the SVG icon - expect(svg).toBeInTheDocument(); - expect(svg).toHaveClass('text-green-400/80'); // Check for the specific class -}); + it('applies correct color for compliant=true', () => { + const { container } = render() + const svg = container.querySelector('svg') + expect(svg).toBeInTheDocument() + expect(svg).toHaveClass('text-green-400/80') + }) it('applies correct color for compliant=false', () => { - const { container } = render(); - const svg = container.querySelector('svg'); // Find the SVG icon - expect(svg).toBeInTheDocument(); - expect(svg).toHaveClass('text-red-400/80'); // Check for the specific class - }); + const { container } = render() + const svg = container.querySelector('svg') + expect(svg).toBeInTheDocument() + expect(svg).toHaveClass('text-red-400/80') + }) - it('renders the correct icon and title', () => { - render(); - expect(screen.getByText('My Title')).toBeInTheDocument(); - }); + it('renders the correct icon structure', () => { + const { container } = render() + const svgs = container.querySelectorAll('svg') + expect(svgs).toHaveLength(2) + }) - it('renders tooltip with the title', () => { - const { getByText } = render(); - // Tooltip content is rendered, but may require hover simulation in real DOM - expect(getByText('Tooltip Title')).toBeInTheDocument(); - }); + it('renders tooltip wrapper with title attribute', () => { + render() + const tooltip = screen.getByTestId('tooltip') + expect(tooltip).toBeInTheDocument() + expect(tooltip).toHaveAttribute('title', 'Tooltip Title') + }) it('handles edge case: empty title', () => { - const { container } = render(); - expect(container).toBeInTheDocument(); - }); + const { container } = render() + expect(container).toBeInTheDocument() + }) - it('has accessible role and label', () => { - render(); - const iconElement = screen.getByText(baseProps.title); // Asserts the title text is visible - expect(iconElement).toBeInTheDocument(); - // Or, if the icon has a specific role, you can check for that - // expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); -}); + it('has accessible SVG icons', () => { + const { container } = render() + const svgs = container.querySelectorAll('svg[role="img"]') + expect(svgs).toHaveLength(2) + expect(svgs[0]).toHaveAttribute('aria-hidden', 'true') + expect(svgs[1]).toHaveAttribute('aria-hidden', 'true') + }) it('renders with custom icon', () => { - const customIcon = faCertificate; // Replace with another icon if needed - const { container } = render(); - expect(container.querySelector('svg')).toBeInTheDocument(); - }); - - // Add more tests as needed for event handling, state, etc. -}); - -// ...existing code... + const customIcon = faCertificate + const { container } = render() + expect(container.querySelector('svg')).toBeInTheDocument() + }) +}) diff --git a/frontend/package.json b/frontend/package.json index a222f36507..70b5fb0d90 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -70,7 +70,6 @@ "@swc/core": "^1.13.3", "@swc/jest": "^0.2.39", "@tailwindcss/postcss": "^4.1.11", - "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.6.4", "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", From a794f1d6f5e34e0cb8f3b94d883d121637d876e9 Mon Sep 17 00:00:00 2001 From: Kate Date: Fri, 15 Aug 2025 16:21:58 -0700 Subject: [PATCH 4/4] Fix issues --- cspell/custom-dict.txt | 1 - .../components/GeneralCompliantComponent.test.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/cspell/custom-dict.txt b/cspell/custom-dict.txt index 89048d1daf..b9365e4c76 100644 --- a/cspell/custom-dict.txt +++ b/cspell/custom-dict.txt @@ -114,7 +114,6 @@ slackbot slideshare speakerdeck superfences -svgs tiktok tsc turbopack diff --git a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx index 18ff470575..244bc0f778 100644 --- a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx +++ b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx @@ -50,8 +50,8 @@ describe('GeneralCompliantComponent', () => { it('renders the correct icon structure', () => { const { container } = render() - const svgs = container.querySelectorAll('svg') - expect(svgs).toHaveLength(2) + const icons = container.querySelectorAll('svg') + expect(icons).toHaveLength(2) }) it('renders tooltip wrapper with title attribute', () => { @@ -68,10 +68,10 @@ describe('GeneralCompliantComponent', () => { it('has accessible SVG icons', () => { const { container } = render() - const svgs = container.querySelectorAll('svg[role="img"]') - expect(svgs).toHaveLength(2) - expect(svgs[0]).toHaveAttribute('aria-hidden', 'true') - expect(svgs[1]).toHaveAttribute('aria-hidden', 'true') + const icons = container.querySelectorAll('svg[role="img"]') + expect(icons).toHaveLength(2) + expect(icons[0]).toHaveAttribute('aria-hidden', 'true') + expect(icons[1]).toHaveAttribute('aria-hidden', 'true') }) it('renders with custom icon', () => {