Skip to content
Snippets Groups Projects
Select Git revision
  • bba8900df26e879e41e21ea4383e6c76f724cbf2
  • master default protected
2 results

patternGeneration.test.js

Blame
  • Forked from SOFT Core / SOFT 260 / React Redux Starter Code
    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);
        });
    });