import React from 'react';
import { render } from '@testing-library/react';
import { formatMessage } from '@theorchard/suite-i18n';
import { TestData } from 'lib/test-utils/table';
import { GridTable } from '../../../base/table';
import { TableExtensions } from '../../../base/tableExtensions';
import { TableProps } from '../../../base/types';
import { TableCustomizeExtension } from '../tableCustomizeExtension';

TableExtensions.addExtension(TableCustomizeExtension);

describe('TableCustomizeExtension', () => {
    const data: TestData[] = [
        { name: 'test1', value: 2 },
        { name: 'test2', value: 1 },
    ];

    const renderTable = (props: Partial<TableProps<TestData>> = {}) =>
        render(<GridTable data={data} {...props} />);

    describe('with "customizable" true', () => {
        test('renders "Customize" button in table header', () => {
            const { getByText } = renderTable({
                customizable: true,
            });

            const element = getByText(formatMessage('table_customize'), {
                selector: '.GridTable-header-right .btn',
            });

            expect(element).toBeVisible();
        });
    });
});