chore: Remove uuid and update unique id generation

Fixes: Workday#1311, Workday#1106, Workday#664, Workday#602
NicholasBoll · Jan 4, 2022 · c120a03 · c120a03
1 parent 478740c
commit c120a03
Show file tree

Hide file tree

Showing 27 changed files with 395 additions and 234 deletions.
diff --git a/.yarnrc b/.yarnrc
@@ -1,2 +1 @@
 workspaces-experimental true
---install.frozen-lockfile true
diff --git a/cypress/integration/Combobox.spec.ts b/cypress/integration/Combobox.spec.ts
@@ -37,7 +37,7 @@ describe('Combobox', () => {
     });
 
     it('should not show menu', () => {
-      cy.findByRole('listbox').should('not.be.visible');
+      cy.findByRole('listbox').should('not.exist');
     });
 
     it('should show the clear button', () => {
@@ -154,7 +154,7 @@ describe('Combobox', () => {
           });
 
           it('should close the listbox', () => {
-            cy.findByRole('listbox').should('not.be.visible');
+            cy.findByRole('listbox').should('not.exist');
           });
 
           context('when the use hits the "a" key', () => {
@@ -213,7 +213,7 @@ describe('Combobox', () => {
         });
 
         it('should close the listbox', () => {
-          cy.findByRole('listbox').should('not.be.visible');
+          cy.findByRole('listbox').should('not.exist');
         });
 
         it('should keep focus on combobox', () => {

diff --git a/cypress/integration/Modal.spec.ts b/cypress/integration/Modal.spec.ts
@@ -127,7 +127,7 @@ describe('Modal', () => {
           });
 
           it('should close the modal', () => {
-            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.be.visible');
+            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.exist');
           });
 
           it('should transfer focus back to the target button', () => {
@@ -143,7 +143,7 @@ describe('Modal', () => {
           });
 
           it('should close the modal', () => {
-            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.be.visible');
+            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.exist');
           });
         });
 
@@ -153,7 +153,7 @@ describe('Modal', () => {
           });
 
           it('should close the modal', () => {
-            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.be.visible');
+            cy.findByRole('dialog', {name: 'Delete Item'}).should('not.exist');
           });
         });
       });
@@ -189,11 +189,11 @@ describe('Modal', () => {
           });
 
           it(`should close the 'Cancel' tooltip`, () => {
-            cy.findByRole('tooltip', {name: 'Not so sure'}).should('not.be.visible');
+            cy.findByRole('tooltip', {name: 'Not so sure'}).should('not.exist');
           });
 
           it(`should close the modal`, () => {
-            cy.findByRole('dialog', {name: 'Open Modal'}).should('not.be.visible');
+            cy.findByRole('dialog', {name: 'Open Modal'}).should('not.exist');
           });
         });
       });
@@ -225,11 +225,11 @@ describe('Modal', () => {
             it(`should close the 'OK' tooltip`, () => {
               cy.findByRole('tooltip', {
                 name: 'Really, Really, Really, Really, Really sure',
-              }).should('not.be.visible');
+              }).should('not.exist');
             });
 
             it(`should close the 'Hidable Popup' popup`, () => {
-              cy.findByRole('dialog', {name: 'Hidable Popup'}).should('not.be.visible');
+              cy.findByRole('dialog', {name: 'Hidable Popup'}).should('not.exist');
             });
 
             it(`should keep the modal open`, () => {
@@ -268,13 +268,13 @@ describe('Modal', () => {
             });
 
             it(`should close the modal`, () => {
-              cy.findByRole('dialog', {name: 'Non-hidable'}).should('not.be.visible');
+              cy.findByRole('dialog', {name: 'Non-hidable'}).should('not.exist');
             });
 
             it(`should close the 'OK' tooltip`, () => {
               cy.findByRole('tooltip', {
                 name: 'Really, Really, Really, Really, Really sure',
-              }).should('not.be.visible');
+              }).should('not.exist');
             });
           });
         });
@@ -518,7 +518,7 @@ describe('Modal', () => {
         });
 
         it('should close the modal', () => {
-          cy.findByRole('dialog', {name: 'Delete Item'}).should('not.be.visible');
+          cy.findByRole('dialog', {name: 'Delete Item'}).should('not.exist');
         });
       });
 
@@ -528,7 +528,7 @@ describe('Modal', () => {
         });
 
         it('should close the modal', () => {
-          cy.findByRole('dialog', {name: 'Delete Item'}).should('not.be.visible');
+          cy.findByRole('dialog', {name: 'Delete Item'}).should('not.exist');
         });
       });
     });
