@open-wc/semantic-dom-diff - npm Package Compare versions

Comparing version 0.17.8 to 0.17.9

chai-dom-diff-plugin.d.ts

 /// <reference types="chai" />
 
-declare namespace Chai {
-  interface Assertion {
-    dom: Assertion;
-    lightDom: Assertion;
-    shadowDom: Assertion;
-    notEqual(actual: Object, expected: Object, message?: string): void;
-    equalSnapshot(options?: Object): Assertion;
-    notEqualSnapshot(options?: Object): Assertion;
-  }
+import { DiffOptions } from "./get-diffable-html";
 
-  interface Assert {
-    dom: Assertion;
-    lightDom: Assertion;
-    shadowDom: Assertion;
-    equalSnapshot(fixture: any, options?: Object): Assertion;
+declare global {
+  namespace Chai {
+    interface Assertion extends LanguageChains, NumericComparison, TypeComparison {
+      dom: Assertion;
+      lightDom: Assertion;
+      shadowDom: Assertion;
+      notEqual(actual: Object, expected: Object, message?: string): void;
+      equalSnapshot(options?: Object): Assertion;
+      notEqualSnapshot(options?: Object): Assertion;
+    }
+
+    interface Assert {
+      dom: Pick<Assertion, 'equal'|'notEqual'|'equalSnapshot'|'notEqualSnapshot'>;
+      lightDom: Pick<Assertion, 'equal'|'notEqual'|'equalSnapshot'|'notEqualSnapshot'>;
+      shadowDom: Pick<Assertion, 'equal'|'notEqual'|'equalSnapshot'|'notEqualSnapshot'>;
+      equalSnapshot(fixture: any, options?: DiffOptions): Assertion;
+      notEqualSnapshot(fixture: any, options?: DiffOptions): Assertion;
+
+      equal<T>(actual: T, expected: T, message?: string, options?: DiffOptions): void;
+      equal<T>(actual: T, expected: T, message?: string): void;
+      equal<T>(actual: T, expected: T, options?: DiffOptions): void;
+
+      notEqual<T>(actual: T, expected: T, message?: string, options?: DiffOptions): void;
+      notEqual<T>(actual: T, expected: T, message?: string): void;
+      notEqual<T>(actual: T, expected: T, options?: DiffOptions): void;
+    }
+
+    interface Equal {
+      (value: any, message?: string, options?: DiffOptions): Assertion;
+      (value: any, options?: DiffOptions): Assertion;
+    }
   }
-}
+}

chai-dom-diff.d.ts

@@ -1,7 +0,22 @@
-/// <reference path="chai-dom-diff-plugin.d.ts" />
+/// <reference path="./chai-dom-diff-plugin.d.ts" />
 
-/**
- * @param {any} chai
- * @param {any} utils
- */
-export const chaiDomDiff: (chai: any, utils: any) => void;
+export const chaiDomDiff: Chai.ChaiPlugin
+
+// best guess based on https://github.com/wellguimaraes/mocha-snapshots/blob/cb4d4f00ee8a761461f8ccefba19dfdfa44c20a5/tests/__snapshots__/matchSnapshot.test.js.mocha-snapshot#L1-L50
+interface Snapshot {
+  code: string;
+}
+
+interface Snapshots {
+  update: boolean;
+  get(path: string[], index: number): Snapshot
+  set(path: string[], index: number, html: string, type: 'html'): Snapshot
+  match(html: string, test: string): boolean;
+}
+
+declare global {
+  interface Window {
+    __mocha_context__: Mocha.Context & { runnable: Mocha.Runnable & { type: string } };
+    __snapshot__: Snapshots
+  }
+}

chai-dom-diff.js

@@ -1,10 +0,30 @@
-// @ts-nocheck
 /* eslint-disable no-param-reassign */
 
-import { getDiffableHTML } from './get-diffable-html.js';
+import { getDiffableHTML, isDiffOptions } from './get-diffable-html.js';
 import { getOuterHtml, getCleanedShadowDom, snapshotPath } from './src/utils.js';
 
+/** @typedef {import('./get-diffable-html.js').DiffOptions} DiffOptions */
+
+function disambiguateArgs(...args) {
+  switch (args.length) {
+    // equal<T>(actual: T, expected: T, message?: string, options?: DiffOptions): void;
+    case 2: {
+      const [message, options] = args;
+      return { message, options };
+    }
+
+    // equal<T>(actual: T, expected: T, message?: string): void;
+    // equal<T>(actual: T, expected: T, options?: DiffOptions): void;
+    case 1: {
+      const [first] = args;
+      return isDiffOptions(first) ? { options: first } : { message: first };
+    }
+
+    default:
+      return {};
+  }
+}
+
 /**
- * @param {any} chai
- * @param {any} utils
+ * @type {Chai.ChaiPlugin}
  */
@@ -40,12 +60,19 @@ export const chaiDomDiff = (chai, utils) => {
 
-  /** Base HTML assertion for `assert` interface. */
-  const assertHtmlEquals = (actual, expected, options, negate = false) => {
+  /**
+   * Base HTML assertion for `assert` interface.
+   * @param {string | Node} actual
+   * @param {string | Node} expected
+   * @param {boolean} negate
+   * @param {[string]|[DiffOptions]|[string, DiffOptions]} rest
+   */
+  const assertHtmlEquals = (actual, expected, negate, ...rest) => {
+    const { message, options } = disambiguateArgs(...rest);
     // use chai's built-in string comparison, log the updated snapshot on error
-    const assertion = new chai.Assertion(getDiffableHTML(actual, options));
+    const assertion = new chai.Assertion(getDiffableHTML(actual, options), message);
     const expectedDiffableHTML = getDiffableHTML(expected, options);
 
     if (negate) {
-      assertion.not.equal(expectedDiffableHTML);
+      assertion.not.equal(expectedDiffableHTML, message);
     } else {
-      assertion.equal(expectedDiffableHTML);
+      assertion.equal(expectedDiffableHTML, message);
     }
@@ -56,2 +83,5 @@ };
   const domEquals = _super =>
+    /**
+     * @this {Chai.AssertionStatic}
+     */
     function handleDom(value, ...args) {
@@ -72,3 +102,3 @@ if (
 
-        assertHtmlEquals(html, value, args[0], utils.flag(this, 'negate'));
+        assertHtmlEquals(html, value, utils.flag(this, 'negate'), args[0]);
       } else {
@@ -86,4 +116,11 @@ _super.apply(this, [value, ...args]);
 
-  /** Base HTML snapshot assertion for `assert` interface. */
-  function assertHtmlEqualsSnapshot(actual, options, negate = false) {
+  /**
+   * Base HTML snapshot assertion for `assert` interface.
+   * @this {Chai.AssertionStatic}
+   * @param {string|Node} actual
+   * @param {boolean} negate
+   * @param {[string]|[DiffOptions]|[string, DiffOptions]} rest
+   */
+  function assertHtmlEqualsSnapshot(actual, negate, ...rest) {
+    const { message, options } = disambiguateArgs(...rest);
     const { index } = context;
@@ -113,3 +150,3 @@ context.index += 1;
           throw new chai.AssertionError(
-            `Received value does not match stored snapshot ${index}`,
+            message || `Received value does not match stored snapshot ${index}`,
             {
@@ -127,3 +164,6 @@ actual: html,
 
-  /** Snapshot assertion for `should` and `expect` interfaces. */
+  /**
+   * Snapshot assertion for `should` and `expect` interfaces.
+   * @this {Chai.AssertionStatic}
+   */
   function equalSnapshot(options) {
@@ -139,3 +179,3 @@ const el = chai.util.flag(this, 'object');
     }
-    return assertHtmlEqualsSnapshot.call(this, html, options, utils.flag(this, 'negate'));
+    return assertHtmlEqualsSnapshot.call(this, html, utils.flag(this, 'negate'), options);
   }
@@ -148,44 +188,62 @@
   utils.addMethod(chai.assert, 'notEqualSnapshot', assertHtmlEqualsSnapshot);
+
+  /** @type {Chai.Assert['dom']} */
   chai.assert.dom = {
-    equal(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getDomHtml(actualEl), expectedHTML, options);
+    equal(actualEl, expectedHTML, ...rest) {
+      const negate = false;
+      return assertHtmlEquals.call(this, getDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    notEqual(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getDomHtml(actualEl), expectedHTML, options, true);
+    notEqual(actualEl, expectedHTML, ...rest) {
+      const negate = true;
+      return assertHtmlEquals.call(this, getDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    equalSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, actualEl, options);
+    equalSnapshot(actualEl, ...rest) {
+      const negate = false;
+      return assertHtmlEqualsSnapshot.call(this, actualEl, negate, ...rest);
     },
-    notEqualSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, actualEl, options, true);
+    notEqualSnapshot(actualEl, ...rest) {
+      const negate = true;
+      return assertHtmlEqualsSnapshot.call(this, actualEl, negate, ...rest);
     },
   };
+
+  /** @type {Chai.Assert['lightDom']} */
   chai.assert.lightDom = {
-    equal(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getLightDomHtml(actualEl), expectedHTML, options);
+    equal(actualEl, expectedHTML, ...rest) {
+      const negate = false;
+      return assertHtmlEquals.call(this, getLightDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    notEqual(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getLightDomHtml(actualEl), expectedHTML, options, true);
+    notEqual(actualEl, expectedHTML, ...rest) {
+      const negate = true;
+      return assertHtmlEquals.call(this, getLightDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    equalSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, getLightDomHtml(actualEl), options);
+    equalSnapshot(actualEl, ...rest) {
+      const negate = false;
+      return assertHtmlEqualsSnapshot.call(this, getLightDomHtml(actualEl), negate, ...rest);
     },
-    notEqualSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, getLightDomHtml(actualEl), options, true);
+    notEqualSnapshot(actualEl, ...rest) {
+      const negate = true;
+      return assertHtmlEqualsSnapshot.call(this, getLightDomHtml(actualEl), negate, ...rest);
     },
   };
+
+  /** @type {Chai.Assert['shadowDom']} */
   chai.assert.shadowDom = {
-    equal(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getShadowDomHtml(actualEl), expectedHTML, options);
+    equal(actualEl, expectedHTML, ...rest) {
+      const negate = false;
+      return assertHtmlEquals.call(this, getShadowDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    notEqual(actualEl, expectedHTML, options) {
-      return assertHtmlEquals.call(this, getShadowDomHtml(actualEl), expectedHTML, options, true);
+    notEqual(actualEl, expectedHTML, ...rest) {
+      const negate = true;
+      return assertHtmlEquals.call(this, getShadowDomHtml(actualEl), expectedHTML, negate, ...rest);
     },
-    equalSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, getShadowDomHtml(actualEl), options);
+    equalSnapshot(actualEl, ...rest) {
+      const negate = false;
+      return assertHtmlEqualsSnapshot.call(this, getShadowDomHtml(actualEl), negate, ...rest);
     },
-    notEqualSnapshot(actualEl, options) {
-      return assertHtmlEqualsSnapshot.call(this, getShadowDomHtml(actualEl), options, true);
+    notEqualSnapshot(actualEl, ...rest) {
+      const negate = true;
+      return assertHtmlEqualsSnapshot.call(this, getShadowDomHtml(actualEl), negate, ...rest);
     },
   };
 };

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.17.9](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.17.8...@open-wc/semantic-dom-diff@0.17.9) (2020-04-26)
+
+
+### Bug Fixes
+
+* **semantic-dom-diff:** allow assertion message ([c8a3b18](https://github.com/open-wc/open-wc/commit/c8a3b18936de43cba0227c146e77b60a04327e41))
+
+
+
+
+
 ## [0.17.8](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.17.7...@open-wc/semantic-dom-diff@0.17.8) (2020-04-20)
@@ -8,0 +19,0 @@

get-diffable-html.d.ts

@@ -40,2 +40,7 @@ /**
 export function getDiffableHTML(html: string | Node, options?: DiffOptions): string;
+/**
+ * @param {*} arg
+ * @return {arg is DiffOptions}
+ */
+export function isDiffOptions(arg: any): arg is DiffOptions;
 export type IgnoreAttributesForTags = {
@@ -42,0 +47,0 @@ /**

get-diffable-html.js

@@ -280,1 +280,17 @@ const DEFAULT_IGNORE_TAGS = ['script', 'style', 'svg'];
 }
+
+/**
+ * @param {*} arg
+ * @return {arg is DiffOptions}
+ */
+export function isDiffOptions(arg) {
+  return (
+    arg &&
+    arg !== null &&
+    typeof arg === 'object' &&
+    ('ignoreAttributes' in arg ||
+      'ignoreTags' in arg ||
+      'ignoreChildren' in arg ||
+      'stripEmptyAttributes' in arg)
+  );
+}

package.json

 {
   "name": "@open-wc/semantic-dom-diff",
-  "version": "0.17.8",
+  "version": "0.17.9",
   "publishConfig": {
@@ -30,3 +30,6 @@ "access": "public"
   ],
-  "gitHead": "b77a9f4b56caad5026d2c8b4059aecc521ccaf0f"
+  "dependencies": {
+    "@types/chai": "^4.2.11"
+  },
+  "gitHead": "11053d638d9d6882d647550f7e1e5999b62552fb"
 }

README.md

@@ -285,24 +285,2 @@ # Semantic Dom Diff
 
-**TypeScript**
-
-When working with typescript you may notice that the types are not correct for
-
-```js
-expect(el).dom.to.equal('<div>Hey</div>', {
-  ignoreTags: ['my-custom-element'],
-});
-```
-
-e.g. the 2nd parameter is expected to be a string. Unfortunately, we currently can not change this.
-For now you will need to ignore types if you want to provide extra options.
-
-```js
-// @ts-ignore
-expect(el).dom.to.equal('<div>Hey</div>', {
-  ignoreTags: ['my-custom-element'],
-});
-```
-
-We plan to change and include it in the next [breaking testing release](https://github.com/open-wc/open-wc/projects/1).
-
 <script>
@@ -309,0 +287,0 @@ export default {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63907

increased by5.67%

Lines of code

661

increased by16.99%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of lines in readme file

296

decreased by-6.92%

Dependency changes

• + Added@types/chai@^4.2.11

• + Added@types/chai@4.3.19(transitive)