import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionCategoriesButton from "../CallActionCategoriesButton";

const category = {
    category_id: 1,
    category_name: "اطلاعات راه ها",
}
const tab = {
    active: true,
    active_category_id: 1,
}

describe('Call Action Categories Button from Call Actions Categories', () => {
    describe('Rendering', () => {
        it('should categories names', async () => {
            render(
                <MockAppWithProviders>
                    <AnswersProvider>
                        <CallActionCategoriesButton tab={tab} category={category}/>
                    </AnswersProvider>
                </MockAppWithProviders>
            )
            const categoryElement = screen.queryByText("اطلاعات راه ها")
            await waitFor(() => {
                expect(categoryElement).toBeInTheDocument()
            })
        });
    });
    describe("Behavior", ()=>{
        it("Should change the color when button clecked",async()=>{
            render(
                <MockAppWithProviders>
                    <AnswersProvider>
                        <CallActionCategoriesButton tab={tab} category={category}/>
                    </AnswersProvider>
                </MockAppWithProviders>
            )
            const buttonElement = screen.getByRole('button', {
                name: /اطلاعات راه ها/i
            })

            fireEvent.click(buttonElement);

            await waitFor(() => {
                expect(buttonElement).toHaveStyle('background-color: rgb(12, 31, 23)');
            })
        })
    })
})