import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { HiddenListCount, HiddenListCountPropTypes } from '../hidden-count';

jest.mock('@theorchard/suite-icons', () => ({
    GlyphIcon: (props: any) => <span data-testid="mockGlyphIcon" {...props} />,
}));

const setup = (overrideProps?: Partial<HiddenListCountPropTypes>) => {
    const defaultProps: HiddenListCountPropTypes = {
        items: ['US'],
        maxVisibleItems: 10,
        testId: 'HiddenListCountId',
    };

    const props = { ...defaultProps, ...overrideProps };

    return render(<HiddenListCount {...props} />);
};

describe('<SectionPresentationalGroupItem />', () => {
    it('renders without crashing', () => {
        const { container } = setup();
        expect(container).toBeInTheDocument();
    });

    describe('when items has data', () => {
        const mockData = [
            'US',
            'GB',
            'AU',
            'NZ',
            'FR',
            'ES',
            'PL',
            'CA',
            'MX',
            'CN',
            'JP',
        ];

        beforeEach(() => {
            setup({ items: mockData });
        });

        it('renders hidden count', async () => {
            const hiddenCount = screen.getAllByTestId('HiddenListCountId')[0];
            expect(hiddenCount.innerHTML).toContain(
                'US, GB, AU, NZ, FR, ES, PL, CA, MX, CN'
            );
            expect(hiddenCount.innerHTML).toContain('+1');
        });

        it('shows more when hidden count clicked', async () => {
            const hiddenCountButton =
                screen.getAllByTestId('HiddenCount-button')[0];
            fireEvent.click(hiddenCountButton);
            const hiddenCount = screen.getAllByTestId('HiddenListCountId')[0];
            expect(hiddenCount.innerHTML).toContain(
                'US, GB, AU, NZ, FR, ES, PL, CA, MX, CN, JP'
            );
            expect(hiddenCount.innerHTML).not.toContain('+1');
        });
    });
});