chore(jest): toHaveShadowPart custom matcher

core/setupJest.js

@@ -0,0 +1,21 @@
+expect.extend({
+  toHaveShadowPart(received, part) {
+    if (typeof part !== 'string') {
+      throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name');
+    }
+
+    if (received.shadowRoot === null) {
+      throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
+    }
+
+    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    const pass = shadowPart !== null;
+
+    const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
+
+    return {
+      pass,
+      message: () => message,
+    };
+  },
+});

core/src/components/range/test/range.spec.ts

@@ -237,13 +237,14 @@ describe('range: item adjustments', () => {
         html: `<ion-range pin="true" snaps="true" value="50" label="Label"></ion-range>`,
       });
       const range = page.body.querySelector('ion-range')!;
-      expect(range.shadowRoot!.querySelector('[part="label"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="pin"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="knob"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="bar"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="bar-active"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="tick"]')).not.toBe(null);
-      expect(range.shadowRoot!.querySelector('[part="tick-active"]')).not.toBe(null);
+
+      expect(range).toHaveShadowPart('label');
+      expect(range).toHaveShadowPart('pin');
+      expect(range).toHaveShadowPart('knob');
+      expect(range).toHaveShadowPart('bar');
+      expect(range).toHaveShadowPart('bar-active');
+      expect(range).toHaveShadowPart('tick');
+      expect(range).toHaveShadowPart('tick-active');
     });
   });
 });

core/src/jest.d.ts

@@ -0,0 +1,5 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toHaveShadowPart(part: string): R;
+  }
+}

core/stencil.config.ts

@@ -252,6 +252,7 @@ export const config: Config = {
       "@utils/test": ["<rootDir>/src/utils/test/utils"],
       "@utils/logging": ["<rootDir>/src/utils/logging"],
     },
+    setupFilesAfterEnv: ['./setupJest.js']
   },
   preamble: '(C) Ionic http://ionicframework.com - MIT License',
   globalScript: 'src/global/ionic-global.ts',