Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] Events Page Violates The Figma Style Guide #3280

Merged
Prev Previous commit
Next Next commit
test fix
hustlernik committed Jan 15, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 5ca7439d87586ac5d3aede7eb0b05aff6cead930
57 changes: 38 additions & 19 deletions src/components/HolidayCards/HolidayCard.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,51 @@
import React from 'react';
import { describe, test, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { vi, describe, it, expect } from 'vitest';
import HolidayCard from './HolidayCard';

// Mock styles for testing
vi.mock('./../../style/app.module.css', () => ({
default: {},
holidayCard: 'holidayCard',
}));
import styles from './../../style/app.module.css';

describe('HolidayCard Component', () => {
it('renders correctly with the given holiday name', () => {
const holidayName = 'Christmas';
render(<HolidayCard holidayName={holidayName} />);
const cardElement = screen.getByText(holidayName);
expect(cardElement).toBeInTheDocument();
test('renders without crashing', () => {
render(<HolidayCard holidayName="Christmas" />);
expect(screen.getByTestId('holiday-card')).toBeDefined();
});

test('displays the provided holiday name', () => {
const testHolidayName = 'New Year';
render(<HolidayCard holidayName={testHolidayName} />);

const cardElement = screen.getByTestId('holiday-card');
expect(cardElement.textContent).toBe(testHolidayName);
});

it('handles empty holiday name gracefully', () => {
test('applies the correct CSS class', () => {
render(<HolidayCard holidayName="Easter" />);

const cardElement = screen.getByTestId('holiday-card');
expect(cardElement.className).toBe(styles.holidayCard);
});

test('handles empty holiday name', () => {
render(<HolidayCard holidayName="" />);

const cardElement = screen.getByTestId('holiday-card');
expect(cardElement).toBeInTheDocument();
expect(cardElement.textContent).toBe('');
});

it('handles long holiday names appropriately', () => {
const longName = 'Very Long Holiday Name That Might Cause Wrapping Issues';
render(<HolidayCard holidayName={longName} />);
const cardElement = screen.getByText(longName);
expect(cardElement).toBeInTheDocument();
test('handles long holiday names', () => {
const longHolidayName = 'International Talk Like a Pirate Day Celebration';
render(<HolidayCard holidayName={longHolidayName} />);

const cardElement = screen.getByTestId('holiday-card');
expect(cardElement.textContent).toBe(longHolidayName);
});

// TypeScript compile-time tests
test('TypeScript props validation', () => {
// @ts-expect-error - Testing TypeScript validation for missing required prop
render(<HolidayCard />);

// @ts-expect-error - Testing TypeScript validation for wrong prop type
render(<HolidayCard holidayName={123} />);
});
});

Unchanged files with check annotations Beta

fireEvent.click(prevButton);
// Clicking today button
const todayButton = screen.getByTestId('today');

Check failure on line 284 in src/components/EventCalendar/EventCalendar.spec.tsx

GitHub Actions / Test Application

src/components/EventCalendar/EventCalendar.spec.tsx > Calendar > Today button should show today cell

TestingLibraryElementError: Unable to find an element by: [data-testid="today"] Ignored nodes: comments, script, style <body> <div> <div class="_calendar_658d08" > <div class="_calendar__header_658d08" > <button class="_buttonEventCalendar_658d08 btn btn-outlined" data-testid="prevmonthordate" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" data-testid="ChevronLeftIcon" focusable="false" viewBox="0 0 24 24" > <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" /> </svg> </button> <div class="_calendar__header_month_658d08" data-testid="current-date" > 2024 <div> December </div> </div> <button class="_buttonEventCalendar_658d08 btn btn-outlined" data-testid="nextmonthordate" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" data-testid="ChevronRightIcon" focusable="false" viewBox="0 0 24 24" > <path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> </svg> </button> </div> <div class="_calendar__scroll_658d08 customScroll" > <div class="_calendar__hours_658d08" > <div class="_calendar_hour_block_658d08" > <div class="_calendar_hour_text_container_658d08" > <p class="_calendar_timezone_text_658d08" > UTC+00:00 </p> </div> <div class="_dummyWidth_658d08" /> <div class="_event_list_parent_658d08" > <div class="_list_container_658d08" > <div class="_event_list_hour_658d08" > <p class="_no_events_message_658d08" > No events available </p> </div> <button class="_btn__more_658d08" /> </div> </div> </div> <div class="_calendar_infocards_658d08" > <div aria-label="Holidays" class="_holidays_card_658d08" role="region" > <h3 class="_card_title_658d08" > Holidays </h3> <ul class="_card_list_658d08" > <li class="_card_list_item_658d08" > <span class="_holiday_date_658d08" > December 25 </span> <span class="_holiday_name_658d08" > Christmas Day </span> </li> </ul> </div> <div aria-label="Events" class="_events_card_658d08" role="region" > <h3 class="_card_title_658d08" > Events </h3> <div class="_legend_658d08" > <div class="_eventsLegend_658d08" > <span class="_organizationIndicator_658d08" /> <span
fireEvent.click(todayButton);
// const todayCell = screen.getByText(new Date().getDate().toString());
// expect(todayCell).toHaveClass(styles.day__today);
const calenderView = 'Calendar View';
expect(screen.queryAllByText(calenderView)).not.toBeNull();
expect(screen.getByText('Sun')).toBeInTheDocument();

Check failure on line 653 in src/screens/UserPortal/Events/Events.spec.tsx

GitHub Actions / Test Application

src/screens/UserPortal/Events/Events.spec.tsx > Testing Events Screen [User Portal] > Switch to calendar view works as expected.

TestingLibraryElementError: Unable to find an element with the text: Sun. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body class="" style="padding-right: 1024px;" > <div> <div class="d-flex flex-row" > <div class="_mainContainerEvent_658d08" > <div class="_calendarEventHeader_658d08" data-testid="calendarEventHeader" > <div class="_calendar__header_658d08" > <div class="_input_658d08" > <input autocomplete="off" class="_inputField_658d08 form-control" data-testid="searchEvent" id="searchEvent" placeholder="Search Event Name" required="" type="text" value="" /> <button class="_searchButton_658d08 btn btn-primary" data-testid="searchButton" style="margin-bottom: 10px;" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" data-testid="SearchOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" /> </svg> </button> </div> <div class="_space_658d08" > <div aria-expanded="false" class="dropdown" title="organizationEvents.viewType" > <button aria-expanded="false" class="_dropdown_658d08 dropdown-toggle btn btn-success" data-testid="selectViewType" id="react-aria-:ru:" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium me-1 css-1umw9bq-MuiSvgIcon-root" data-testid="SortIcon" focusable="false" viewBox="0 0 24 24" > <path d="M3 18h6v-2H3zM3 6v2h18V6zm0 7h12v-2H3z" /> </svg> Month View </button> </div> <div aria-expanded="false" class="dropdown" title="Event Type" > <button aria-expanded="false" class="_dropdown_658d08 dropdown-toggle btn btn-success" data-testid="eventType" id="react-aria-:rv:" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium me-1 css-1umw9bq-MuiSvgIcon-root" data-testid="SortIcon" focusable="false" viewBox="0 0 24 24" > <path d="M3 18h6v-2H3zM3 6v2h18V6zm0 7h12v-2H3z" /> </svg> Event Type </button> </div> <div class="_selectTypeEventHeader_658d08" > <button class="_dropdown_658d08 btn btn-success" data-te
});
it('Testing DatePicker and TimePicker', async () => {