1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- import React from 'react';
- import { shallow } from 'enzyme';
- import Seek from './Seek';
- import styles from './Seek.css';
-
- describe('Seek', () => {
- let component;
-
- beforeAll(() => {
- component = shallow(<Seek />);
- });
-
- it('should accept a className prop and append it to the components class', () => {
- const newClassNameString = 'a new className';
- expect(component.prop('className'))
- .toContain(styles.component);
- component.setProps({
- className: newClassNameString
- });
- expect(component.prop('className'))
- .toContain(styles.component);
- expect(component.prop('className'))
- .toContain(newClassNameString);
- });
-
- it('has a range input with correct ranges and percentagePlayed value', () => {
- component.setProps({
- percentagePlayed: 10
- });
- const rangeInput = component.find(`.${styles.input}`);
- expect(rangeInput.prop('type'))
- .toEqual('range');
- expect(rangeInput.prop('orient'))
- .toEqual('horizontal');
- expect(rangeInput.prop('step'))
- .toEqual(1);
- expect(rangeInput.prop('min'))
- .toEqual('0');
- expect(rangeInput.prop('max'))
- .toEqual('100');
- expect(rangeInput.prop('value'))
- .toEqual(10);
- });
-
- it('handles an undefined percentagePlayed value', () => {
- component.setProps({
- percentagePlayed: undefined
- });
- const rangeInput = component.find(`.${styles.input}`);
- expect(rangeInput.prop('value'))
- .toEqual(0);
- });
-
- it('triggers \'onChange\' prop when the input is changed', () => {
- const spy = jest.fn();
- component.setProps({
- onChange: spy
- });
- expect(spy)
- .not.toHaveBeenCalled();
- component.find('input').simulate('change');
- expect(spy)
- .toHaveBeenCalled();
- });
-
- it('changes the played fill bar width', () => {
- component.setProps({
- percentagePlayed: 0
- });
- expect(component.find(`.${styles.fill}`).prop('style').width)
- .toEqual('0%');
- component.setProps({
- percentagePlayed: 11
- });
- expect(component.find(`.${styles.fill}`).prop('style').width)
- .toEqual('11%');
- });
-
- it('changes the buffer bar width', () => {
- component.setProps({
- percentageBuffered: 0
- });
- expect(component.find(`.${styles.buffer}`).prop('style').width)
- .toEqual('0%');
- component.setProps({
- percentageBuffered: 11
- });
- expect(component.find(`.${styles.buffer}`).prop('style').width)
- .toEqual('11%');
- });
- });
|