Create custom matcher for jasmine unit tests

4 files changed, 97 insertions, 23 deletions

diff --git a/web-ui/karma.conf.js b/web-ui/karma.conf.js
index 24078513..1d751b9f 100644
--- a/web-ui/karma.conf.js
+++ b/web-ui/karma.conf.js
@@ -41,6 +41,7 @@ module.exports = function (config) {
       {pattern: 'app/locales/**/*.json', included: false},
       {pattern: 'app/js/**/*.js', included: false},
       {pattern: 'test/test_data.js', included: false},
+      {pattern: 'test/custom_matchers.js', included: false},
       {pattern: 'test/features.js', included: false},
       {pattern: 'test/spec/**/*.spec.js', included: false},
 
diff --git a/web-ui/test/custom_matchers.js b/web-ui/test/custom_matchers.js
new file mode 100644
index 00000000..6643a3c6
--- /dev/null
+++ b/web-ui/test/custom_matchers.js
@@ -0,0 +1,82 @@
+define([], function() {
+  'use strict';
+  function toBeRenderedInMatcher () {
+    return {
+      compare: function (mail, node) {
+        var result = {}, subject, tags, from, date, messages = [], notMessages = [];
+
+        subject = node.find('#mail-' + mail.ident + ' .subject-and-tags')[0];
+        tags = _.map(node.find('#mail-' + mail.ident + ' .subject-and-tags .tag'), function (tag) { return tag.textContent; });
+        date = node.find('#mail-' + mail.ident + ' .received-date');
+        from = node.find('#mail-' + mail.ident + ' .from');
+
+        if (subject && subject.textContent.trim() === mail.header.subject) {
+          result.pass = true;
+          notMessages.push('not to be rendered with subject ' + mail.header.subject);
+        } else {
+          result.pass = false;
+          messages.push('to be rendered with subject ' + mail.header.subject + ', but was rendered with subject ' + subject.textContent.trim());
+        }
+
+        if (tags && tags.join(', ') === mail.tags.join(', ')) {
+          result.pass &= true;
+          notMessages.push('not to be rendered with tags ' + mail.tags.join(', '));
+        } else {
+          result.pass |= false;
+          messages.push('to be rendered with tags ' + mail.tags.join(', ') + ', but was rendered with subject ' + tags.join(', '));
+        }
+
+        if (date && date.text().trim() === mail.header.date.split('T')[0]) {
+          result.pass &= true;
+          notMessages.push('not to be rendered with date ' + mail.header.date.split('T')[0]);
+        } else {
+          result.pass |= false;
+          messages.push('to be rendered with date ' + mail.header.date.split('T')[0] + ', but was rendered with date ' + date.text().trim());
+        }
+
+        if (from && from.text().trim() === mail.header.from) {
+          result.pass &= true;
+          notMessages.push('not to be rendered with from ' + mail.header.from);
+        } else {
+          result.pass |= false;
+          messages.push('to be rendered with from ' + mail.header.from + ', but was rendered with from ' + from.text().trim());
+        }
+
+        if (result.pass) {
+          result.message = 'Expected mail ' + mail.ident + ' ' + notMessages.join(', ');
+        } else {
+          result.message = 'Expected mail ' + mail.ident + ' ' + messages.join(', ');
+        }
+
+        return result;
+      }
+    };
+  }
+
+  function toBeRenderedSelectedInMatcher () {
+    return {
+      compare: function (mail, node) {
+        var result = {}, toBeRendered, mailNode;
+
+        toBeRendered = toBeRenderedInMatcher().compare(mail, node);
+
+        mailNode = node.find('#mail-' + mail.ident);
+        result.pass = toBeRendered.pass && mailNode.hasClass('selected');
+
+        if (result.pass) {
+          result.message = toBeRendered.message + '\nExpected mail ' + mail.ident + ' to not be selected in ' + mailNode.html();
+        } else {
+          result.message = toBeRendered.message + '\nExpected mail ' + mail.ident + ' to be selected in ' + mailNode.html();
+        }
+
+        return result;
+      }
+    };
+  }
+
+  return {
+    toBeRenderedIn: toBeRenderedInMatcher,
+    toBeRenderedSelectedIn: toBeRenderedSelectedInMatcher
+  };
+});
+
diff --git a/web-ui/test/spec/mail_list/ui/mail_list.spec.js b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
index 23ca87fb..5c285110 100644
--- a/web-ui/test/spec/mail_list/ui/mail_list.spec.js
+++ b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
@@ -6,6 +6,8 @@ describeComponent('mail_list/ui/mail_list', function () {
   var mailList;
 
   beforeEach(function () {
+    var customMatchers = require('test/custom_matchers');
+    jasmine.addMatchers(customMatchers);
     this.setupComponent('<div id="mails"></div>', {
       urlParams: {
         hasMailIdent: function () {
@@ -103,17 +105,17 @@ describeComponent('mail_list/ui/mail_list', function () {
     });
 
     it ('does not check the all checkbox if no mail checked has the current tag', function () {
-	  var setCheckAllCheckboxEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
-	  this.component.attr.currentTag = 'inbox';
+      var setCheckAllCheckboxEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
+      this.component.attr.currentTag = 'inbox';
 
-	  $(document).trigger(Pixelated.events.ui.mail.checked, {mail : {'1' : {tags: ['different']}}});
+      $(document).trigger(Pixelated.events.ui.mail.checked, {mail : {'1' : {tags: ['different']}}});
 
-	  expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, false);
+      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, false);
     });
 
     it('checks the check all checkbox if at least one mail is checked with the current tag', function () {
       var setCheckAllCheckboxEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
-	this.component.attr.currentTag = 'inbox';
+      this.component.attr.currentTag = 'inbox';
 
       $(document).trigger(Pixelated.events.ui.mail.checked, {mail: mailList[0]});
 
@@ -171,8 +173,8 @@ describeComponent('mail_list/ui/mail_list', function () {
       it('renders the new mails', function () {
         this.component.$node.trigger(Pixelated.events.mails.availableForRefresh, { mails: mailList });
 
-        matchMail(mailList[0], this.component.$node);
-        matchMail(mailList[1], this.component.$node);
+        expect(mailList[0]).toBeRenderedIn(this.component.$node);
+        expect(mailList[1]).toBeRenderedIn(this.component.$node);
       });
 
     });
@@ -182,8 +184,8 @@ describeComponent('mail_list/ui/mail_list', function () {
 
       this.component.$node.trigger(Pixelated.events.mails.available, { mails: mailList });
 
-      matchMail(mailList[0], this.component.$node);
-      matchMail(mailList[1], this.component.$node);
+      expect(mailList[0]).toBeRenderedIn(this.component.$node);
+      expect(mailList[1]).toBeRenderedIn(this.component.$node);
       expect(refreshTagListEvent).not.toHaveBeenTriggeredOn(document);
     });
 
@@ -192,8 +194,8 @@ describeComponent('mail_list/ui/mail_list', function () {
 
       this.component.trigger(Pixelated.events.mails.available, { mails: mailList });
 
-      matchSelectedMail(mailList[0], this.component.$node);
-      matchMail(mailList[1], this.component.$node);
+      expect(mailList[0]).toBeRenderedSelectedIn(this.component.$node);
+      expect(mailList[1]).toBeRenderedIn(this.component.$node);
     });
 
     it('should keep the mail checked when it was previously checked (so refresh works)', function () {
@@ -220,17 +222,6 @@ describeComponent('mail_list/ui/mail_list', function () {
 
       expect(this.component.attr.currentMailIdent).toEqual('');
     });
-
-    function matchMail(mail, node) {
-      expect(node.html()).toMatch('id="mail-' + mail.ident + '"');
-      expect(node.html()).toMatch('<div class="subject-and-tags">');
-      expect(node.html()).toMatch('<div class="from">' + mail.header.from + '</div>');
-      expect(node.html()).toMatch('<span class="received-date">' + mail.header.formattedDate);
-    }
-
-    function matchSelectedMail(mail, node) {
-      expect(node.html()).toMatch(['id="mail-', mail.ident, '" class="selected"'].join(''));
-    }
   });
 
   describe('when saving a draft', function () {
diff --git a/web-ui/test/test-main.js b/web-ui/test/test-main.js
index 4a77a657..5d5c7391 100644
--- a/web-ui/test/test-main.js
+++ b/web-ui/test/test-main.js
@@ -36,7 +36,7 @@ requirejs.config({
   deps: tests,
 
   callback: function () {
-    require(['page/events','test/test_data', 'views/i18n', 'monkey_patching/array', 'views/recipientListFormatter'], function (events, testData, i18n, mp, recipientListFormatter) {
+    require(['page/events','test/test_data', 'views/i18n', 'monkey_patching/array', 'views/recipientListFormatter', 'test/custom_matchers'], function (events, testData, i18n, mp, recipientListFormatter, customMatchers) {
       window.Pixelated = window.Pixelated || {};
       window.Pixelated.events = events;
       window.Pixelated.testData = testData;