From 8984c3c216a273837946f20a4e33efd32b84cc5f Mon Sep 17 00:00:00 2001 From: riya-2206 Date: Tue, 19 Mar 2024 10:58:49 +0530 Subject: [PATCH] theme implementation and some changes done in test cases for faq page --- src/pages/faq-page/assets/call-icon.svg | 13 -------- src/pages/faq-page/config.json | 13 +------- src/pages/faq-page/index.module.css | 4 --- src/pages/faq-page/index.test.tsx | 39 +++++++++++----------- src/pages/faq-page/index.tsx | 44 +++++++++++++++---------- 5 files changed, 48 insertions(+), 65 deletions(-) delete mode 100644 src/pages/faq-page/assets/call-icon.svg diff --git a/src/pages/faq-page/assets/call-icon.svg b/src/pages/faq-page/assets/call-icon.svg deleted file mode 100644 index 68b7440c..00000000 --- a/src/pages/faq-page/assets/call-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - accept-call - - \ No newline at end of file diff --git a/src/pages/faq-page/config.json b/src/pages/faq-page/config.json index 89fdcc6f..6ed1f179 100644 --- a/src/pages/faq-page/config.json +++ b/src/pages/faq-page/config.json @@ -1,20 +1,9 @@ { - "theme": { - "primaryColor": { - "allowOverride": true, - "value": "#219653" - }, - "secondaryColor": { - "allowOverride": true, - "value": "#000000" - } - }, "component": { "allowOverride": false, "title": "FAQs", "userManualText": "User Manual - For VAWs", "contactDescriptionText":"To connect with call centre", - "contactText": "Dial 155333", - "contactIcon":"/src/molecules/FAQPage/assets/call-icon.svg" + "contactText": "Dial 155333" } } \ No newline at end of file diff --git a/src/pages/faq-page/index.module.css b/src/pages/faq-page/index.module.css index 7e83bf54..6b6a618a 100644 --- a/src/pages/faq-page/index.module.css +++ b/src/pages/faq-page/index.module.css @@ -39,7 +39,3 @@ padding-bottom: 1vh; } -.callIconBox { - height: 5vh; - width: 5vh; -} diff --git a/src/pages/faq-page/index.test.tsx b/src/pages/faq-page/index.test.tsx index 538348a7..24b61cf5 100644 --- a/src/pages/faq-page/index.test.tsx +++ b/src/pages/faq-page/index.test.tsx @@ -1,6 +1,7 @@ -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import FAQPage from './index'; -import config from './config.json'; +import {component} from './config.json'; +import { vi } from 'vitest'; describe('FAQ component', () => { @@ -11,37 +12,37 @@ describe('FAQ component', () => { test('displays "FAQ Title" text', () => { const { getByText } = render(); - const textElement = getByText(config.component.title); + const textElement = getByText(component.title ?? "Faq"); expect(textElement).toBeInTheDocument(); }); test('displays "Contact description" text', () => { const { getByText } = render(); - const textElement = getByText(config.component.contactDescriptionText); + const textElement = getByText(component.contactDescriptionText ?? "contact description"); expect(textElement).toBeInTheDocument(); }); test('renders contact button correctly', () => { + const consoleSpy = vi.spyOn(console, 'log'); render(); - const buttonElement = screen.getByText(config.component.contactText); - expect(buttonElement).toBeInTheDocument(); + const buttonElement = screen.getByText(component.contactText ?? "Contact User"); + + // Simulate a button click + fireEvent.click(buttonElement); + + // Expect the console.log to be called with the expected value + expect(consoleSpy).toHaveBeenCalledWith(component.contactText ?? "Contact User"); }); + test('renders Manual User button correctly', () => { + const consoleSpy = vi.spyOn(console, 'log'); render(); - const buttonElement = screen.getByText(config.component.userManualText); - expect(buttonElement).toBeInTheDocument(); + const buttonElement = screen.getByText(component.userManualText ?? "User Manual"); + fireEvent.click(buttonElement); + + // Expect the console.log to be called with the expected value + expect(consoleSpy).toHaveBeenCalledWith(component.userManualText ?? "User Manual"); }); - test('renders downtime image with correct src and alt text', () => { - const src = config.component.contactIcon; - const alt = 'callIcon'; - - const { getByAltText } = render(); - - const imageElement = getByAltText(alt); - expect(imageElement).toBeInTheDocument(); - expect(imageElement).toHaveAttribute('src', src); -}); - }); diff --git a/src/pages/faq-page/index.tsx b/src/pages/faq-page/index.tsx index 530b514c..5aa6198c 100644 --- a/src/pages/faq-page/index.tsx +++ b/src/pages/faq-page/index.tsx @@ -1,18 +1,22 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import styles from './index.module.css'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import config from './config.json'; +import {component} from './config.json'; +import CallRoundedIcon from '@mui/icons-material/Call'; +import { useColorPalates } from '../../molecules/theme-provider/hooks'; +import { Avatar } from '@mui/material'; const FAQPage: React.FC = () => { - const downloadPDFHandler=()=>{ - console.log(config.component.userManualText) - } + const theme = useColorPalates(); + const downloadPDFHandler=useCallback(()=>{ + console.log(component.userManualText ?? "User Manual") + },[]) - const handleContactClick=()=>{ - console.log(config.component.contactText) - } + const handleContactClick=useCallback(()=>{ + console.log(component.contactText ??"Contact User") + },[]) return ( <> @@ -20,24 +24,30 @@ const FAQPage: React.FC = () => { name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> - {config.component.title} + {component.title ?? "Faq"} - {config?.component?.userManualText && ( + {component?.userManualText && ( )} - {config?.component?.contactText && ( + {component?.contactText && ( - {config.component.contactDescriptionText} + {component.contactDescriptionText ?? "contact description"} - - callIcon - + + + + + )}