fix(react): fix jsdom react testing issues

Fixes #5985 - Add isNode check to property syncing in cdscontrol. Fixes #6525: - Initialize role properties in connectedCallback. - Remove isNode check for aria-reflect. Fixes Signed-off-by: Ashley Ryan <[email protected]>
vmware-archive · Jan 31, 2022 · d9537b6 · d9537b6
1 parent e560047
commit d9537b6
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 18 deletions.
diff --git a/packages/core/src/breadcrumb/breadcrumb.element.ts b/packages/core/src/breadcrumb/breadcrumb.element.ts
@@ -27,7 +27,10 @@ export class CdsBreadcrumb extends LitElement {
 
   @querySlot('[slot="cds-separator"]') private customSeparator: HTMLElement;
 
-  role = 'navigation';
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = 'navigation';
+  }
 
   render() {
     return html`

diff --git a/packages/core/src/card/card.element.ts b/packages/core/src/card/card.element.ts
@@ -49,8 +49,6 @@ import styles from './card.element.scss';
  * @cssprop --cds-card-remove-margin
  */
 export class CdsCard extends CdsInternalPanel {
-  role = 'region';
-
   @globalStyle() globalStyles = css`
     [cds-card-remove-margin] {
       margin-left: calc(-1 * var(--card-remove-margin));
@@ -61,4 +59,9 @@ export class CdsCard extends CdsInternalPanel {
   static get styles() {
     return [...super.styles, styles];
   }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = 'region';
+  }
 }
diff --git a/packages/core/src/internal/utils/events.ts b/packages/core/src/internal/utils/events.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -9,6 +9,10 @@ export function stopEvent(event: Event) {
   event.stopPropagation();
 }
 
+function isNode() {
+  return (globalThis as any)?.process?.env?.JEST_WORKER_ID !== undefined; // Jest and JSDom breaks defining a new property
+}
+
 export const getElementUpdates = (
   element: HTMLElement,
   propertyKey: string,
@@ -29,7 +33,7 @@ export const getElementUpdates = (
 
   const updatedProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), propertyKey) as any;
 
-  if (updatedProp) {
+  if (updatedProp && !isNode()) {
     Object.defineProperty(element, propertyKey, {
       get: updatedProp.get,
       set: val => {

diff --git a/packages/core/src/navigation/navigation-item.element.ts b/packages/core/src/navigation/navigation-item.element.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -71,10 +71,9 @@ export class CdsNavigationItem extends LitElement implements FocusableItem {
   @querySlotAll('[cds-navigation-sr-text]')
   itemText: NodeListOf<HTMLSpanElement>;
 
-  role = 'listitem';
-
   connectedCallback() {
     super.connectedCallback();
+    this.role = 'listitem';
     if (!this.id) {
       this.id = createId();
     }

diff --git a/packages/core/src/navigation/navigation.element.ts b/packages/core/src/navigation/navigation.element.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -173,8 +173,6 @@ export class CdsNavigation extends LitElement {
   @querySlotAll('cds-navigation-group')
   protected navigationGroupRefs: NodeListOf<CdsNavigationGroup>;
 
-  role = 'list';
-
   private toggle() {
     this.expandedChange.emit(!this.expanded);
   }
@@ -364,6 +362,7 @@ export class CdsNavigation extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.role = 'list';
     this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));
     this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));
     this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));

diff --git a/packages/core/src/polyfills/aria-reflect.ts b/packages/core/src/polyfills/aria-reflect.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -59,19 +59,15 @@ declare global {
 let roleRegistered = false;
 let ariaRegistered = false;
 
-function isNode() {
-  return (globalThis as any)?.process?.env?.JEST_WORKER_ID !== undefined; // Jest and JSDom breaks on property reflection
-}
-
 // eslint-disable-next-line
-if (!roleRegistered && !Element.prototype.hasOwnProperty('role') && !isNode()) {
+if (!roleRegistered && !Element.prototype.hasOwnProperty('role')) {
   reflect(Element.prototype, 'role', 'role');
   roleRegistered = true;
 }
 
 // https://www.w3.org/TR/wai-aria-1.0/states_and_properties
 // eslint-disable-next-line
-if (!ariaRegistered && !Element.prototype.hasOwnProperty('ariaLabel') && !isNode()) {
+if (!ariaRegistered && !Element.prototype.hasOwnProperty('ariaLabel')) {
   ariaRegistered = true;
   [
     'ActiveDescendant',