test: Tests for AppCard component (#11500)
Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>pull/11562/head
parent
c57de8f43f
commit
a4035aef98
|
@ -68,7 +68,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
|
|||
{searchTextIndex != undefined && searchText ? (
|
||||
<>
|
||||
{app.name.substring(0, searchTextIndex)}
|
||||
<span className="bg-yellow-300">
|
||||
<span className="bg-yellow-300" data-testid="highlighted-text">
|
||||
{app.name.substring(searchTextIndex, searchTextIndex + searchText.length)}
|
||||
</span>
|
||||
{app.name.substring(searchTextIndex + searchText.length)}
|
||||
|
|
|
@ -0,0 +1,67 @@
|
|||
/* eslint-disable playwright/missing-playwright-await */
|
||||
import { render, screen } from "@testing-library/react";
|
||||
|
||||
import type { AppFrontendPayload } from "@calcom/types/App";
|
||||
|
||||
import { AppCard } from "./AppCard";
|
||||
|
||||
describe("Tests for AppCard component", () => {
|
||||
const mockApp: AppFrontendPayload = {
|
||||
logo: "/path/to/logo.png",
|
||||
name: "Test App",
|
||||
slug: "test-app",
|
||||
description: "Test description for the app.",
|
||||
categories: ["calendar"],
|
||||
concurrentMeetings: true,
|
||||
teamsPlanRequired: { upgradeUrl: "test" },
|
||||
type: "test_calendar",
|
||||
variant: "calendar",
|
||||
publisher: "test",
|
||||
url: "test",
|
||||
email: "test",
|
||||
};
|
||||
|
||||
// Abstracted render function
|
||||
const renderAppCard = (appProps = {}) => {
|
||||
const appData = { ...mockApp, ...appProps };
|
||||
render(<AppCard app={appData} />);
|
||||
};
|
||||
|
||||
describe("Tests for app description", () => {
|
||||
test("Should render the app name correctly and display app logo with correct alt text", () => {
|
||||
renderAppCard();
|
||||
const appLogo = screen.getByAltText("Test App Logo");
|
||||
const appName = screen.getByText("Test App");
|
||||
expect(appLogo).toBeInTheDocument();
|
||||
expect(appLogo.getAttribute("src")).toBe("/path/to/logo.png");
|
||||
expect(appName).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should render details button with correct href", () => {
|
||||
renderAppCard();
|
||||
const detailsButton = screen.getByText("details");
|
||||
expect(detailsButton).toBeInTheDocument();
|
||||
expect(detailsButton.closest("a")).toHaveAttribute("href", "/apps/test-app");
|
||||
});
|
||||
|
||||
test("Should highlight the app name based on searchText", () => {
|
||||
render(<AppCard app={mockApp} searchText="test" />);
|
||||
const highlightedText = screen.getByTestId("highlighted-text");
|
||||
expect(highlightedText).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tests for app categories", () => {
|
||||
test("Should show 'Template' badge if app is a template", () => {
|
||||
renderAppCard({ isTemplate: true });
|
||||
const templateBadge = screen.getByText("Template");
|
||||
expect(templateBadge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should show 'default' badge if app is default or global", () => {
|
||||
renderAppCard({ isDefault: true });
|
||||
const defaultBadge = screen.getByText("default");
|
||||
expect(defaultBadge).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue