Test cases for ChatHistory

cypress/component/ChatHistory.cy.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import * as stories from '../../src/stories/ChatHistory.stories'
+import terminalLog from '../support/component'
+
+const { Primary } = composeStories(stories)
+
+describe('ChatHistory.tsx', function () {
+	const messages = [
+		{
+			name: 'AVantika Elsher',
+			image: 'https://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png',
+			selected: false,
+			timestamp: 1664376815,
+			newNotification: false,
+		},
+		{
+			name: 'AVantika Solace',
+			image: 'https://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png',
+			selected: false,
+			timestamp: 1748347589,
+			newNotification: true,
+		},
+		{
+			name: 'AVantika Levine',
+			image: 'https://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png',
+			selected: true,
+			timestamp: 1231211842,
+			newNotification: false,
+		},
+		{
+			name: 'AVantika Thatcher',
+			image: 'https://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png',
+			selected: false,
+			timestamp: 1748347589,
+			newNotification: false,
+		},
+		{
+			name: 'AVantika Raven',
+			image: 'https://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png',
+			selected: false,
+			timestamp: 1341465382,
+			newNotification: false,
+		},
+	]
+	const consoleLog = 'it works!'
+	beforeEach(() => {
+		cy.injectAxe()
+	})
+	// this part is good
+	it('should render component', () => {
+		cy.mount(<Primary messages={messages} />)
+		expect(cy.get('div')).to.exist
+		expect(cy.get('button')).to.exist
+		expect(cy.get('img')).to.exist
+		expect(cy.get('span')).to.exist
+	})
+	// this part is good
+	it('should have no accessibility violations', () => {
+		cy.mount(<Primary messages={messages} />)
+		cy.checkA11y(undefined, {
+			runOnly: {
+				type: 'tag',
+				values: ['wcag2a', 'wcag2aa', "section508"],
+			}
+		}, terminalLog)
+	})
+	it('should render component message with profile picture with rounded edges and respected ', ()=> {
+		cy.mount(<Primary messages={messages} />)
+		cy.get('img').should('have.css', 'width', '48px')
+		cy.get('img').should('have.css', 'height', '48px')
+		cy.get('img').should('have.css', 'border-radius', '9999px')
+		cy.get('img').should('have.class', 'object-cover h-12 w-12 rounded-full aspect-square')
+	})
+	it('should render component message with lg text and semibold font', () => {
+		cy.mount(<Primary messages={messages} />)
+		cy.get('div.text-lg').should('have.css', 'font-size', '18px')
+		cy.get('div.text-lg').should('have.css', 'line-height', '28px')
+		cy.get('div.text-lg').should('have.class', 'text-lg font-semibold')
+	})
+	it('should render component message with sm text and gray color', () => {
+		cy.mount(<Primary messages={messages} />)
+		cy.get('span').should('have.css', 'font-size', '12px')
+		cy.get('span').should('have.css', 'line-height', '16px')
+		cy.get('span').should('have.css', 'color', 'rgb(107, 114, 128)')
+		cy.get('span').should('have.class', 'text-gray-500 text-xs')
+	})
+	it('should chathistory box should change visual change visual when being selected',() => {
+		cy.mount(<Primary messages={messages} />)
+		cy.contains('10 years ago').click()
+		cy.get('.chat-element').last().should('have.css', 'border-left-width', '4px')
+		cy.get('.chat-element').last().should('have.css', 'border-left-color', 'rgb(26, 86, 219)')
+		cy.get('.chat-element').first().should('have.css', 'border-left-width', '4px')
+		cy.get('.chat-element').first().should('have.css', 'border-left-color', 'rgba(0, 0, 0, 0)')
+	})
+	it('buttons on chathistory should be responsive when clicked on', () => {
+		cy.mount(<Primary />)
+		cy.get('button.delete-icon').first().click().focus()
+		cy.get('button.archive-icon').first().click().focus()
+	})
+})

src/components/ChatHistory/Chat.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import * as moment from 'moment'
+
+import { FaTrash, FaArchive } from 'react-icons/fa'
+
+export const Chat :React.FC<ChatHistoryProps> = ({ 
+	checked,
+    message, 
+	handle 
+}):React.ReactElement => {
+
+	return (
+        <div
+            className={
+                [
+                    'chat-element',
+                    'flex flex-row py-4 px-2 justify-center items-center',
+                    'border-l-4',
+                    checked ? 'border-l-blue-700' : 'border-l-transparent'
+                ].join(' ')
+            }
+            // onClick={() => setIsChecked(index)}
+        >
+            <div className="w-1/4">
+                <img
+                    src={message.image}
+                    className="object-cover h-12 w-12 rounded-full aspect-square"
+                    alt=""
+                />
+            </div>
+            <div className="w-full">
+                <div className="flex flex-col gap-3">
+                    <div className="text-lg font-semibold">
+                        {message.name}
+                    </div>
+                    <span className="text-gray-500 text-xs">
+                        {moment.unix(message.timestamp).fromNow()}
+                    </span>
+                </div>
+            </div>
+            <div className="flex flex-row">
+                <button aria-label="delete chat history" className="flex items-center justify-center px-4 cursor-pointer delete-icon">
+                    <FaTrash
+                        size={20}
+                        className="mr-1"
+                        onClick={handle}
+                    />
+                </button>
+                <button  aria-label="archive chat history" className="flex items-center justify-center px-4 cursor-pointer archive-icon">
+                    <FaArchive
+                        size={20}
+                        className="mr-1"
+                        onClick={handle}
+                    />
+                </button>
+            </div>
+        </div>
+	)
+}
+
+export type ChatHistoryProps = {
+    /**
+     * A boolean that indicates whether the chat history is selected 
+     */
+    checked: boolean
+	/**
+	 * Assigning the below declared type "HistoryProps" to chat history
+	 */
+	message: HistoryProp
+	/**
+	 * An event handler embedded in documents as attributes of HTML which you assign JavaScript code to execute
+	 */
+	handle: () => void
+}
+
+export type HistoryProp = {
+	/**
+	 * A string that indicates the contact name of the person
+	 */
+	name: string
+	/**
+	 * A string that indicates the url link of the contact person's image
+	 */
+	image: string
+	/**
+	 * A boolean that determines whether the chat history is selected 
+	 */
+	selected: boolean
+	/**
+	 * A Timestamp represents a point in time independent of any time zone or calendar, represented as seconds and fractions of seconds at nanosecond 
+	 */
+	timestamp: number
+	/**
+	 * A boolean that determines whether the chat history has been read
+	 */
+	newNotification: boolean
+}

