Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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',