Update type check to check for string or number, update test-utils

Author: ernst-dev

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -657,7 +657,9 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_1epxo",
   ],
   "token-group": [
+    "awsui_dismiss-button_dm8gx",
     "awsui_root_dm8gx",
+    "awsui_token_dm8gx",
   ],
   "top-navigation": [
     "awsui_hidden_k5dlb",

src/test-utils/dom/token-group/index.ts

@@ -11,7 +11,9 @@ export default class TokenGroupWrapper extends ComponentWrapper {
   static rootSelector: string = selectors.root;
 
   findTokens(): Array<TokenGroupItemWrapper> {
-    return this.findAllByClassName(TokenGroupItemWrapper.rootSelector).map(
+    const legacyTokens = this.findAllByClassName(TokenGroupItemWrapper.legacyRootSelector);
+    const newTokens = this.findAllByClassName(TokenGroupItemWrapper.newRootSelector);
+    return (Array(legacyTokens).length > 0 ? legacyTokens : newTokens).map(
       tokenElement => new TokenGroupItemWrapper(tokenElement.getElement())
     );
   }
@@ -22,9 +24,15 @@ export default class TokenGroupWrapper extends ComponentWrapper {
    * @param tokenIndex 1-based index of the token to return.
    */
   findToken(tokenIndex: number): TokenGroupItemWrapper | null {
-    return this.findComponent(
-      `.${tokenListSelectors['list-item']}:nth-child(${tokenIndex}) > .${TokenGroupItemWrapper.rootSelector}`,
-      TokenGroupItemWrapper
+    return (
+      this.findComponent(
+        `.${tokenListSelectors['list-item']}:nth-child(${tokenIndex}) > .${TokenGroupItemWrapper.legacyRootSelector}`,
+        TokenGroupItemWrapper
+      ) ??
+      this.findComponent(
+        `.${tokenListSelectors['list-item']}:nth-child(${tokenIndex}) > .${TokenGroupItemWrapper.newRootSelector}`,
+        TokenGroupItemWrapper
+      )
     );
   }
 

src/test-utils/dom/token-group/token.ts

@@ -4,10 +4,12 @@ import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-
 
 import OptionWrapper from '../internal/option';
 
-import selectors from '../../../token/test-classes/styles.selectors.js';
+import newSelectors from '../../../token/test-classes/styles.selectors.js';
+import legacySelectors from '../../../token-group/styles.selectors.js';
 
 export class TokenGroupItemWrapper extends ComponentWrapper {
-  static rootSelector: string = selectors.root;
+  static newRootSelector: string = newSelectors.root;
+  static legacyRootSelector: string = legacySelectors.token;
 
   findOption(): OptionWrapper {
     return this.findComponent(`.${OptionWrapper.rootSelector}`, OptionWrapper)!;
@@ -18,6 +20,9 @@ export class TokenGroupItemWrapper extends ComponentWrapper {
   }
 
   findDismiss(): ElementWrapper {
-    return this.findByClassName(selectors['dismiss-button'])!;
+    const newSelector = newSelectors['dismiss-button'];
+    const oldSelector = legacySelectors['dismiss-button'];
+
+    return this.findAny(oldSelector, newSelector)!;
   }
 }

src/token-group/styles.scss

@@ -6,6 +6,11 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
+.dismiss-button,
+.token {
+  /* used in test-utils */
+}
+
 .root {
   @include styles.styles-reset;
 

src/token/internal.tsx

@@ -18,19 +18,6 @@ import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 
-/**
- * Checks if a value is a React element without using the legacy React.isValidElement API.
- * This approach checks for the internal structure of React elements.
- */
-function isReactElement(value: unknown): value is React.ReactElement {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    typeof (value as any).type !== 'undefined' &&
-    typeof (value as any).props !== 'undefined'
-  );
-}
-
 type InternalTokenProps = TokenProps &
   InternalBaseComponentProps & {
     role?: string;
@@ -84,11 +71,11 @@ function InternalToken({
   });
 
   const buildOptionDefinition = () => {
-    const isLabelAnElement = isReactElement(label);
-    const labelObject = !isLabelAnElement ? { label: String(label) } : { labelContent: label };
+    const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';
+    const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };
 
     if (isInline) {
-      if (isLabelAnElement) {
+      if (!isLabelStringOrNumber) {
         warnOnce('Label', `Only plain text (strings or numbers) are supported when variant="inline".`);
       }