test: RFC: tests for EventTypeAppCardInterface (CALCOM-11005 ) (#11344)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com>
pull/11711/head^2
GitStart-Cal.com 2023-10-05 14:50:26 +00:00 committed by GitHub
parent a86d4ec89d
commit bba52db02f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 133 additions and 0 deletions

View File

@ -0,0 +1,97 @@
import { render, screen } from "@testing-library/react";
import type { CredentialOwner } from "types";
import { vi } from "vitest";
import type { RouterOutputs } from "@calcom/trpc";
import { DynamicComponent } from "./DynamicComponent";
import { EventTypeAppCard } from "./EventTypeAppCardInterface";
vi.mock("./DynamicComponent", async () => {
const actual = (await vi.importActual("./DynamicComponent")) as object;
return {
...actual,
DynamicComponent: vi.fn(() => <div>MockedDynamicComponent</div>),
};
});
afterEach(() => {
vi.clearAllMocks();
});
const getAppDataMock = vi.fn();
const setAppDataMock = vi.fn();
const mockProps = {
app: {
name: "TestApp",
slug: "testapp",
credentialOwner: {},
} as RouterOutputs["viewer"]["integrations"]["items"][number] & { credentialOwner?: CredentialOwner },
eventType: {},
getAppData: getAppDataMock,
setAppData: setAppDataMock,
LockedIcon: <div>MockedIcon</div>,
disabled: false,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any;
describe("Tests for EventTypeAppCard component", () => {
test("Should render DynamicComponent with correct slug", () => {
render(<EventTypeAppCard {...mockProps} />);
expect(DynamicComponent).toHaveBeenCalledWith(
expect.objectContaining({
slug: mockProps.app.slug,
}),
{}
);
expect(screen.getByText("MockedDynamicComponent")).toBeInTheDocument();
});
test("Should invoke getAppData and setAppData from context on render", () => {
render(
<EventTypeAppCard
{...mockProps}
value={{
getAppData: getAppDataMock(),
setAppData: setAppDataMock(),
}}
/>
);
expect(getAppDataMock).toHaveBeenCalled();
expect(setAppDataMock).toHaveBeenCalled();
});
test("Should render DynamicComponent with 'stripepayment' slug for stripe app", () => {
const stripeProps = {
...mockProps,
app: {
...mockProps.app,
slug: "stripe",
},
};
render(<EventTypeAppCard {...stripeProps} />);
expect(DynamicComponent).toHaveBeenCalledWith(
expect.objectContaining({
slug: "stripepayment",
}),
{}
);
expect(screen.getByText("MockedDynamicComponent")).toBeInTheDocument();
});
test("Should display error boundary message on child component error", () => {
(DynamicComponent as jest.Mock).mockImplementation(() => {
return Error("Mocked error from DynamicComponent");
});
render(<EventTypeAppCard {...mockProps} />);
const errorMessage = screen.getByText(`There is some problem with ${mockProps.app.name} App`);
expect(errorMessage).toBeInTheDocument();
});
});

View File

@ -0,0 +1,27 @@
import matchers from "@testing-library/jest-dom/matchers";
import { cleanup } from "@testing-library/react";
import { afterEach, expect, vi } from "vitest";
vi.mock("@calcom/lib/OgImages", async () => {
return {};
});
vi.mock("@calcom/lib/hooks/useLocale", () => ({
useLocale: () => {
return {
t: (str: string) => str,
};
},
}));
global.ResizeObserver = vi.fn().mockImplementation(() => ({
observe: vi.fn(),
unobserve: vi.fn(),
disconnect: vi.fn(),
}));
expect.extend(matchers);
afterEach(() => {
cleanup();
});

View File

@ -37,6 +37,15 @@ const workspaces = packagedEmbedTestsOnly
setupFiles: ["packages/ui/components/test-setup.ts"], setupFiles: ["packages/ui/components/test-setup.ts"],
}, },
}, },
{
test: {
globals: true,
name: "EventTypeAppCardInterface components",
include: ["packages/app-store/_components/**/*.{test,spec}.{ts,js,tsx}"],
environment: "jsdom",
setupFiles: ["packages/app-store/test-setup.ts"],
},
},
]; ];
export default defineWorkspace(workspaces); export default defineWorkspace(workspaces);