@@ -633,7 +633,7 @@ describe('Modal', () => {
         });
 
         it('should hide the modal', () => {
-          cy.findByRole('dialog', {name: 'Modal'}).should('not.be.visible');
+          cy.findByRole('dialog', {name: 'Modal'}).should('not.exist');
         });
 
         it('should move focus back to the "Open" button', () => {

diff --git a/cypress/integration/Popup.spec.ts b/cypress/integration/Popup.spec.ts
@@ -43,7 +43,7 @@ describe('Popup', () => {
         });
 
         it('should hide the popup', () => {
-          cy.findByRole('dialog').should('not.visible');
+          cy.findByRole('dialog').should('not.exist');
         });
       });
 
@@ -55,7 +55,7 @@ describe('Popup', () => {
         });
 
         it('should hide the popup', () => {
-          cy.findByRole('dialog').should('not.visible');
+          cy.findByRole('dialog').should('not.exist');
         });
       });
 
@@ -65,7 +65,7 @@ describe('Popup', () => {
         });
 
         it('should close the popup', () => {
-          cy.findByRole('dialog').should('not.visible');
+          cy.findByRole('dialog').should('not.exist');
         });
       });
     });
@@ -315,11 +315,11 @@ describe('Popup', () => {
             it('should close the tooltip', () => {
               cy.findByRole('tooltip', {
                 name: 'Really long tooltip showing how popup stacks overlap 2',
-              }).should('not.be.visible');
+              }).should('not.exist');
             });
 
             it('should close the "Really Delete Item" popup', () => {
-              cy.findByRole('dialog', {name: 'Really Delete Item'}).should('be.not.visible');
+              cy.findByRole('dialog', {name: 'Really Delete Item'}).should('not.exist');
             });
 
             it('should NOT close the "Delete Item" popup', () => {
@@ -351,7 +351,7 @@ describe('Popup', () => {
         });
 
         it('should hide the popup', () => {
-          cy.findByRole('dialog', {name: 'Popup'}).should('not.be.visible');
+          cy.findByRole('dialog', {name: 'Popup'}).should('not.exist');
         });
 
         it('should move focus back to the "Open" button', () => {

diff --git a/cypress/integration/SelectPreview.spec.ts b/cypress/integration/SelectPreview.spec.ts
@@ -130,7 +130,7 @@ describe('Select', () => {
             it('should not be visible', () => {
               cy.findByLabelText('Label')
                 .pipe(h.selectPreview.getMenu)
-                .should('not.be.visible');
+                .should('not.exist');
             });
           });
 
@@ -242,7 +242,7 @@ describe('Select', () => {
                   it('should not be visible', () => {
                     cy.findByLabelText('Label')
                       .pipe(h.selectPreview.getMenu)
-                      .should('not.be.visible');
+                      .should('not.exist');
                   });
                 });
 
@@ -664,7 +664,7 @@ describe('Select', () => {
       //     it('should not be visible', () => {
       //       cy.findByLabelText('Label')
       //         .pipe(h.selectPreview.getMenu)
-      //         .should('not.be.visible');
+      //         .should('not.exist');
       //     });
       //   });
       // });

diff --git a/cypress/integration/Tabs.spec.ts b/cypress/integration/Tabs.spec.ts
@@ -5,13 +5,13 @@ describe('Tabs', () => {
     h.stories.visit();
   });
 
-  ['Basic', 'Named Tabs'].forEach(story => {
+  ['Basic'].forEach(story => {
     context(`given the [Components/Containers/Tabs/React, ${story}] story is rendered`, () => {
       beforeEach(() => {
         h.stories.load('Components/Containers/Tabs/React', story);
       });
 
-      it('should pass axe checks', () => {
+      it.only('should pass axe checks', () => {
         cy.checkA11y();
       });
 

diff --git a/cypress/integration/Tooltip.spec.ts b/cypress/integration/Tooltip.spec.ts
@@ -52,7 +52,7 @@ describe('Tooltip', () => {
         });
 
         it('should close the tooltip', () => {
-          cy.findByRole('tooltip').should('not.be.visible');
+          cy.findByRole('tooltip').should('not.exist');
         });
       });
 
@@ -62,7 +62,7 @@ describe('Tooltip', () => {
         });
 
         it('should not close the tooltip', () => {
-          cy.findByRole('tooltip').should('not.be.visible');
+          cy.findByRole('tooltip').should('not.exist');
         });
       });
     });
@@ -82,7 +82,7 @@ describe('Tooltip', () => {
         });
 
         it('should close the tooltip', () => {
-          cy.findByRole('tooltip').should('not.be.visible');
+          cy.findByRole('tooltip').should('not.exist');
         });
       });
 
@@ -104,7 +104,7 @@ describe('Tooltip', () => {
         });
 
         it('should close immediately, not waiting for blur or intent', () => {
-          cy.findByRole('tooltip', {timeout: 0}).should('not.be.visible');
+          cy.findByRole('tooltip', {timeout: 0}).should('not.exist');
         });
       });
     });
@@ -155,14 +155,14 @@ describe('Tooltip', () => {
     });
 
     it('the span element should not have an aria-describedby attribute', () => {
-      cy.get('button').should('not.have.attr', 'aria-describedby');
+      cy.get('span').should('not.have.attr', 'aria-describedby');
     });
 
     it('the span element should not have an aria-label attribute', () => {
-      cy.get('button').should('not.have.attr', 'aria-describedby');
+      cy.get('span').should('not.have.attr', 'aria-describedby');
     });
 
-    context('when the "Delete" button is hovered', () => {
+    context('when the "Some Text" text is hovered', () => {
       beforeEach(() => {
         cy.get('span').trigger('mouseover');
       });
@@ -176,11 +176,11 @@ describe('Tooltip', () => {
       });
 
       it('the span element should not have an aria-describedby attribute', () => {
-        cy.get('button').should('not.have.attr', 'aria-describedby');
+        cy.get('span').should('not.have.attr', 'aria-describedby');
       });
 
       it('the span element should not have an aria-label attribute', () => {
-        cy.get('button').should('not.have.attr', 'aria-describedby');
+        cy.get('span').should('not.have.attr', 'aria-describedby');
       });
     });
   });
@@ -204,7 +204,7 @@ describe('Tooltip', () => {
       });
 
       it('should not show the tooltip', () => {
-        cy.findByRole('tooltip').should('not.be.visible');
+        cy.findByRole('tooltip').should('not.exist');
       });
     });
 
