test(AILabel): add additional tests around aiTextLabel

carbon-design-system · Jun 18, 2024 · 9531f4b · 9531f4b
1 parent 841bda7
commit 9531f4b
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 8 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2,6 +2,152 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Map {
+  "AILabel" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "AILabelContent": Object {
+        "type": "node",
+      },
+      "aiText": Object {
+        "type": "string",
+      },
+      "aiTextLabel": Object {
+        "type": "string",
+      },
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-start",
+            "top-right",
+            "top-end",
+            "bottom",
+            "bottom-left",
+            "bottom-start",
+            "bottom-right",
+            "bottom-end",
+            "left",
+            "left-bottom",
+            "left-end",
+            "left-top",
+            "left-start",
+            "right",
+            "right-bottom",
+            "right-end",
+            "right-top",
+            "right-start",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "autoAlign": Object {
+        "type": "bool",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "default",
+            "inline",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "onRevertClick": Object {
+        "type": "func",
+      },
+      "revertActive": Object {
+        "type": "bool",
+      },
+      "revertLabel": Object {
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "mini",
+            "2xs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "slugLabel": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelActions" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelContent" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AISkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "AISkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "AISkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "Accordion" => Object {
     "propTypes": Object {
       "align": Object {
@@ -10625,6 +10771,9 @@ Map {
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "AILabelContent": Object {
+        "type": "node",
+      },
       "aiText": Object {
         "type": "string",
       },
@@ -10699,9 +10848,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugContent": Object {
-        "type": "node",
-      },
       "slugLabel": Object {
         "type": "string",
       },

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -15,6 +15,12 @@ describe('Carbon Components React', () => {
   it('should export components', () => {
     expect(Object.keys(Carbon).sort()).toMatchInlineSnapshot(`
       Array [
+        "AILabel",
+        "AILabelActions",
+        "AILabelContent",
+        "AISkeletonIcon",
+        "AISkeletonPlaceholder",
+        "AISkeletonText",
         "Accordion",
         "AccordionItem",
         "AccordionSkeleton",

diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -40,10 +40,23 @@ describe('AILabel', () => {
       expect(screen.getByText('IA')).toBeInTheDocument();
     });
 
-    it('should respect aiTextLabel prop', () => {
-      render(<AILabel aiTextLabel="Test text" />);
+    it('should respect aiTextLabel prop when kind is inline', () => {
+      const wrapper = render(<AILabel kind="inline" aiTextLabel="Test text" />);
 
-      expect(screen.getByText('Test text')).toBeInTheDocument();
+      const additionalTextSpan = wrapper.container.querySelector(
+        `.${prefix}--slug__additional-text`
+      );
+      expect(additionalTextSpan).toBeInTheDocument();
+      expect(additionalTextSpan).toHaveTextContent('Test text');
+    });
+
+    it('should not populate aiTextLabel prop when kind is not inline', () => {
+      const wrapper = render(<AILabel aiTextLabel="Test text" />);
+
+      const additionalTextSpan = wrapper.container.querySelector(
+        `.${prefix}--slug__additional-text`
+      );
+      expect(additionalTextSpan).not.toBeInTheDocument();
     });
 
     it('should respect align prop when autoAlign is false', () => {

diff --git a/packages/react/src/components/AILabel/index.js b/packages/react/src/components/AILabel/index.js
@@ -144,9 +144,9 @@ export const AILabel = React.forwardRef(function AILabel(
         <Toggletip align={align} autoAlign={autoAlign} {...rest}>
           <ToggletipButton className={aiLabelButtonClasses} label={ariaLabel}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
-            {aiTextLabel && (
+            {kind === 'inline' && aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
-                {kind === 'inline' && aiTextLabel}
+                {aiTextLabel}
               </span>
             )}
           </ToggletipButton>