import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from '@testing-library/react';
import { NutritionDiaryOverview } from "@/components/Nutrition/screens/NutritionDiaryOverview";
import { useFetchNutritionalPlanDateQuery } from "@/components/Nutrition/queries";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { TEST_NUTRITIONAL_PLAN_1 } from "@/tests/nutritionTestdata";
import type { Mock } from 'vitest';

vi.mock("@/components/Nutrition/queries");
const queryClient = new QueryClient();
describe("Test the NutritionDiaryOverview component", () => {

    beforeEach(() => {
        (useFetchNutritionalPlanDateQuery as Mock).mockImplementation(() => ({
            isSuccess: true,
            isLoading: false,
            data: TEST_NUTRITIONAL_PLAN_1
        }));
    });

    test('renders the current nutritional plan correctly', async () => {

        // Act
        render(
            <QueryClientProvider client={queryClient}>
                <MemoryRouter initialEntries={['/nutrition/101/2023-07-01']}>
                    <Routes>
                        <Route path="nutrition/:planId/:date" element={<NutritionDiaryOverview />} />
                    </Routes>
                </MemoryRouter>
            </QueryClientProvider>
        );

        // Assert

        // Note that we currently can't check for other values as they are output with
        // a translation tag (nutrition.valueUnitG) and that is the only thing that is
        // shown in the tests

        expect(useFetchNutritionalPlanDateQuery).toHaveBeenCalled();
        expect(screen.getByText('07/01/23')).toBeInTheDocument();

        expect(screen.getByRole('cell', { name: /0% fat Greek style yogurt/i })).toBeInTheDocument();
        expect(screen.getByText(/120 g/i)).toBeInTheDocument();

        expect(screen.getByRole('cell', { name: /1001 nacht haferbrei/i })).toBeInTheDocument();
        expect(screen.getByText(/50 g/)).toBeInTheDocument();

        expect(screen.getByRole('cell', { name: /100% boosted juice smoothie/i })).toBeInTheDocument();
        expect(screen.getByText(/200 g/)).toBeInTheDocument();
    });
});