accessibility-testing-toolkit - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

dist/esm/index.js

@@ -381,2 +381,4 @@ var __defProp = Object.defineProperty;
 // src/helpers.ts
+import _deepClone from "lodash.clonedeep";
+import _isEqual from "lodash.isequal";
 var containerAttributeValues = {
@@ -396,2 +398,3 @@ name: "",
 };
+var getDefaultState = () => _deepClone(defaultState);
 var defaultQueries = {
@@ -406,9 +409,8 @@ level: void 0,
 };
+var getDefaultQueries = () => _deepClone(defaultQueries);
 var isDefaultState = (state) => {
-  return Object.entries(state).every(
-    ([key, value]) => value === defaultState[key]
-  );
+  return _isEqual(state, defaultState);
 };
 var isDefaultQueries = (queries) => {
-  return queries.level === defaultQueries.level && queries.value.min === defaultQueries.value.min && queries.value.max === defaultQueries.value.max && queries.value.now === defaultQueries.value.now && queries.value.text === defaultQueries.value.text;
+  return _isEqual(queries, defaultQueries);
 };
@@ -423,17 +425,2 @@ var isDefaultAttributeValues = (node) => {
 };
-var getExpectedStringMatch = (receivedValue, expectedValue, element) => {
-  if (receivedValue === void 0) {
-    return expectedValue;
-  }
-  if (expectedValue === void 0) {
-    return receivedValue;
-  }
-  if (expectedValue instanceof RegExp) {
-    return expectedValue.test(receivedValue) ? receivedValue : expectedValue;
-  }
-  if (typeof expectedValue === "function") {
-    return expectedValue(receivedValue, element) ? receivedValue : expectedValue;
-  }
-  return expectedValue;
-};
 
@@ -461,2 +448,3 @@ // src/tree/prune-container-nodes.ts
 // src/prepare-diff.ts
