Enhancement Added unit tests for search message composing function

silverstripe · Jan 9, 2017 · 977394e · 977394e
1 parent 7869d38
commit 977394e
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 61 deletions.
diff --git a/client/src/containers/Gallery/Gallery.js b/client/src/containers/Gallery/Gallery.js
@@ -109,6 +109,74 @@ class Gallery extends Component {
     return $(ReactDOM.findDOMNode(this)).find('.gallery__sort .dropdown');
   }
 
+  /**
+   * Compose the search critia into a human readable message
+   *
+   * @param {object} search
+   * @returns {string}
+   */
+  getSearchMessage(search) {
+    const messages = [];
+    if (search.Name) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGEKEYWORDS',
+        'with keywords \'{Name}\''
+      ));
+    }
+
+    if (search.CreatedFrom && search.CreatedTo) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDBETWEEN',
+        'created between \'{CreatedFrom}\' and \'{CreatedTo}\''
+      ));
+    } else if (search.CreatedFrom) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDFROM',
+        'created after \'{CreatedFrom}\''
+      ));
+    } else if (search.CreatedTo) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDTO',
+        'created before \'{CreatedTo}\''
+      ));
+    }
+
+    if (search.AppCategory) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGECATEGORY',
+        'categorised as \'{AppCategory}\''
+      ));
+    }
+
+    if (!search.AllFolders) {
+      messages.push(i18n._t(
+        'LeftAndMain.SEARCHRESULTSMESSAGELIMIT',
+        'limited to the folder \'{Folder}\''
+      ));
+    }
+
+    const parts = [
+      messages.slice(0, -1).join(`${i18n._t('LeftAndMain.JOIN', ',')} `),
+      messages.slice(-1),
+    ].filter((part) => part).join(` ${i18n._t('LeftAndMain.JOINLAST', 'and')} `);
+
+    if (parts === '') {
+      return '';
+    }
+
+    const searchResults = {
+      parts: i18n.inject(parts, Object.assign(
+        { Folder: this.props.folder.title },
+        search
+      )),
+    };
+
+    return i18n.inject(
+      i18n._t('LeftAndMain.SEARCHRESULTSMESSAGE', 'Search results {parts}'),
+      searchResults
+    );
+  }
+
   /**
    * Required anti-pattern, because `.cms-content` is the container for the React component.
    *
@@ -502,69 +570,15 @@ class Gallery extends Component {
       return null;
     }
 
-    const messages = [];
-    if (search.Name) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGEKEYWORDS',
-        'with keywords \'{Name}\''
-      ));
-    }
-
-    if (search.CreatedFrom && search.CreatedTo) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDBETWEEN',
-        'created between \'{CreatedFrom}\' and \'{CreatedTo}\''
-      ));
-    } else if (search.CreatedFrom) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDFROM',
-        'created after \'{CreatedFrom}\''
-      ));
-    } else if (search.CreatedTo) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGEEDITEDTO',
-        'created before \'{CreatedTo}\''
-      ));
-    }
-
-    if (search.AppCategory) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGECATEGORY',
-        'categorised as \'{AppCategory}\''
-      ));
-    }
-
-    if (!search.AllFolders) {
-      messages.push(i18n._t(
-        'LeftAndMain.SEARCHRESULTSMESSAGELIMIT',
-        'limited to the folder \'{Folder}\''
-      ));
-    }
+    const message = this.getSearchMessage(search);
 
-    const parts = [
-      messages.slice(0, -1).join(`${i18n._t('LeftAndMain.JOIN', ',')} `),
-      messages.slice(-1),
-    ].filter((part) => part).join(` ${i18n._t('LeftAndMain.JOINLAST', 'and')} `);
-
-    if (parts === '') {
+    if (message === '') {
       return null;
     }
 
-    const searchResults = {
-      parts: i18n.inject(parts, Object.assign(
-        { Folder: this.props.folder.title },
-        search
-      )),
-    };
-
-    const fullMessage = i18n.inject(
-      i18n._t('LeftAndMain.SEARCHRESULTSMESSAGE', 'Search results {parts}'),
-      searchResults
-    );
-
     const body = (
       <div className="gallery__search-message fill-width">
-        <div className="flexbox-area-grow">{fullMessage}</div>
+        <div className="flexbox-area-grow">{message}</div>
         <div className="gallery__search-message-clear">
           <button
             onClick={this.handleClearSearch}

diff --git a/client/src/containers/Gallery/tests/Gallery-test.js b/client/src/containers/Gallery/tests/Gallery-test.js
@@ -3,6 +3,7 @@
 // mock GriddlePagination because it gives mutation warnings all over the place!
 jest.mock('griddle-react', () => null);
 jest.mock('components/FormAlert/FormAlert', () => null);
+jest.unmock('i18n');
 jest.unmock('react');
 jest.unmock('react-dom');
 jest.unmock('react-redux');
@@ -43,6 +44,7 @@ describe('Gallery', () => {
       fileId: null,
       folder: {
         id: 1,
+        title: 'container folder',
         parentId: null,
         canView: true,
         canEdit: true,
@@ -60,7 +62,59 @@ describe('Gallery', () => {
     };
   });
 
-  describe('compareFiles', () => {
+  describe('renderSearchAlert()', () => {
+    let gallery = null;
+
+    beforeEach(() => {
+      gallery = ReactTestUtils.renderIntoDocument(<Gallery {...props} />);
+    });
+
+    it('should show a message for containing folder if search is empty', () => {
+      const search = {};
+
+      const message = gallery.getSearchMessage(search);
+
+      expect(message).toContain('container folder');
+      expect(message).toContain('limited to');
+    });
+
+    it('should not show a message if search is empty with all folders', () => {
+      const search = { AllFolders: 1 };
+
+      const message = gallery.getSearchMessage(search);
+
+      expect(message).toBe('');
+    });
+
+    it('should show a single message without conjoins with one item', () => {
+      const search = { Name: 'hi', AllFolders: 1 };
+
+      const message = gallery.getSearchMessage(search);
+
+      expect(message).not.toContain(',');
+      expect(message).not.toContain('and');
+    });
+
+    it('should show a message with "and" with two items', () => {
+      const search = { Name: 'hi', AppCategory: 'image', AllFolders: 1 };
+
+      const message = gallery.getSearchMessage(search);
+
+      expect(message).not.toContain(',');
+      expect(message).toContain('and');
+    });
+
+    it('should show a message with "," and "and" with more than two items', () => {
+      const search = { Name: 'hi', AppCategory: 'image', CreatedFrom: '2016-03-17' };
+
+      const message = gallery.getSearchMessage(search);
+
+      expect(message).toContain(',');
+      expect(message).toContain('and');
+    });
+  });
+
+  describe('compareFiles()', () => {
     let gallery = null;
 
     beforeEach(() => {

diff --git a/client/src/lib/search.js b/client/src/lib/search.js
@@ -2,9 +2,9 @@ export function hasSearch(query) {
   if (!query || !query.q) {
     return false;
   }
-  const search = Object.entries(query.q).filter((entry) => {
-    return entry[1] !== '' && entry[0] !== 'AllFolders';
-  });
+  const search = Object.entries(query.q).filter((entry) => (
+    entry[1] !== '' && entry[0] !== 'AllFolders'
+  ));
 
   return search.length > 0;
 }