Add Test for CSS Modules

[justin808]

See: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fapp%2Fbundles%2Fcomments%2Fcomponents%2FCommentBox%2FCommentList%2FComment%2FComment.spec.jsx#L17

import { React, expect, TestUtils } from 'libs/testHelper';

import Comment from './Comment';

const {
  renderIntoDocument,
  findRenderedDOMComponentWithClass,
  findRenderedDOMComponentWithTag,
} = TestUtils;

describe('Comment', () => {
  it('renders an author and comment with proper css classes', () => {
    const component = renderIntoDocument(
      <Comment author="Frank" text="Hi!"/>
    );

    // TODO: Setup testing of CSS Modules classNames
    // const comment = findRenderedDOMComponentWithTag(component, 'div');
    // expect(comment.className).to.equal('comment');
    // const author = findRenderedDOMComponentWithTag(component, 'h2');
    // expect(author.className).to.equal('comment-author');
    const text = findRenderedDOMComponentWithTag(component, 'span');
    expect(text.className).to.equal('js-comment-text');
  });

  it('shows the author', () => {
    const component = renderIntoDocument(
      <Comment author="Frank" text="Hi!"/>
    );

    const author = findRenderedDOMComponentWithClass(component, 'js-comment-author');
    expect(author.textContent).to.equal('Frank');
  });

  it('shows the comment text in markdown', () => {
    const component = renderIntoDocument(
      <Comment author="Frank" text="Hi!"/>
    );

    const comment = findRenderedDOMComponentWithClass(component, 'js-comment-text');
    expect(comment.textContent).to.equal('Hi!\n');
  });
});

[alex35mil]

Link: https://github.com/css-modules/css-modules-require-hook

[justin808]

@alexfedoseev I'm not sure what's worth testing in terms of the CSS classes. In other words, I think only the flow of state and properties is worth testing for React at this level. The integration tests should test the overall flow. I think manual testing is needed to verify the look of the CSS.

[robwise]

@justin808 @alexfedoseev I could be wrong, but I assume this test is to make sure the css-modules infrastructure itself works, but yeah it's not something we would keep writing tests for?

[alex35mil]

@justin808 @robwise I updated test env setup on fng to work with CSS Modules: we can test them or just ignore them (thus other tests will run fine).

[justin808]

I don't see much value in testing css in the JS tests. What would we test? Just that the class exists? I guess that's low cost and that would catch some bad CSS change (like an accidental global search/replace).

CC: @josiasds @alexfedoseev @robwise @MaMute

[alex35mil]

@justin808 We needed to set this up mainly b/c tests can't be executed without handling css imports. So it's just to make tests work, not to test css itself.