Created TagsList test

src/tags/TagsList.js

@@ -8,7 +8,7 @@ import { filterTags, forceListTags } from './reducers/tagsList';
 import TagCard from './TagCard';
 
 const { ceil } = Math;
-const TAGS_GROUP_SIZE = 4;
+const TAGS_GROUPS_AMOUNT = 4;
 
 export class TagsListComponent extends React.Component {
   static propTypes = {
@@ -16,6 +16,8 @@ export class TagsListComponent extends React.Component {
     forceListTags: PropTypes.func,
     tagsList: PropTypes.shape({
       loading: PropTypes.bool,
+      error: PropTypes.bool,
+      filteredTags: PropTypes.arrayOf(PropTypes.string),
     }),
     match: PropTypes.object,
   };
@@ -23,7 +25,7 @@ export class TagsListComponent extends React.Component {
   componentDidMount() {
     const { forceListTags } = this.props;
 
-    forceListTags(true);
+    forceListTags();
   }
 
   renderContent() {
@@ -47,7 +49,7 @@ export class TagsListComponent extends React.Component {
       return <MuttedMessage>No tags found</MuttedMessage>;
     }
 
-    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUP_SIZE), tagsList.filteredTags);
+    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
 
     return (
       <React.Fragment>
@@ -71,13 +73,9 @@ export class TagsListComponent extends React.Component {
 
     return (
       <div className="shlink-container">
-        {!this.props.tagsList.loading && (
+        {!this.props.tagsList.loading &&
-          <SearchField
+          <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
-            className="mb-3"
+        }
-            placeholder="Search tags..."
-            onChange={filterTags}
-          />
-        )}
         <div className="row">
           {this.renderContent()}
         </div>

test/tags/TagsList.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity, range } from 'ramda';
+import * as sinon from 'sinon';
+import { TagsListComponent as TagsList } from '../../src/tags/TagsList';
+import MuttedMessage from '../../src/utils/MuttedMessage';
+import TagCard from '../../src/tags/TagCard';
+import SearchField from '../../src/utils/SearchField';
+
+describe('<TagsList />', () => {
+  let wrapper;
+  const filterTags = sinon.spy();
+  const createWrapper = (tagsList) => {
+    const params = { serverId: '1' };
+
+    wrapper = shallow(
+      <TagsList forceListTags={identity} filterTags={filterTags} match={{ params }} tagsList={tagsList} />
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => {
+    wrapper && wrapper.unmount();
+    filterTags.resetHistory();
+  });
+
+  it('shows a loading message when tags are being loaded', () => {
+    const wrapper = createWrapper({ loading: true });
+    const loadingMsg = wrapper.find(MuttedMessage);
+
+    expect(loadingMsg).toHaveLength(1);
+    expect(loadingMsg.html()).toContain('Loading...');
+  });
+
+  it('shows an error when tags failed to be loaded', () => {
+    const wrapper = createWrapper({ error: true });
+    const errorMsg = wrapper.find('.bg-danger');
+
+    expect(errorMsg).toHaveLength(1);
+    expect(errorMsg.html()).toContain('Error loading tags :(');
+  });
+
+  it('shows a message when the list of tags is empty', () => {
+    const wrapper = createWrapper({ filteredTags: [] });
+    const msg = wrapper.find(MuttedMessage);
+
+    expect(msg).toHaveLength(1);
+    expect(msg.html()).toContain('No tags found');
+  });
+
+  it('renders the proper amount of groups and cards based on the amount of tags', () => {
+    const amountOfTags = 10;
+    const amountOfGroups = 4;
+    const wrapper = createWrapper({ filteredTags: range(0, amountOfTags).map((i) => `tag_${i}`) });
+    const cards = wrapper.find(TagCard);
+    const groups = wrapper.find('.col-md-6');
+
+    expect(cards).toHaveLength(amountOfTags);
+    expect(groups).toHaveLength(amountOfGroups);
+  });
+
+  it('triggers tags filtering when search field changes', (done) => {
+    const wrapper = createWrapper({ filteredTags: [] });
+    const searchField = wrapper.find(SearchField);
+
+    expect(searchField).toHaveLength(1);
+    expect(filterTags.callCount).toEqual(0);
+    searchField.simulate('change');
+
+    setImmediate(() => {
+      expect(filterTags.callCount).toEqual(1);
+      done();
+    });
+  });
+});