Select Git revision
Forked from
UNL Information Services / UNL-CMS
Source project has a limited visibility.
patternGeneration.test.js 4.67 KiB
/* eslint-disable no-magic-numbers */
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '../../testing/mockRedux.js';
import { Pattern } from './patternGeneration.js';
import {
selectColorOne,
selectColorTwo,
selectColorThree,
selectColorFour,
showColorOne,
showColorTwo,
showColorThree,
showColorFour,
hideColorOne,
hideColorTwo,
hideColorThree,
hideColorFour,
} from './patternSlice.js'
jest.mock('./patternSlice.js', () =>({
selectColorOne: jest.fn().mockName('selectColorOne'),
showColorOne: jest.fn().mockName('showColorOne'),
hideColorOne: jest.fn().mockName('hideColorOne'),
selectColorTwo: jest.fn().mockName('selectColorTwo'),
showColorTwo: jest.fn().mockName('showColorTwo'),
hideColorTwo: jest.fn().mockName('hideColorTwo'),
selectColorThree: jest.fn().mockName('selectColorThree'),
showColorThree: jest.fn().mockName('showColorThree'),
hideColorThree: jest.fn().mockName('hideColorThree'),
selectColorFour: jest.fn().mockName('selectColorFour'),
showColorFour: jest.fn().mockName('showColorFour'),
hideColorFour: jest.fn().mockName('hideColorFour'),
}));
describe('red button', () => {
test('displays nothing when no pointer is present', () => {
selectColorOne.mockReturnValue('');
render(<Pattern></Pattern>);
expect(screen.getByTitle('red')).toHaveTextContent('');
});
test('changes to red when pointer is present', () => {
selectColorOne.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('red'));
expect(showColorOne).toHaveBeenCalledTimes(1);
});
test('changes back to nothing when pointer leaves', () => {
selectColorOne.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('red'));
expect(showColorOne).toHaveBeenCalledTimes(1);
userEvent.unhover(screen.getByTitle('red'));
expect(hideColorOne).toHaveBeenCalledTimes(1);
});
});
describe('blue button', () => {
test('displays nothing when no pointer is present', () => {
selectColorTwo.mockReturnValue('');
render(<Pattern></Pattern>);
expect(screen.getByTitle('blue')).toHaveTextContent('');
});
test('changes to blue when pointer is present', () => {
selectColorTwo.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('blue'));
expect(showColorTwo).toHaveBeenCalledTimes(1);
});
test('changes back to nothing when pointer leaves', () => {
selectColorTwo.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('blue'));
expect(showColorTwo).toHaveBeenCalledTimes(1);
userEvent.unhover(screen.getByTitle('blue'));
expect(hideColorTwo).toHaveBeenCalledTimes(1);
});
});
describe('yellow button', () => {
test('displays nothing when no pointer is present', () => {
selectColorThree.mockReturnValue('');
render(<Pattern></Pattern>);
expect(screen.getByTitle('yellow')).toHaveTextContent('');
});
test('changes to yellow when pointer is present', () => {
selectColorThree.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('yellow'));
expect(showColorThree).toHaveBeenCalledTimes(1);
});
test('changes back to nothing when pointer leaves', () => {
selectColorThree.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('yellow'));
expect(showColorThree).toHaveBeenCalledTimes(1);
userEvent.unhover(screen.getByTitle('yellow'));
expect(hideColorThree).toHaveBeenCalledTimes(1);
});
});
describe('green button', () => {
test('displays nothing when no pointer is present', () => {
selectColorFour.mockReturnValue('');
render(<Pattern></Pattern>);
expect(screen.getByTitle('green')).toHaveTextContent('');
});
test('changes to green when pointer is present', () => {
selectColorFour.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('green'));
expect(showColorFour).toHaveBeenCalledTimes(1);
});
test('changes back to nothing when pointer leaves', () => {
selectColorFour.mockReturnValue('');
render(<Pattern></Pattern>);
userEvent.hover(screen.getByTitle('green'));
expect(showColorFour).toHaveBeenCalledTimes(1);
userEvent.unhover(screen.getByTitle('green'));
expect(hideColorFour).toHaveBeenCalledTimes(1);
});
});