medium-test-directive-user-display.component.spec.js

describe('The userDisplay component', function() {
  it('should display the basic user information', function() {
    var user = {
      name: 'Bob',
      job: 'Pianist'
    };
    var element = compileComponent('<user-display user="user"></user-display>', user);

    expect(element.find('p')[0].html()).to.contain(user.name);
    expect(element.find('p')[1].html()).to.contain(user.job);
  });

  it('should allow the current user follow/unfollow displayed user', function() {
    // mock
    followService.isFollowing = function() {
      return false;
    };

    var user = {
      name: 'Bob',
      job: 'Pianist'
    };
    var element = compileComponent('<user-display user="user"></user-display>', user);

    expect(element.find('button').html()).to.contain('Follow');

    // now click to follow the user
    element.find('button').click();

    expect(followService.follow).to.have.been.calledOnce;
    expect(element.find('button').html()).to.contain('Unfollow');

    // now click to unfollow the user
    element.find('button').click();

    expect(followService.unfollow).to.have.been.calledOnce;
    expect(element.find('button').html()).to.contain('Follow');
  });
});