import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { RadioGroupProps } from "../RadioGroupProps";
import RadioGroup from "../RadioGroup";

const MockItemComponent: React.FC<React.HTMLAttributes<HTMLLIElement>> = ({ children }) => <li>{children}</li>;

describe("RadioGroup Component", () => {
    const props: RadioGroupProps = {
        ariaDescribedBy: "ariaDescribedByValue",
        ariaLabelledBy: "ariaLabelledByValue",
        className: "classNameValue",
        data: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }],
        defaultValue: {},
        dir: "dirValue",
        disabled: true,
        item: MockItemComponent,
        labelPlacement: "labelPlacementValue",
        layout: "horizontal",
        name: "nameValue",
        style: { color: 'red' },
        valid: true,
        value: "someStringValue",
        onChange: () => { 
            console.log("onChange");
        },
        onFocus: () => { 
            console.log("onFocus");
        },
    };
    it("renders all props correctly", () => {
        render(<RadioGroup {...props} />);
    });

    it("matches the snapshot", () => {
        const { asFragment } = render(<RadioGroup {...props} />);
        const fragment = asFragment();
        const cleanFragment = fragment.cloneNode(true) as HTMLElement;
        const inputs = cleanFragment.querySelectorAll("input");
        const labels = cleanFragment.querySelectorAll("label");
        
        inputs.forEach((input) => {
          input.removeAttribute("id");
        });
    
        labels.forEach((label) => {
          label.removeAttribute("for");
        });
    
        expect(cleanFragment).toMatchSnapshot();
      });
});