How to use the @testing-library/react.getByRole function in @testing-library/react

test('it displays a fake new option at the end when adding a new option', async () => {
        window.HTMLElement.prototype.scrollIntoView = jest.fn();
        const showNewOptionFormCallback = jest.fn();
        await renderComponent(options, false, jest.fn(), showNewOptionFormCallback, jest.fn());

        expect(queryByRole(container, 'new-option-placeholder')).toBeNull();

        const addNewOptionButton = getByRole(container, 'add-new-attribute-option-button');
        await fireEvent.click(addNewOptionButton);
        const newOptionPlaceholder = getByRole(container, 'new-option-placeholder');

        expect(newOptionPlaceholder).toBeInTheDocument();
        expect(showNewOptionFormCallback).toHaveBeenNthCalledWith(1, true);

        const cancelNewOptionButton = getByRole(container, 'new-option-cancel');
        fireEvent.click(cancelNewOptionButton);
        expect(newOptionPlaceholder).not.toBeInTheDocument();
    });

test('it renders a list item', async () => {
        const onSelectCallback = jest.fn();

        await renderComponent(blackOption, onSelectCallback, jest.fn(), jest.fn(), jest.fn(), false, null, jest.fn());

        const attributeOption = getByRole(container, 'attribute-option-item');
        expect(attributeOption).toHaveClass('AknAttributeOption-listItem--selected');

        const attributeOptionLabel = getByRole(container, 'attribute-option-item-label');
        await fireEvent.click(attributeOptionLabel);
        expect(onSelectCallback).toHaveBeenNthCalledWith(1, 80);
    });

test('the attribute option deletion can be cancelled with the 2 cancel buttons', async () => {
        const deleteAttributeOptionCallback = jest.fn();

        await renderComponent(blackOption, jest.fn(), deleteAttributeOptionCallback, jest.fn(), jest.fn(), false, null, jest.fn());

        const deleteButton = getByRole(container, 'attribute-option-delete-button');
        await fireEvent.click(deleteButton);
        const deleteConfirmationModal = getByRole(container, 'attribute-option-delete-confirmation-modal');
        let cancelButtons = queryAllByRole(container, 'attribute-option-confirm-cancel-button');

        expect(cancelButtons).toHaveLength(2);

        await fireEvent.click(cancelButtons[0]);
        expect(deleteAttributeOptionCallback).not.toHaveBeenCalled();
        expect(deleteConfirmationModal).not.toBeInTheDocument();

        await fireEvent.click(deleteButton);
        cancelButtons = queryAllByRole(container, 'attribute-option-confirm-cancel-button');
        await fireEvent.click(cancelButtons[1]);
        expect(deleteAttributeOptionCallback).not.toHaveBeenCalled();
        expect(deleteConfirmationModal).not.toBeInTheDocument();
    });

test('it renders an empty attribute options list', async () => {
        await renderComponent([], false, jest.fn(), jest.fn(), jest.fn());
        expect(getByRole(container, 'attribute-options-list')).toBeEmpty();
    });

test('an attribute option will not be moved downwards if the treshold is not met', async () => {
        const moveOptionCallback = jest.fn();
        await renderComponent(blueOption, jest.fn(), jest.fn(), moveOptionCallback, jest.fn(), false, {code: 'black', index: 2}, jest.fn());
        const attributeOptionMoveHandle = getByRole(container, 'attribute-option-move-handle');

        fireEvent.dragOver(attributeOptionMoveHandle, {
            target: {
                getBoundingClientRect: jest.fn().mockImplementation(() => {
                    return {bottom: 10, top: 0};
                }),
                clientY: 6
            },
        });

        expect(moveOptionCallback).not.toHaveBeenCalled();
    });

test('it allows attribute option to be deleted', async () => {
        const deleteAttributeOptionCallback = jest.fn();

        await renderComponent(blackOption, jest.fn(), deleteAttributeOptionCallback, jest.fn(), jest.fn(), false, null, jest.fn());

        const deleteButton = getByRole(container, 'attribute-option-delete-button');
        let deleteConfirmationModal = queryByRole(container, 'attribute-option-delete-confirmation-modal');
        expect(deleteConfirmationModal).not.toBeInTheDocument();

        await fireEvent.click(deleteButton);

        deleteConfirmationModal = getByRole(container, 'attribute-option-delete-confirmation-modal');
        const confirmDeleteButton = getByRole(container, 'attribute-option-confirm-delete-button');
        const cancelButtons = queryAllByRole(container, 'attribute-option-confirm-cancel-button');

        expect(deleteAttributeOptionCallback).not.toHaveBeenCalled();
        expect(deleteConfirmationModal).toBeInTheDocument();
        expect(cancelButtons).toHaveLength(2);

        await fireEvent.click(confirmDeleteButton);
        expect(deleteAttributeOptionCallback).toHaveBeenCalled();
    });

