React-TDD-10.js

import {CommentList} from '../CommentList';
import React from 'react';
import {shallow} from 'enzyme';

describe('Given the <CommentList/> component', () => {
  const requiredProps = () => ({});

  const render = (props = requiredProps()) => shallow(<CommentList {...props} />);

  test('should render', () => {
    const wrapper = render();

    expect(wrapper).toHaveLength(1);
  });

  test('should show a text regarding no comments if there are no comments', () => {
    const expectedText = 'No comments yet';

    const wrapper = render();

    expect(wrapper.text()).toStrictEqual(expectedText);
  });

  test('should show a loading indicator if comments are loading', () => {
    const expectedText = 'Loading';

    const props = {
      ...requiredProps(),
      isLoading: true
    };

    const wrapper = render(props);

    expect(wrapper.text()).toStrictEqual(expectedText);
  });

  test('should not show a loading indicator if comments are not loading', () => {
    const expectedText = 'Loading';

    const props = {
      ...requiredProps(),
      isLoading: false
    };

    const wrapper = render(props);

    expect(wrapper.text()).not.toStrictEqual(expectedText);
  });

  test('should show the total count of comments and maximum allowed comments', () => {
    const currentCommentsCountMock = 5;
    const totalCountMock = 10;
    
    const expectedText = `${currentCommentsCountMock} of ${totalCountMock}`;

    const props = {
      ...requiredProps(),
      comments: [...Array(currentCommentsCountMock).keys()],
      totalCount: totalCountMock
    };

    const wrapper = render(props);

    expect(wrapper.text()).toStrictEqual(expectedText);
  });
});