import * as React from 'react';
import { shallow } from 'enzyme';
import { cleanup } from 'react-testing-library';
import 'jest-styled-components';
import GroupedGrid from "../components/GroupedGrid/index";
import GroupedGridElement from "../components/GroupedGrid/Element";

beforeEach(cleanup);

describe("GroupedGrid", () => {
    test("01 - automatic snapshot matching", () => {
        const list = [
            {
                header: 'one',
                rows: [
                    {
                        text: 'one - 1'
                    },
                    {
                        text: 'one - 2'
                    },
                    {
                        text: 'one - 3'
                    },
                ]
            },
            {
                header: 'two',
                rows: [
                    {
                        text: 'two - 1'
                    },
                    {
                        text: 'two - 2'
                    },
                    {
                        text: 'two - 3'
                    },
                ]
            }
        ];

        const component = (
            <div style={{ width: '100%', height: '180px' }}>
                <GroupedGrid>
                    {this.list.map((item, index) =>
                        <GroupedGridElement key={index} header={item.header} >
                            {item.rows.map((row) => { return (row.text) })}
                        </GroupedGridElement>


                    )}
                </GroupedGrid>
            </div>
        );

        expect(component).toMatchSnapshot();
    });


});