+import _cloneDeep from "lodash.clonedeep";
 var getReceivedName = (node) => {
@@ -510,3 +498,3 @@ if (node instanceof StaticText || !node) {
     if (state === void 0) {
-      state = __spreadValues({}, defaultState);
+      state = getDefaultState();
     }
@@ -524,6 +512,6 @@ state.busy = (_a = expected.state.busy) != null ? _a : state.busy;
 var computeDiffQueries = (received, expected, element) => {
-  let queries = received instanceof StaticText || !received ? void 0 : __spreadValues({}, received.queries);
+  let queries = received instanceof StaticText || !received ? void 0 : _cloneDeep(received.queries);
   if (expected == null ? void 0 : expected.queries) {
     if (queries === void 0) {
-      queries = __spreadValues({}, defaultQueries);
+      queries = getDefaultQueries();
     }
@@ -541,5 +529,5 @@ queries.level = expected.queries.level;
       }
-      if (isA11yTreeNode(received) && expected.queries.value.text !== void 0) {
-        queries.value.text = getExpectedStringMatch(
-          received == null ? void 0 : received.queries.value.text,
+      if (expected.queries.value.text !== void 0) {
+        queries.value.text = computeTextValue(
+          isA11yTreeNode(received) ? received == null ? void 0 : received.queries.value.text : void 0,
           expected.queries.value.text,
@@ -603,6 +591,3 @@ element
   }).filter(Boolean);
-  if (role === void 0 || name === void 0 || description === void 0 || state === void 0 || queries === void 0) {
-    return void 0;
-  }
-  const result = expected ? {
+  const result = {
     role,
@@ -614,13 +599,63 @@ name,
     children
-  } : void 0;
+  };
   return result;
 };
 
-// src/pretty-tree.ts
-var getStateDetails = (state) => {
-  const nonDefaultEntries = Object.entries(state).filter(
-    ([key, value]) => value !== defaultState[key]
-  );
-  return nonDefaultEntries.length > 0 ? `{ ${nonDefaultEntries.map(([key, value]) => `${key}: ${value}`).join(", ")} }` : "";
+// src/pretty-tree/omit-default-values.ts
+function isNestedObject(value) {
+  return typeof value === "object" && value !== null && !(value instanceof RegExp);
+}
+function omitDefaultValues(target, defaults) {
+  const filteredObject = {};
+  Object.keys(target).forEach((key) => {
+    const targetValue = target[key];
+    const defaultValue = defaults[key];
+    if (targetValue !== defaultValue && targetValue !== void 0) {
+      filteredObject[key] = targetValue;
+    } else if (isNestedObject(targetValue) && isNestedObject(defaultValue)) {
+      const result = omitDefaultValues(targetValue, defaultValue);
+      if (Object.keys(result).length > 0) {
+        filteredObject[key] = result;
+      }
+    }
+  });
+  return filteredObject;
+}
+
+// src/pretty-tree/render-properties.ts
+var renderPropertyValue = (value) => {
+  switch (typeof value) {
+    case "function":
+      return "Function";
+    case "number":
+    case "boolean":
+      return String(value);
+    case "undefined":
+      return "";
+    case "object":
+      if (value instanceof RegExp) {
+        return value.toString();
+      }
+      return "";
+    default:
+      return `"${value}"`;
+  }
 };
+var renderProperties = (obj, prefix = "") => {
+  const keyValuePairs = Object.entries(obj).flatMap(([key, value]) => {
+    if (value === void 0) {
+      return [];
+    }
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === "object" && !(value instanceof RegExp) && !(value instanceof Function)) {
+      return renderProperties(value, fullKey);
+    } else {
+      const renderedValue = renderPropertyValue(value);
+      return renderedValue ? `${fullKey}=${renderedValue}` : [];
+    }
+  });
+  return keyValuePairs.join(" ");
+};
+
+// src/pretty-tree/pretty-tree.ts
 var renderStringMatcher = (textMatcher) => {
@@ -657,5 +692,8 @@ if (textMatcher instanceof RegExp || typeof textMatcher === "number") {
   }
+  const filteredState = tree.state ? omitDefaultValues(tree.state, defaultState) : void 0;
+  const filteredQueries = tree.queries ? omitDefaultValues(tree.queries, defaultQueries) : void 0;
   const nameString = tree.name ? ` ${renderStringMatcher(tree.name)}` : "";
-  const stateString = getStateDetails(tree.state);
-  let output = `${indentation}${tree.role}${nameString}${stateString ? " " + stateString : ""}
+  const stateString = filteredState ? ` ${renderProperties(filteredState)}` : "";
+  const queriesString = filteredQueries ? ` ${renderProperties(filteredQueries)}` : "";
+  let output = `${indentation}${tree.role}${nameString}${stateString}${queriesString}
 `;
@@ -841,3 +879,3 @@ if (tree.description) {
 
-// src/test-helpers.ts
+// src/helpers/by-role.ts
 function anyObjectPropertiesAreDefined(obj) {
@@ -875,5 +913,5 @@ return Object.values(obj).some((value) => value !== void 0);
   byRole,
-  pruneContainerNodes as flattenAccessibilityTree,
-  getAccessibilityTree
+  getAccessibilityTree,
+  pruneContainerNodes
 };
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -130,2 +130,2 @@ import { ARIARoleDefinitionKey } from 'aria-query';
 
-export { A11yTreeNode, A11yTreeNodeMatch, A11yTreeNodeState as A11yTreeState, ARIARoleDefinitionKeyExtended, AsNonLandmarkRoles, MatcherOptions, VirtualRoles, byRole, pruneContainerNodes as flattenAccessibilityTree, getAccessibilityTree };
+export { A11yTreeNode, A11yTreeNodeMatch, A11yTreeNodeState, ARIARoleDefinitionKeyExtended, AsNonLandmarkRoles, MatcherOptions, VirtualRoles, byRole, getAccessibilityTree, pruneContainerNodes };

dist/index.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -8,2 +9,3 @@ var __defProps = Object.defineProperties;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -48,2 +50,10 @@ var __propIsEnum = Object.prototype.propertyIsEnumerable;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -55,4 +65,4 @@
   byRole: () => byRole,
-  flattenAccessibilityTree: () => pruneContainerNodes,
-  getAccessibilityTree: () => getAccessibilityTree
+  getAccessibilityTree: () => getAccessibilityTree,
+  pruneContainerNodes: () => pruneContainerNodes
 });
@@ -404,2 +414,4 @@ module.exports = __toCommonJS(src_exports);
 // src/helpers.ts
+var import_lodash = __toESM(require("lodash.clonedeep"));
+var import_lodash2 = __toESM(require("lodash.isequal"));
 var containerAttributeValues = {
@@ -419,2 +431,3 @@ name: "",
 };
+var getDefaultState = () => (0, import_lodash.default)(defaultState);
 var defaultQueries = {
@@ -429,9 +442,8 @@ level: void 0,
 };
+var getDefaultQueries = () => (0, import_lodash.default)(defaultQueries);
 var isDefaultState = (state) => {
-  return Object.entries(state).every(
-    ([key, value]) => value === defaultState[key]
-  );
+  return (0, import_lodash2.default)(state, defaultState);
 };
 var isDefaultQueries = (queries) => {
-  return queries.level === defaultQueries.level && queries.value.min === defaultQueries.value.min && queries.value.max === defaultQueries.value.max && queries.value.now === defaultQueries.value.now && queries.value.text === defaultQueries.value.text;
+  return (0, import_lodash2.default)(queries, defaultQueries);
 };
@@ -446,17 +458,2 @@ var isDefaultAttributeValues = (node) => {
 };
-var getExpectedStringMatch = (receivedValue, expectedValue, element) => {
-  if (receivedValue === void 0) {
-    return expectedValue;
-  }
-  if (expectedValue === void 0) {
-    return receivedValue;
-  }
-  if (expectedValue instanceof RegExp) {
-    return expectedValue.test(receivedValue) ? receivedValue : expectedValue;
-  }
-  if (typeof expectedValue === "function") {
-    return expectedValue(receivedValue, element) ? receivedValue : expectedValue;
-  }
-  return expectedValue;
-};
 
@@ -484,2 +481,3 @@ // src/tree/prune-container-nodes.ts
 // src/prepare-diff.ts
+var import_lodash3 = __toESM(require("lodash.clonedeep"));
 var getReceivedName = (node) => {
@@ -533,3 +531,3 @@ if (node instanceof StaticText || !node) {
     if (state === void 0) {
-      state = __spreadValues({}, defaultState);
+      state = getDefaultState();
     }
@@ -547,6 +545,6 @@ state.busy = (_a = expected.state.busy) != null ? _a : state.busy;
 var computeDiffQueries = (received, expected, element) => {
-  let queries = received instanceof StaticText || !received ? void 0 : __spreadValues({}, received.queries);
+  let queries = received instanceof StaticText || !received ? void 0 : (0, import_lodash3.default)(received.queries);
   if (expected == null ? void 0 : expected.queries) {
     if (queries === void 0) {
-      queries = __spreadValues({}, defaultQueries);
+      queries = getDefaultQueries();
     }
@@ -564,5 +562,5 @@ queries.level = expected.queries.level;
       }
-      if (isA11yTreeNode(received) && expected.queries.value.text !== void 0) {
-        queries.value.text = getExpectedStringMatch(
-          received == null ? void 0 : received.queries.value.text,
+      if (expected.queries.value.text !== void 0) {
+        queries.value.text = computeTextValue(
+          isA11yTreeNode(received) ? received == null ? void 0 : received.queries.value.text : void 0,
           expected.queries.value.text,
@@ -626,6 +624,3 @@ element
   }).filter(Boolean);
-  if (role === void 0 || name === void 0 || description === void 0 || state === void 0 || queries === void 0) {
-    return void 0;
-  }
-  const result = expected ? {
+  const result = {
     role,
@@ -637,13 +632,63 @@ name,
     children
-  } : void 0;
+  };
   return result;
 };
 
-// src/pretty-tree.ts
-var getStateDetails = (state) => {
-  const nonDefaultEntries = Object.entries(state).filter(
-    ([key, value]) => value !== defaultState[key]
-  );
-  return nonDefaultEntries.length > 0 ? `{ ${nonDefaultEntries.map(([key, value]) => `${key}: ${value}`).join(", ")} }` : "";
+// src/pretty-tree/omit-default-values.ts
+function isNestedObject(value) {
+  return typeof value === "object" && value !== null && !(value instanceof RegExp);
+}
+function omitDefaultValues(target, defaults) {
+  const filteredObject = {};
+  Object.keys(target).forEach((key) => {
+    const targetValue = target[key];
+    const defaultValue = defaults[key];
+    if (targetValue !== defaultValue && targetValue !== void 0) {
+      filteredObject[key] = targetValue;
+    } else if (isNestedObject(targetValue) && isNestedObject(defaultValue)) {
+      const result = omitDefaultValues(targetValue, defaultValue);
+      if (Object.keys(result).length > 0) {
+        filteredObject[key] = result;
+      }
+    }
+  });
+  return filteredObject;
+}
+
+// src/pretty-tree/render-properties.ts
+var renderPropertyValue = (value) => {
+  switch (typeof value) {
+    case "function":
+      return "Function";
+    case "number":
+    case "boolean":
+      return String(value);
+    case "undefined":
+      return "";
+    case "object":
+      if (value instanceof RegExp) {
+        return value.toString();
+      }
+      return "";
+    default:
+      return `"${value}"`;
+  }
 };
+var renderProperties = (obj, prefix = "") => {
+  const keyValuePairs = Object.entries(obj).flatMap(([key, value]) => {
+    if (value === void 0) {
+      return [];
+    }
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === "object" && !(value instanceof RegExp) && !(value instanceof Function)) {
+      return renderProperties(value, fullKey);
+    } else {
+      const renderedValue = renderPropertyValue(value);
+      return renderedValue ? `${fullKey}=${renderedValue}` : [];
+    }
+  });
+  return keyValuePairs.join(" ");
+};
+
+// src/pretty-tree/pretty-tree.ts
 var renderStringMatcher = (textMatcher) => {
@@ -680,5 +725,8 @@ if (textMatcher instanceof RegExp || typeof textMatcher === "number") {
   }
+  const filteredState = tree.state ? omitDefaultValues(tree.state, defaultState) : void 0;
+  const filteredQueries = tree.queries ? omitDefaultValues(tree.queries, defaultQueries) : void 0;
   const nameString = tree.name ? ` ${renderStringMatcher(tree.name)}` : "";
-  const stateString = getStateDetails(tree.state);
-  let output = `${indentation}${tree.role}${nameString}${stateString ? " " + stateString : ""}
+  const stateString = filteredState ? ` ${renderProperties(filteredState)}` : "";
+  const queriesString = filteredQueries ? ` ${renderProperties(filteredQueries)}` : "";
+  let output = `${indentation}${tree.role}${nameString}${stateString}${queriesString}
 `;
@@ -864,3 +912,3 @@ if (tree.description) {
 
-// src/test-helpers.ts
+// src/helpers/by-role.ts
 function anyObjectPropertiesAreDefined(obj) {
@@ -899,5 +947,5 @@ return Object.values(obj).some((value) => value !== void 0);
   byRole,
-  flattenAccessibilityTree,
-  getAccessibilityTree
+  getAccessibilityTree,
+  pruneContainerNodes
 });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "accessibility-testing-toolkit",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "author": "Ivan Galiatin",
@@ -67,2 +67,4 @@ "license": "MIT",
     "dom-accessibility-api": "^0.6.3",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.5.0",
     "tslib": "^2.6.2"
@@ -76,2 +78,4 @@ },
     "@types/jest": "^29.5.8",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.isequal": "^4.5.8",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
@@ -78,0 +82,0 @@ "@typescript-eslint/parser": "^6.11.0",

src/helpers.ts

@@ -8,4 +8,5 @@ import { StaticText } from './tree/leafs';
   A11yTreeNodeState,
-  TextMatcher,
 } from './types/types';
+import _deepClone from 'lodash.clonedeep';
+import _isEqual from 'lodash.isequal';
 
@@ -31,2 +32,18 @@ export const containerAttributeValues: Omit<
 
+export const nonDefaultState: A11yTreeNodeState = {
+  busy: true,
+  checked: true,
+  current: true,
+  disabled: true,
+  expanded: true,
+  pressed: true,
+  selected: true,
+};
+
+export const getDefaultState = (): A11yTreeNodeState =>
+  _deepClone(defaultState);
+
+export const getNonDefaultState = (): A11yTreeNodeState =>
+  _deepClone(nonDefaultState);
+
 export const defaultQueries: A11yTreeNodeQueries = {
@@ -42,6 +59,20 @@ level: undefined,
 
+export const nonDefaultQueries: A11yTreeNodeQueries = {
+  level: 1,
+  value: {
+    min: 1,
+    max: 1,
+    now: 1,
+    text: 'text',
+  },
+};
+
+export const getDefaultQueries = (): A11yTreeNodeQueries =>
+  _deepClone(defaultQueries);
+
+export const getNonDefaultQueries = (): A11yTreeNodeQueries =>
+  _deepClone(nonDefaultQueries);
+
 export const isDefaultState = (state: A11yTreeNodeState): boolean => {
-  return Object.entries(state).every(
-    ([key, value]) => value === defaultState[key as keyof A11yTreeNodeState]
-  );
+  return _isEqual(state, defaultState);
 };
@@ -52,10 +83,3 @@
 ): boolean => {
-  // deep equal queries
-  return (
-    queries.level === defaultQueries.level &&
-    queries.value.min === defaultQueries.value.min &&
-    queries.value.max === defaultQueries.value.max &&
-    queries.value.now === defaultQueries.value.now &&
-    queries.value.text === defaultQueries.value.text
-  );
+  return _isEqual(queries, defaultQueries);
 };
@@ -72,3 +96,3 @@
 
-export const isContainer = (node: A11yTreeNode | A11yTreeForDiff): boolean => {
+export const isContainer = (node: A11yTreeNode): boolean => {
   return (
@@ -84,27 +108,1 @@ isDefaultAttributeValues(node) &&
 }
-
-export const getExpectedStringMatch = (
-  receivedValue: string | undefined,
-  expectedValue: TextMatcher | undefined,
-  element: HTMLElement | null
-): TextMatcher | undefined => {
-  if (receivedValue === undefined) {
-    return expectedValue;
-  }
-
-  if (expectedValue === undefined) {
-    return receivedValue;
-  }
-
-  if (expectedValue instanceof RegExp) {
-    return expectedValue.test(receivedValue) ? receivedValue : expectedValue;
-  }
-
-  if (typeof expectedValue === 'function') {
-    return expectedValue(receivedValue, element)
-      ? receivedValue
-      : expectedValue;
-  }
-
-  return expectedValue;
-};

src/index.ts

 export { MatcherOptions } from './types/matchers.d';
 import './matchers';
-export * from './test-helpers';
+export * from './helpers/by-role';
 export {
@@ -8,3 +8,3 @@ AsNonLandmarkRoles,
   ARIARoleDefinitionKeyExtended,
-  A11yTreeNodeState as A11yTreeState,
+  A11yTreeNodeState,
   A11yTreeNode,
@@ -14,2 +14,2 @@ A11yTreeNodeMatch,
 export { getAccessibilityTree } from './tree/accessibility-tree';
-export { pruneContainerNodes as flattenAccessibilityTree } from './tree/prune-container-nodes';
+export { pruneContainerNodes } from './tree/prune-container-nodes';

src/matchers.ts

@@ -6,3 +6,3 @@ import { A11yTreeNode, A11yTreeNodeMatch } from './types/types';
 import { matchToNode } from './prepare-diff';
-import { getPrettyTree } from './pretty-tree';
+import { getPrettyTree } from './pretty-tree/pretty-tree';
 import { MatcherOptions } from './types/matchers';
@@ -9,0 +9,0 @@ import { nodeTester } from './testers/node';

src/prepare-diff.ts

@@ -10,8 +10,5 @@ import {
 import { StaticText } from './tree/leafs';
-import {
-  defaultQueries,
-  defaultState,
-  getExpectedStringMatch,
-} from './helpers';
+import { getDefaultState, getDefaultQueries } from './helpers';
 import { isA11yTreeNode } from './type-guards';
+import _cloneDeep from 'lodash.clonedeep';
 
@@ -99,5 +96,3 @@ const getReceivedName = (
     if (state === undefined) {
-      state = {
-        ...defaultState,
-      };
+      state = getDefaultState();
     }
@@ -125,11 +120,7 @@
       ? undefined
-      : {
-          ...received.queries,
-        };
+      : _cloneDeep(received.queries);
 
   if (expected?.queries) {
     if (queries === undefined) {
-      queries = {
-        ...defaultQueries,
-      };
+      queries = getDefaultQueries();
     }
@@ -152,8 +143,5 @@
 
-      if (
-        isA11yTreeNode(received) &&
-        expected.queries.value.text !== undefined
-      ) {
-        queries.value.text = getExpectedStringMatch(
-          received?.queries.value.text,
+      if (expected.queries.value.text !== undefined) {
+        queries.value.text = computeTextValue(
+          isA11yTreeNode(received) ? received?.queries.value.text : undefined,
           expected.queries.value.text,
@@ -171,2 +159,3 @@ element
 // where expected tree has a value for a given key. Replaces text by StaticText nodes where possible
+// This is needed to not show the difference when the user doesn't care about a value
 export const matchToNode = (
@@ -246,24 +235,12 @@ received: A11yTreeNode | StaticText | undefined,
 
-  if (
-    role === undefined ||
-    name === undefined ||
-    description === undefined ||
-    state === undefined ||
-    queries === undefined
-  ) {
-    return undefined;
-  }
+  const result: A11yTreeForDiff | undefined = {
+    role,
+    name,
+    description,
+    state,
+    queries,
+    children,
+  };
 
-  const result: A11yTreeForDiff | undefined = expected
-    ? {
-        role,
-        name,
-        description,
-        state,
-        queries,
-        children,
-      }
-    : undefined;
-
   return result;
 };

src/types/types.ts

@@ -102,7 +102,7 @@ import { ARIARoleDefinitionKey } from 'aria-query';
 export type A11yTreeForDiff = {
-  name: TextMatcher;
-  role: HTMLElement['role'] | undefined;
-  description: TextMatcher;
-  state: A11yTreeNodeStateForDiff;
-  queries: A11yTreeNodeQueriesForDiff;
+  name?: TextMatcher;
+  role?: HTMLElement['role'] | undefined;
+  description?: TextMatcher;
+  state?: A11yTreeNodeStateForDiff;
+  queries?: A11yTreeNodeQueriesForDiff;
   children?: (
@@ -109,0 +109,0 @@ | A11yTreeForDiff

No alert changes

Improved metrics

Total package byte prevSize

319352

increased by15.68%

Number of package files

50

increased by35.14%

Lines of code

5517

increased by26.3%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

18

increased by12.5%

Dependency changes

• + Addedlodash.clonedeep@^4.5.0

• + Addedlodash.isequal@^4.5.0

• + Addedlodash.clonedeep@4.5.0(transitive)

• + Addedlodash.isequal@4.5.0(transitive)