import {render, screen} from "@testing-library/react";
import LoadingHistory from "../../LoadingHistory";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";

describe("LoadingHistory Component From call history", () => {
    describe("Rendering", () => {
        it("loading list rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const loadingList = screen.queryByTestId("loading-list");
            expect(loadingList).toBeInTheDocument();
        });
        it("loading list item avatar rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const loadingListItemAvatar = screen.queryByTestId("loading-listItemAvatar");
            expect(loadingListItemAvatar).toBeInTheDocument();
        });
        it("loading list item text rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const loadingListItemText = screen.queryByTestId("loading-listItemText");
            expect(loadingListItemText).toBeInTheDocument();
        });
        it("loading list item category rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const loadingListItemCat = screen.queryByTestId("loading-listItem-cat");
            expect(loadingListItemCat).toBeInTheDocument();
        });
        it("loading list item sub category rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const loadingListItemSubCat = screen.queryByTestId("loading-listItem-subCat");
            expect(loadingListItemSubCat).toBeInTheDocument();
        });
        it("operator avatar skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorAvatarSkeleton = screen.queryByTestId("operator-avatar-skeleton");
            expect(operatorAvatarSkeleton).toBeInTheDocument();
        });
        it("operator name skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorNameSkeleton = screen.queryByTestId("operator-name-skeleton");
            expect(operatorNameSkeleton).toBeInTheDocument();
        });
        it("operator answer date skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorAnswerDateSkeleton = screen.queryByTestId("operator-answer-date-skeleton");
            expect(operatorAnswerDateSkeleton).toBeInTheDocument();
        });
        it("operator category header skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorCategoryHeaderSkeleton = screen.queryByTestId("operator-category-header-skeleton");
            expect(operatorCategoryHeaderSkeleton).toBeInTheDocument();
        });
        it("operator category value skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorCategoryValueSkeleton = screen.queryByTestId("operator-category-value-skeleton");
            expect(operatorCategoryValueSkeleton).toBeInTheDocument();
        });
        it("operator subCategory header skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorSubCategoryHeaderSkeleton = screen.queryByTestId("operator-subCategory-header-skeleton");
            expect(operatorSubCategoryHeaderSkeleton).toBeInTheDocument();
        });
        it("operator subCategory value skeleton rendered", () => {
            render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
            const operatorSubCategoryValueSkeleton = screen.queryByTestId("operator-subCategory-value-skeleton");
            expect(operatorSubCategoryValueSkeleton).toBeInTheDocument();
        });
    });
});