import { render, screen ,fireEvent} from "@testing-library/react";
import TabPanel from ".";

const tabsdata = [
    { name: "Text view", active: true, id: 0 },
    { name: "Tree view", active: true, id: 1 },
  ];
  
export const Tabs = <TabPanel textColor="primary" variant="standard" tabs={tabsdata}/>
export const txtjson = {
    short_name: "React App",
    name: "Create React App Sample",
    icons: [
      {
        src: "favicon.ico",
        sizes: "64x64 32x32 24x24 16x16",
        type: "image/x-icon",
      },
      {
        src: "logo192.png",
        type: "image/png",
        sizes: "192x192",
      },
      {
        src: "logo512.png",
        type: "image/png",
        sizes: "512x512",
      },
    ],
    start_url: ".",
    display: "standalone",
    theme_color: "#000000",
    background_color: "#ffffff",
  };
  export const treejson = {
    short_name: "React App",
    name: "Create React App Sample",
    icons: [
      {src: "favicon.ico",sizes: "64x64 32x32 24x24 16x16", type: "image/x-icon", },   
      { src: "logo192.png", type: "image/png", sizes: "192x192" },
      { src: "logo512.png", type: "image/png", sizes: "512x512" },
    ],
    start_url: ".",
    display: "standalone",
    theme_color: "#000000",
    background_color: "#ffffff",
  };
describe("Testing TabPanel", () => {
    test("Rendering TabPanel" ,() => {
        render(Tabs)
    });  
    test('text tab',()=>{
        render(Tabs);
            const tab = screen.getByRole('button',{name : tabsdata[0].name});
            fireEvent.click(tab)
            expect(screen.getByTestId('tab')).toBeEnabled()
            expect(txtjson).toBeTruthy()
    })
    test('tree tab',()=>{
        render(Tabs);
            const tab = screen.getByRole('button',{name:tabsdata[1].name});
            fireEvent.click(tab)
            expect(screen.getByTestId('tab')).toBeEnabled()
            expect(treejson).toBeTruthy()
    })  
})