@@ -244,7 +244,7 @@ describe('Tooltip', () => {
       });
 
       it('should not show the tooltip', () => {
-        cy.findByRole('tooltip').should('not.be.visible');
+        cy.findByRole('tooltip').should('not.exist');
       });
     });
 

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -25,7 +25,7 @@ Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => {
     url = options.url;
   }
 
-  return originalFn(url, {
+  return (originalFn as any)(url, {
     ...options,
     onBeforeLoad(win: Window) {
       options.onBeforeLoad?.(win);
@@ -121,8 +121,8 @@ function isKeyOf<T>(obj: T, key: any): key is keyof T {
 
 Cypress.Commands.overwrite('should', (originalFn, subject, expectation, ...args) => {
   const customMatchers = {
-    'have.ariaDescription': haveAriaDescription(args[0]),
-    'have.ariaLabel': haveAriaLabel(args[0]),
+    'have.ariaDescription': haveAriaDescription(args[0] as any),
+    'have.ariaLabel': haveAriaLabel(args[0] as any),
   };
   // See if the expectation is a string and if it is a member of Jest's expect
   if (isKeyOf(customMatchers, expectation)) {

diff --git a/cypress/support/index.ts b/cypress/support/index.ts
@@ -6,3 +6,11 @@ import 'cypress-keyboard-plugin';
 import '@testing-library/cypress/add-commands';
 
 import './commands';
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
+Cypress.on('uncaught:exception', err => {
+  /* returning false here prevents Cypress from failing the test */
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    return false;
+  }
+});
diff --git a/modules/labs-react/combobox/lib/AutocompleteList.tsx b/modules/labs-react/combobox/lib/AutocompleteList.tsx
@@ -1,10 +1,9 @@
 import React, {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import {space} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {accessibleHide, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} from './Combobox';
-import uuid from 'uuid/v4';
 
 const Autocomplete = styled('ul')({
   margin: 0,
@@ -55,7 +54,7 @@ const AutocompleteList = ({
   labelId,
   showGroupText,
 }: AutocompleteListProps) => {
-  const [randomComponentId] = useState(() => uuid()); // https://codesandbox.io/s/p2ndq
+  const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
 
   const componentId = comboboxId || randomComponentId;
 

diff --git a/modules/labs-react/combobox/lib/Combobox.tsx b/modules/labs-react/combobox/lib/Combobox.tsx
@@ -1,13 +1,18 @@
 import React, {useEffect, useLayoutEffect, useRef, useState, useCallback} from 'react';
 import {CSSObject, jsx, keyframes} from '@emotion/core';
-import {GrowthBehavior, useForkRef, styled, useIsRTL} from '@workday/canvas-kit-react/common';
+import {
+  GrowthBehavior,
+  useForkRef,
+  styled,
+  useIsRTL,
+  generateUniqueId,
+} from '@workday/canvas-kit-react/common';
 import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {Card} from '@workday/canvas-kit-react/card';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {TextInputProps} from '@workday/canvas-kit-react/text-input';
-import uuid from 'uuid/v4';
 import flatten from 'lodash.flatten';
 import AutocompleteList from './AutocompleteList';
 import Status from './Status';
@@ -200,8 +205,8 @@ const Combobox = ({
 
   const comboboxRef: React.RefObject<HTMLDivElement> = useRef(null);
 
-  const [randomComponentId] = React.useState(() => uuid()); // https://codesandbox.io/s/p2ndq
-  const [randomLabelId] = React.useState(() => uuid());
+  const [randomComponentId] = React.useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
+  const [randomLabelId] = React.useState(generateUniqueId);
 
   const componentId = id || randomComponentId;
   const formLabelId = labelId || randomLabelId;