IncomingCalls.test.tsx

import { shallow } from 'enzyme';

describe('IncomingCalls component', () => {
  describe('given NO calls', () => {
    it('should render empty state', async () => {
      const component = createComponent({ calls: [] });

      expect(component.exists(testId('no-incoming-calls'))).toBeTruthy();
    });

    it('should NOT render call list', async () => {
      const component = createComponent({ calls: [] });

      expect(component.exists(testId('incoming-call-list'))).toBeFalsy();
    });
  });

  describe('given calls', () => {
    it('should render incoming calls', async () => {
      const component = createComponent({ calls: [{ id: 'SOME_ID' }] });

      expect(component.exists(testId('incoming-call-list'))).toBeTruthy();
    });
    
    it('should render all calls', async () => {	
      const calls = [{ id: 'SOME_ID' }];	
      const component = createComponent({ calls });	

       expect(component.find(testId('incoming-call-list')).children()).toHaveLength(calls.length)	
    });

    it('should NOT render empty state', async () => {
      const component = createComponent({ calls: [{ id: 'SOME_ID' }] });

      expect(component.exists(testId('no-incoming-calls'))).toBeFalsy();
    });
  });
});

function createComponent(props = {}) {
  return shallow(<IncomingCalls {...props} />);
}