import React from "react";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import LocalLogicClient from "@local-logic/client";
import { Content, Root, Tabs } from "./Root/index";
import { LocalLogicProvider } from "../../context";
import { ScoreCategories, scoreCategories } from "../../main";

const client = LocalLogicClient("123");

describe("ScoreCategoryTabs", () => {
  it("renders tabs", () => {
    render(
      <LocalLogicProvider client={client}>
        <Root options={{ currentTab: "education", defaultTab: "nature" }}>
          <Tabs category={scoreCategories} />
        </Root>
      </LocalLogicProvider>
    );

    const text = screen.getByText("Education");
    expect(text).toBeDefined();
  });

  it("renders content", () => {
    render(
      <LocalLogicProvider client={client}>
        <Root options={{ currentTab: "education", defaultTab: "nature" }}>
          <Content options={{ value: "education" }} />
        </Root>
      </LocalLogicProvider>
    );

    const id = screen.queryAllByRole("education");
    expect(id).toBeDefined();
  });
});