Break up __helpers__/matchers into sep modules

- This way we avoid cohesion problems with one single
  glorious matchers.js

spec/frontend/__helpers__/matchers.js

-export default {
-  toHaveSpriteIcon: (element, iconName) => {
-    if (!iconName) {
-      throw new Error('toHaveSpriteIcon is missing iconName argument!');
-    }
-
-    if (!(element instanceof HTMLElement)) {
-      throw new Error(`${element} is not a DOM element!`);
-    }
-
-    const iconReferences = [].slice.apply(element.querySelectorAll('svg use'));
-    const matchingIcon = iconReferences.find(
-      (reference) => reference.parentNode.getAttribute('data-testid') === `${iconName}-icon`,
-    );
-
-    const pass = Boolean(matchingIcon);
-
-    let message;
-    if (pass) {
-      message = `${element.outerHTML} contains the sprite icon "${iconName}"!`;
-    } else {
-      message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`;
-
-      const existingIcons = iconReferences.map((reference) => {
-        const iconUrl = reference.getAttribute('href');
-        return `"${iconUrl.replace(/^.+#/, '')}"`;
-      });
-      if (existingIcons.length > 0) {
-        message += ` (only found ${existingIcons.join(',')})`;
-      }
-    }
-
-    return {
-      pass,
-      message: () => message,
-    };
-  },
-  toMatchInterpolatedText(received, match) {
-    let clearReceived;
-    let clearMatch;
-
-    try {
-      clearReceived = received.replace(/\s\s+/gm, ' ').replace(/\s\./gm, '.').trim();
-    } catch (e) {
-      return { actual: received, message: 'The received value is not a string', pass: false };
-    }
-    try {
-      clearMatch = match.replace(/%{\w+}/gm, '').trim();
-    } catch (e) {
-      return { message: 'The comparator value is not a string', pass: false };
-    }
-    const pass = clearReceived === clearMatch;
-    const message = pass
-      ? () => `
-          \n\n
-          Expected: ${this.utils.printExpected(clearReceived)}
-          To not equal: ${this.utils.printReceived(clearMatch)}
-          `
-      : () =>
-          `
-        \n\n
-        Expected: ${this.utils.printExpected(clearReceived)}
-        To equal: ${this.utils.printReceived(clearMatch)}
-        `;
-
-    return { actual: received, message, pass };
-  },
-};

spec/frontend/__helpers__/matchers/index.js

+export * from './to_have_sprite_icon';
+export * from './to_match_interpolated_text';

spec/frontend/__helpers__/matchers/to_have_sprite_icon.js

+export const toHaveSpriteIcon = (element, iconName) => {
+  if (!iconName) {
+    throw new Error('toHaveSpriteIcon is missing iconName argument!');
+  }
+
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(`${element} is not a DOM element!`);
+  }
+
+  const iconReferences = [].slice.apply(element.querySelectorAll('svg use'));
+  const matchingIcon = iconReferences.find(
+    (reference) => reference.parentNode.getAttribute('data-testid') === `${iconName}-icon`,
+  );
+
+  const pass = Boolean(matchingIcon);
+
+  let message;
+  if (pass) {
+    message = `${element.outerHTML} contains the sprite icon "${iconName}"!`;
+  } else {
+    message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`;
+
+    const existingIcons = iconReferences.map((reference) => {
+      const iconUrl = reference.getAttribute('href');
+      return `"${iconUrl.replace(/^.+#/, '')}"`;
+    });
+    if (existingIcons.length > 0) {
+      message += ` (only found ${existingIcons.join(',')})`;
+    }
+  }
+
+  return {
+    pass,
+    message: () => message,
+  };
+};

spec/frontend/__helpers__/matchers/to_match_interpolated_text.js

+export const toMatchInterpolatedText = (received, match) => {
+  let clearReceived;
+  let clearMatch;
+
+  try {
+    clearReceived = received.replace(/\s\s+/gm, ' ').replace(/\s\./gm, '.').trim();
+  } catch (e) {
+    return { actual: received, message: 'The received value is not a string', pass: false };
+  }
+  try {
+    clearMatch = match.replace(/%{\w+}/gm, '').trim();
+  } catch (e) {
+    return { message: 'The comparator value is not a string', pass: false };
+  }
+  const pass = clearReceived === clearMatch;
+  const message = pass
+    ? () => `
+        \n\n
+        Expected: ${this.utils.printExpected(clearReceived)}
+        To not equal: ${this.utils.printReceived(clearMatch)}
+        `
+    : () =>
+        `
+      \n\n
+      Expected: ${this.utils.printExpected(clearReceived)}
+      To equal: ${this.utils.printReceived(clearMatch)}
+      `;
+
+  return { actual: received, message, pass };
+};

spec/frontend/__helpers__/matchers/to_match_interpolated_text_spec.js

+describe('custom matcher toMatchInterpolatedText', () => {
+  describe('malformed input', () => {
+    it.each([null, 1, Symbol, Array, Object])(
+      'fails graciously if the expected value is %s',
+      (expected) => {
+        expect(expected).not.toMatchInterpolatedText('null');
+      },
+    );
+  });
+  describe('malformed matcher', () => {
+    it.each([null, 1, Symbol, Array, Object])(
+      'fails graciously if the matcher is %s',
+      (matcher) => {
+        expect('null').not.toMatchInterpolatedText(matcher);
+      },
+    );
+  });
+
+  describe('positive assertion', () => {
+    it.each`
+      htmlString         | templateString
+      ${'foo'}           | ${'foo'}
+      ${'foo'}           | ${'foo%{foo}'}
+      ${'foo  '}         | ${'foo'}
+      ${'foo  '}         | ${'foo%{foo}'}
+      ${'foo   . '}      | ${'foo%{foo}.'}
+      ${'foo   bar . '}  | ${'foo%{foo} bar.'}
+      ${'foo\n\nbar . '} | ${'foo%{foo} bar.'}
+      ${'foo bar . .'}   | ${'foo%{fooStart} bar.%{fooEnd}.'}
+    `('$htmlString equals $templateString', ({ htmlString, templateString }) => {
+      expect(htmlString).toMatchInterpolatedText(templateString);
+    });
+  });
+
+  describe('negative assertion', () => {
+    it.each`
+      htmlString  | templateString
+      ${'foo'}    | ${'bar'}
+      ${'foo'}    | ${'bar%{foo}'}
+      ${'foo'}    | ${'@{lol}foo%{foo}'}
+      ${' fo o '} | ${'foo'}
+    `('$htmlString does not equal $templateString', ({ htmlString, templateString }) => {
+      expect(htmlString).not.toMatchInterpolatedText(templateString);
+    });
+  });
+});

spec/frontend/__helpers__/matchers_spec.js

-describe('Custom jest matchers', () => {
-  describe('toMatchInterpolatedText', () => {
-    describe('malformed input', () => {
-      it.each([null, 1, Symbol, Array, Object])(
-        'fails graciously if the expected value is %s',
-        (expected) => {
-          expect(expected).not.toMatchInterpolatedText('null');
-        },
-      );
-    });
-    describe('malformed matcher', () => {
-      it.each([null, 1, Symbol, Array, Object])(
-        'fails graciously if the matcher is %s',
-        (matcher) => {
-          expect('null').not.toMatchInterpolatedText(matcher);
-        },
-      );
-    });
-
-    describe('positive assertion', () => {
-      it.each`
-        htmlString         | templateString
-        ${'foo'}           | ${'foo'}
-        ${'foo'}           | ${'foo%{foo}'}
-        ${'foo  '}         | ${'foo'}
-        ${'foo  '}         | ${'foo%{foo}'}
-        ${'foo   . '}      | ${'foo%{foo}.'}
-        ${'foo   bar . '}  | ${'foo%{foo} bar.'}
-        ${'foo\n\nbar . '} | ${'foo%{foo} bar.'}
-        ${'foo bar . .'}   | ${'foo%{fooStart} bar.%{fooEnd}.'}
-      `('$htmlString equals $templateString', ({ htmlString, templateString }) => {
-        expect(htmlString).toMatchInterpolatedText(templateString);
-      });
-    });
-
-    describe('negative assertion', () => {
-      it.each`
-        htmlString  | templateString
-        ${'foo'}    | ${'bar'}
-        ${'foo'}    | ${'bar%{foo}'}
-        ${'foo'}    | ${'@{lol}foo%{foo}'}
-        ${' fo o '} | ${'foo'}
-      `('$htmlString does not equal $templateString', ({ htmlString, templateString }) => {
-        expect(htmlString).not.toMatchInterpolatedText(templateString);
-      });
-    });
-  });
-});

spec/frontend/__helpers__/shared_test_setup.js

@@ -8,7 +8,7 @@ import setWindowLocation from './set_window_location_helper';
 import { setGlobalDateToFakeDate } from './fake_date';
 import { loadHTMLFixture, setHTMLFixture } from './fixtures';
 import { TEST_HOST } from './test_constants';
-import customMatchers from './matchers';
+import * as customMatchers from './matchers';
 
 import './dom_shims';
 import './jquery';