src/components/ChatHistory/ChatHistory.tsx

@@ -1,82 +1,54 @@
 import * as React from 'react'
-import moment from 'moment'
-
-import { FaTrash, FaArchive } from 'react-icons/fa'
-
-export const ChatHistory = ({ messages, handle }: ChatHistoryProps) => {
-	const [isChecked, setIsChecked] = React.useState(0 ?? null)
-	const [isNotified, setIsNotified] = React.useState(0 ?? null)
+import * as moment from 'moment'
+import { Chat } from './Chat'
+import { useState } from 'react'
 
+export const ChatHistory :React.FC<ChatHistoryProps> = ({ 
+	messages, 
+	handle 
+}):React.ReactElement => {
+	const [currentlyCheckedIndex, setCurrentlyCheckedIndex] = useState(0);
 	return (
 		<div className="flex flex-col w-full h-full max-h-screen border-r-2 overflow-y-scroll">
-
 			{messages?.length &&
 				messages.map((message, messageIndex) => (
-					<div
-						className={`flex flex-row py-4 px-2 justify-center items-center border-b-2 relative before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-blue-100 before:transition-opacity before:block
-						 ${
-							isChecked === messageIndex 
-								? ' before:opacity-100'
-								: ' before:opacity-0'
-							}` 
-					}
-						key={messageIndex}
-						onClick={() => setIsChecked(messageIndex)}
-					>
-						<div
-                           className = {`
-                                ${messages[messageIndex].newNotification===true
-                                ? ' rounded-full mx-1 bg-blue-500 h-2.5 w-5 flex items-center justify-center'
-                                : ''
-                                }`} >
-                            </div>
-						<div className="w-1/4">
-							<img
-								src={message.image}
-								className="object-cover h-12 w-12 rounded-full aspect-square"
-								alt=""
-							/>
-						</div>
-						<div className="w-full">
-							<div className="flex flex-col gap-3">
-								<div className="text-lg font-semibold">
-									{message.name}
-								</div>
-								<span className="text-gray-500 text-xs">
-									{moment(message.timestamp).fromNow()}
-								</span>
-							</div>
-						</div>
-						<div className="flex flex-row">
-							<button className="flex items-center justify-center px-4 cursor-pointer">
-								<FaTrash
-									size={20}
-									className="mr-1"
-									onClick={handle}
-								/>
-							</button>
-							<button className="flex items-center justify-center px-4 cursor-pointer">
-								<FaArchive
-									size={20}
-									className="mr-1"
-									onClick={handle}
-								/>
-							</button>
-						</div>
+					<div onClick={() => setCurrentlyCheckedIndex(messageIndex)} key={messageIndex}>
+						<Chat message={message} checked={currentlyCheckedIndex === messageIndex} handle={handle} />
 					</div>
 				))}
 		</div>
 	)
 }
 
-type ChatHistoryProps = {
+export type ChatHistoryProps = {
+	/**
+	 * Assigning the below declared type "HistoryProps" to chat history
+	 */
 	messages: HistoryProps[]
+	/**
+	 * An event handler embedded in documents as attributes of HTML which you assign JavaScript code to execute
+	 */
 	handle: () => void
 }
-type HistoryProps = {
+export type HistoryProps = {
+	/**
+	 * A string that indicates the contact name of the person
+	 */
 	name: string
+	/**
+	 * A string that indicates the url link of the contact person's image
+	 */
 	image: string
+	/**
+	 * A boolean that determines whether the chat history is selected 
+	 */
 	selected: boolean
+	/**
+	 * A Timestamp represents a point in time independent of any time zone or calendar, represented as seconds and fractions of seconds at nanosecond 
+	 */
 	timestamp: number
+	/**
+	 * A boolean that determines whether the chat history has been read
+	 */
 	newNotification: boolean
-}
+}

src/components/Panel/Panel.tsx

@@ -43,4 +43,4 @@ export type PanelProps = {
 	title: string
 }
 
-export default Panel
+export default Panel