test('it displays a fake new option at the end when adding a new option', async () => {
        window.HTMLElement.prototype.scrollIntoView = jest.fn();
        const showNewOptionFormCallback = jest.fn();
        await renderComponent(options, false, jest.fn(), showNewOptionFormCallback, jest.fn());

        expect(queryByRole(container, 'new-option-placeholder')).toBeNull();

        const addNewOptionButton = getByRole(container, 'add-new-attribute-option-button');
        await fireEvent.click(addNewOptionButton);
        const newOptionPlaceholder = getByRole(container, 'new-option-placeholder');

        expect(newOptionPlaceholder).toBeInTheDocument();
        expect(showNewOptionFormCallback).toHaveBeenNthCalledWith(1, true);

        const cancelNewOptionButton = getByRole(container, 'new-option-cancel');
        fireEvent.click(cancelNewOptionButton);
        expect(newOptionPlaceholder).not.toBeInTheDocument();
    });

test('the attribute option deletion can be cancelled with the 2 cancel buttons', async () => {
        const deleteAttributeOptionCallback = jest.fn();

        await renderComponent(blackOption, jest.fn(), deleteAttributeOptionCallback, jest.fn(), jest.fn(), false, null, jest.fn());

        const deleteButton = getByRole(container, 'attribute-option-delete-button');
        await fireEvent.click(deleteButton);
        const deleteConfirmationModal = getByRole(container, 'attribute-option-delete-confirmation-modal');
        let cancelButtons = queryAllByRole(container, 'attribute-option-confirm-cancel-button');

        expect(cancelButtons).toHaveLength(2);

        await fireEvent.click(cancelButtons[0]);
        expect(deleteAttributeOptionCallback).not.toHaveBeenCalled();
        expect(deleteConfirmationModal).not.toBeInTheDocument();

        await fireEvent.click(deleteButton);
        cancelButtons = queryAllByRole(container, 'attribute-option-confirm-cancel-button');
        await fireEvent.click(cancelButtons[1]);
        expect(deleteAttributeOptionCallback).not.toHaveBeenCalled();
        expect(deleteConfirmationModal).not.toBeInTheDocument();
    });

test('it displays a fake new option at the end when adding a new option', async () => {
        window.HTMLElement.prototype.scrollIntoView = jest.fn();
        const showNewOptionFormCallback = jest.fn();
        await renderComponent(options, false, jest.fn(), showNewOptionFormCallback, jest.fn());

        expect(queryByRole(container, 'new-option-placeholder')).toBeNull();

        const addNewOptionButton = getByRole(container, 'add-new-attribute-option-button');
        await fireEvent.click(addNewOptionButton);
        const newOptionPlaceholder = getByRole(container, 'new-option-placeholder');

        expect(newOptionPlaceholder).toBeInTheDocument();
        expect(showNewOptionFormCallback).toHaveBeenNthCalledWith(1, true);

        const cancelNewOptionButton = getByRole(container, 'new-option-cancel');
        fireEvent.click(cancelNewOptionButton);
        expect(newOptionPlaceholder).not.toBeInTheDocument();
    });

ReactDOM.render(
                
                    
                        
                            
                        
                    
                ,
                container
            );
        });

        const translations = queryAllByRole(container, 'attribute-option-label');
        expect(translations.length).toBe(2);

        const saveButton = getByRole(container, 'save-options-translations');
        expect(saveButton).toBeInTheDocument();

        await fireEvent.change(translations[0], {target: {value: 'Black 2'}});
        await fireEvent.click(saveButton);
        let expectedOption: AttributeOption = expect.objectContaining({
            id: 80,
            code: 'black',
            optionValues: {
                en_US: {
                    id: 1,
                    value: 'Black 2',
                    locale: 'en_US',
                },
                fr_FR: {
                    id: 2,
                    value: 'Noir',