Skip to content

Commit

Permalink
Issue #PS-000 fix: Run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsvick
itsvick committed Aug 3, 2024
1 parent fb92a52 commit 774f3ea
Show file tree
Hide file tree
Showing 52 changed files with 1,229 additions and 1,180 deletions.
107 changes: 55 additions & 52 deletions __tests__/ActionCell.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
import ActionCell from '@/components/ActionCell';
import { Edit as EditIcon, MoreVert as MoreVertIcon } from '@mui/icons-material';
import { fireEvent, render, screen } from '@testing-library/react';
import ActionCell from "@/components/ActionCell";
import {
Edit as EditIcon,
MoreVert as MoreVertIcon,
} from "@mui/icons-material";
import { fireEvent, render, screen } from "@testing-library/react";

// Mock the translation hook
jest.mock('next-i18next', () => ({
jest.mock("next-i18next", () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}));

describe('ActionCell Component', () => {
const mockRowData = { id: 1, name: 'Sample Row' };
describe("ActionCell Component", () => {
const mockRowData = { id: 1, name: "Sample Row" };
const mockOnEdit = jest.fn();
const mockOnDelete = jest.fn();
const mockExtraAction = jest.fn();

const extraActions = [
{
name: 'edit',
name: "edit",
onClick: mockExtraAction,
icon: EditIcon,
},
{
name: 'delete',
name: "delete",
onClick: mockOnDelete,
icon: MoreVertIcon,
},
Expand All @@ -36,45 +39,45 @@ describe('ActionCell Component', () => {
showIcons: true,
};

it('should render without crashing', () => {
it("should render without crashing", () => {
render(<ActionCell {...defaultProps} />);
const iconButton = screen.getByRole('button');
const iconButton = screen.getByRole("button");
expect(iconButton).toBeInTheDocument();
});

it('should display MoreVertIcon button', () => {
it("should display MoreVertIcon button", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");
expect(moreVertIcon).toBeInTheDocument();
});

it('should open the menu on MoreVertIcon click', () => {
it("should open the menu on MoreVertIcon click", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItem = screen.getAllByRole('menuitem');
const menuItem = screen.getAllByRole("menuitem");
expect(menuItem.length).toBe(extraActions.length);
});

it('should display the correct number of actions in the menu', () => {
it("should display the correct number of actions in the menu", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");
expect(menuItems).toHaveLength(extraActions.length);
});

it('should call the correct action when a menu item is clicked', () => {
it("should call the correct action when a menu item is clicked", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

// Click the first action
fireEvent.click(menuItems[0]);
Expand All @@ -88,85 +91,85 @@ describe('ActionCell Component', () => {
expect(mockOnDelete).toHaveBeenCalledWith(mockRowData);
});

it('should close the menu after an action is clicked', () => {
it("should close the menu after an action is clicked", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

// Click the first action
fireEvent.click(menuItems[0]);
expect(mockExtraAction).toHaveBeenCalledWith(mockRowData);

// Menu should be closed
expect(screen.queryByRole('menuitem')).not.toBeInTheDocument();
expect(screen.queryByRole("menuitem")).not.toBeInTheDocument();
});

xit('should not display menu items if extraActions are empty', () => {
xit("should not display menu items if extraActions are empty", () => {
render(<ActionCell {...defaultProps} extraActions={[]} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Try to open the menu
fireEvent.click(moreVertIcon);
expect(screen.queryByRole('menuitem')).not.toBeInTheDocument();
expect(screen.queryByRole("menuitem")).not.toBeInTheDocument();
});

it('should not show icons when showIcons is false', () => {
it("should not show icons when showIcons is false", () => {
render(<ActionCell {...defaultProps} showIcons={false} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const listItemIcons = screen.queryAllByRole('icon');
const listItemIcons = screen.queryAllByRole("icon");

expect(listItemIcons).toHaveLength(0); // Icons should not be displayed
});

it('should display translated action names using useTranslation hook', () => {
it("should display translated action names using useTranslation hook", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

// Check the translated action names
expect(menuItems[0]).toHaveTextContent('edit');
expect(menuItems[1]).toHaveTextContent('delete');
expect(menuItems[0]).toHaveTextContent("edit");
expect(menuItems[1]).toHaveTextContent("delete");
});

xit('should handle no actions gracefully', () => {
xit("should handle no actions gracefully", () => {
render(<ActionCell {...defaultProps} extraActions={[]} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");
expect(moreVertIcon).toBeInTheDocument();

// Try to open the menu
fireEvent.click(moreVertIcon);
expect(screen.queryByRole('menuitem')).not.toBeInTheDocument();
expect(screen.queryByRole("menuitem")).not.toBeInTheDocument();
});

it('should display actions without icons when showIcons is false', () => {
it("should display actions without icons when showIcons is false", () => {
render(<ActionCell {...defaultProps} showIcons={false} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

expect(menuItems.length).toBe(extraActions.length);
const icons = screen.queryAllByRole('icon');
const icons = screen.queryAllByRole("icon");
expect(icons).toHaveLength(0);
});

it('should correctly handle onEdit and onDelete props', () => {
it("should correctly handle onEdit and onDelete props", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

// Click the first action (edit)
fireEvent.click(menuItems[0]);
Expand All @@ -180,27 +183,27 @@ describe('ActionCell Component', () => {
expect(mockOnDelete).toHaveBeenCalledWith(mockRowData);
});

it('should display all extra actions', () => {
it("should display all extra actions", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);
const menuItems = screen.getAllByRole('menuitem');
const menuItems = screen.getAllByRole("menuitem");

expect(menuItems).toHaveLength(extraActions.length);
});

xit('should render the correct icon for each action', () => {
xit("should render the correct icon for each action", () => {
render(<ActionCell {...defaultProps} />);
const moreVertIcon = screen.getByRole('button');
const moreVertIcon = screen.getByRole("button");

// Open the menu
fireEvent.click(moreVertIcon);

// Check for each action icon
extraActions.forEach((action) => {
const iconElement = screen.getByTestId(action.name + '-icon');
const iconElement = screen.getByTestId(action.name + "-icon");
expect(iconElement).toBeInTheDocument();
});
});
Expand Down
6 changes: 4 additions & 2 deletions __tests__/CardItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,17 @@ describe("CardItem Component", () => {
it("should display the correct progress", () => {
render(<CardItem {...defaultProps} />);
const progressText = screen.getByText(
`${defaultProps.card.boardsUploaded} / ${defaultProps.card.totalBoards} COURSE_PLANNER.BOARDS_FULLY_UPLOADED`
`${defaultProps.card.boardsUploaded} / ${defaultProps.card.totalBoards} COURSE_PLANNER.BOARDS_FULLY_UPLOADED`,
);
expect(progressText).toBeInTheDocument();
});

it("should render CustomStepper with the correct completed steps", () => {
render(<CardItem {...defaultProps} />);
const stepper = screen.getByTestId("custom-stepper");
expect(stepper).toHaveTextContent(`Stepper: ${defaultProps.card.boardsUploaded}`);
expect(stepper).toHaveTextContent(
`Stepper: ${defaultProps.card.boardsUploaded}`,
);
});

xit("should call onClick handler when the card is clicked", () => {
Expand Down
Loading

0 comments on commit 774f3ea

Please sign in to comment.