import React from 'react';
import uxpect from 'app/test/unexpected';
import { render, fireEvent, screen } from '@testing-library/react';
import sinon from 'sinon';
import { TestContextProvider } from 'app/shell';

import ChangePassword from './ChangePassword';

describe('<ChangePassword />', () => {
    it('renders two <Input /> components', () => {
        render(
            <TestContextProvider>
                <ChangePassword onSubmit={async () => {}} />
            </TestContextProvider>,
        );

        expect(screen.getByLabelText('New password', { exact: false })).toBeInTheDocument();
        expect(screen.getByLabelText('Repeat the password', { exact: false })).toBeInTheDocument();
    });

    it('should call onSubmit if passwords entered', async () => {
        const onSubmit = sinon.spy(() => Promise.resolve()).named('onSubmit');

        render(
            <TestContextProvider>
                <ChangePassword onSubmit={onSubmit} />
            </TestContextProvider>,
        );

        fireEvent.change(screen.getByLabelText('New password', { exact: false }), {
            target: {
                value: '123',
            },
        });

        fireEvent.change(screen.getByLabelText('Repeat the password', { exact: false }), {
            target: {
                value: '123',
            },
        });

        fireEvent.click(screen.getByRole('button', { name: 'Change password' }).closest('button') as HTMLButtonElement);

        uxpect(onSubmit, 'was called');
    });
});