Created TagCard test

src/short-urls/ShortUrlsList.js

@@ -115,23 +115,17 @@ export class ShortUrlsListComponent extends React.Component {
     ));
   }
 
-  renderMobileOrderingControls() {
-    return (
-      <div className="d-block d-md-none mb-3">
-        <SortingDropdown
-          items={SORTABLE_FIELDS}
-          orderField={this.state.orderField}
-          orderDir={this.state.orderDir}
-          onChange={this.handleOrderBy}
-        />
-      </div>
-    );
-  }
-
   render() {
     return (
       <React.Fragment>
-        {this.renderMobileOrderingControls()}
+        <div className="d-block d-md-none mb-3">
+          <SortingDropdown
+            items={SORTABLE_FIELDS}
+            orderField={this.state.orderField}
+            orderDir={this.state.orderDir}
+            onChange={this.handleOrderBy}
+          />
+        </div>
         <table className="table table-striped table-hover">
           <thead className="short-urls-list__header">
             <tr>

src/tags/TagCard.js

@@ -28,36 +28,20 @@ export default class TagCard extends React.Component {
     return (
       <Card className="tag-card">
         <CardBody className="tag-card__body">
-          <button
-            className="btn btn-light btn-sm tag-card__btn tag-card__btn--last"
-            onClick={toggleDelete}
-          >
+          <button className="btn btn-light btn-sm tag-card__btn tag-card__btn--last" onClick={toggleDelete}>
             <FontAwesomeIcon icon={deleteIcon} />
           </button>
-          <button
-            className="btn btn-light btn-sm tag-card__btn"
-            onClick={toggleEdit}
-          >
+          <button className="btn btn-light btn-sm tag-card__btn" onClick={toggleEdit}>
             <FontAwesomeIcon icon={editIcon} />
           </button>
           <h5 className="tag-card__tag-title">
             <TagBullet tag={tag} />
-            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
-              {tag}
-            </Link>
+            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>{tag}</Link>
           </h5>
         </CardBody>
 
-        <DeleteTagConfirmModal
-          tag={tag}
-          toggle={toggleDelete}
-          isOpen={this.state.isDeleteModalOpen}
-        />
-        <EditTagModal
-          tag={tag}
-          toggle={toggleEdit}
-          isOpen={this.state.isEditModalOpen}
-        />
+        <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={this.state.isDeleteModalOpen} />
+        <EditTagModal tag={tag} toggle={toggleEdit} isOpen={this.state.isEditModalOpen} />
       </Card>
     );
   }

test/tags/TagCard.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
+import TagCard from '../../src/tags/TagCard';
+import TagBullet from '../../src/tags/helpers/TagBullet';
+
+describe('<TagCard />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<TagCard tag="ssr" currentServerId="1" />);
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('shows a TagBullet and a link to the list filtering by the tag', () => {
+    const link = wrapper.find(Link);
+    const bullet = wrapper.find(TagBullet);
+
+    expect(link.prop('to')).toEqual('/server/1/list-short-urls/1?tag=ssr');
+    expect(bullet.prop('tag')).toEqual('ssr');
+  });
+
+  it('displays delete modal when delete btn is clicked', (done) => {
+    const delBtn = wrapper.find('.tag-card__btn').at(0);
+
+    expect(wrapper.state('isDeleteModalOpen')).toEqual(false);
+    delBtn.simulate('click');
+
+    setImmediate(() => {
+      expect(wrapper.state('isDeleteModalOpen')).toEqual(true);
+      done();
+    });
+  });
+
+  it('displays edit modal when edit btn is clicked', (done) => {
+    const editBtn = wrapper.find('.tag-card__btn').at(1);
+
+    expect(wrapper.state('isEditModalOpen')).toEqual(false);
+    editBtn.simulate('click');
+
+    setImmediate(() => {
+      expect(wrapper.state('isEditModalOpen')).toEqual(true);
+      done();
+    });
+  });
+});