Merge branch 'fe-jest-dom-patch-get-client-rects' into 'master'

Create getClientRects patch for JSDom in Jest

See merge request gitlab-org/gitlab!17906

spec/frontend/helpers/dom_shims/README.md

+## Jest DOM shims
+
+This is where we shim parts of JSDom. It is imported in our root `test_setup.js`.
+
+### Why do we need this?
+
+Since JSDom mocks a real DOM environment (which is a good thing), it 
+unfortunately does not support some jQuery matchers. 
+
+### References
+
+- https://gitlab.com/gitlab-org/gitlab/merge_requests/17906#note_224448120

spec/frontend/helpers/dom_shims/get_client_rects.js

+function hasHiddenStyle(node) {
+  if (!node.style) {
+    return false;
+  } else if (node.style.display === 'none' || node.style.visibility === 'hidden') {
+    return true;
+  }
+
+  return false;
+}
+
+function createDefaultClientRect() {
+  return {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+  };
+}
+
+/**
+ * This is needed to get the `toBeVisible` matcher to work in `jsdom`
+ *
+ * Reference:
+ * - https://github.com/jsdom/jsdom/issues/1322
+ * - https://github.com/unindented/custom-jquery-matchers/blob/v2.1.0/packages/custom-jquery-matchers/src/matchers.js#L157
+ */
+window.Element.prototype.getClientRects = function getClientRects() {
+  let node = this;
+
+  while (node) {
+    if (node === document) {
+      break;
+    }
+
+    if (hasHiddenStyle(node)) {
+      return [];
+    }
+    node = node.parentNode;
+  }
+
+  if (!node) {
+    return [];
+  }
+
+  return [createDefaultClientRect()];
+};

spec/frontend/helpers/dom_shims/get_client_rects_spec.js

+const createTestElement = () => {
+  const element = document.createElement('div');
+
+  element.textContent = 'Hello World!';
+
+  return element;
+};
+
+describe('DOM patch for getClientRects', () => {
+  let origHtml;
+  let el;
+
+  beforeEach(() => {
+    origHtml = document.body.innerHTML;
+    el = createTestElement();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = origHtml;
+  });
+
+  describe('toBeVisible matcher', () => {
+    describe('when not attached to document', () => {
+      it('does not match', () => {
+        expect(el).not.toBeVisible();
+      });
+    });
+
+    describe('when attached to document', () => {
+      beforeEach(() => {
+        document.body.appendChild(el);
+      });
+
+      it('matches', () => {
+        expect(el).toBeVisible();
+      });
+    });
+
+    describe('with parent and attached to document', () => {
+      let parentEl;
+
+      beforeEach(() => {
+        parentEl = createTestElement();
+        parentEl.appendChild(el);
+        document.body.appendChild(parentEl);
+      });
+
+      it('matches', () => {
+        expect(el).toBeVisible();
+      });
+
+      describe.each`
+        style
+        ${{ display: 'none' }}
+        ${{ visibility: 'hidden' }}
+      `('with style $style', ({ style }) => {
+        it('does not match when applied to element', () => {
+          Object.assign(el.style, style);
+
+          expect(el).not.toBeVisible();
+        });
+
+        it('does not match when applied to parent', () => {
+          Object.assign(parentEl.style, style);
+
+          expect(el).not.toBeVisible();
+        });
+      });
+    });
+  });
+});

spec/frontend/helpers/dom_shims/index.js

+import './get_client_rects';

spec/frontend/test_setup.js

@@ -8,6 +8,8 @@ import { getJSONFixture, loadHTMLFixture, setHTMLFixture } from './helpers/fixtu
 import { setupManualMocks } from './mocks/mocks_helper';
 import customMatchers from './matchers';
 
+import './helpers/dom_shims';
+
 // Expose jQuery so specs using jQuery plugins can be imported nicely.
 // Here is an issue to explore better alternatives:
 // https://gitlab.com/gitlab-org/gitlab/issues/12448