From f4f3dfe031937c743336176ad3f7598eb528a110 Mon Sep 17 00:00:00 2001
From: IRFAD KP <irfadkodapparambil@gmail.com>
Date: Sat, 26 Oct 2024 00:13:27 +0530
Subject: [PATCH] Fluid number input skeleton unit test (#17819)

* test: add unit test for FluidNumberInputSkeleton

* test: updated contributor list

* fix: rename FluidNumberInputSkeleton-test.js for correct file name

Signed-off-by: IRFAD K P <irfadkodapparambil@gmail.com>

* fix: corrected .all-contributorsrc

---------

Signed-off-by: IRFAD K P <irfadkodapparambil@gmail.com>
Co-authored-by: IRFAD K P <IRFAD.K.P@ibm.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
---
 .all-contributorsrc                           |  9 ++++
 README.md                                     |  3 +-
 .../FluidNumberInputSkeleton-test.js          | 43 +++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInputSkeleton-test.js

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 1fdc5a0bf7db..1ce696a1c242 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1653,6 +1653,15 @@
         "code"
       ]
     },
+    {
+      "login": "irfadkp",
+      "name": "IRFAD KP",
+      "avatar_url": "https://avatars.githubusercontent.com/u/54243898?v=4",
+      "profile": "https://irfadkp.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "ziyadzulfikar",
       "name": "ziyadzulfikar",
diff --git a/README.md b/README.md
index 122a92b21652..1a17c19745c6 100644
--- a/README.md
+++ b/README.md
@@ -309,10 +309,11 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/Neues"><img src="https://avatars.githubusercontent.com/u/9409245?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Noah Sgorbati</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/divya-281"><img src="https://avatars.githubusercontent.com/u/72991264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Divya G</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=divya-281" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/soumyaraju"><img src="https://avatars.githubusercontent.com/u/41182657?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Soumya Raju</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=soumyaraju" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ziyadzulfikar"><img src="https://avatars.githubusercontent.com/u/56788667?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ziyadzulfikar</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ziyadzulfikar" title="Code">💻</a></td>
     <td align="center"><a href="https://irfadkp.github.io/"><img src="https://avatars.githubusercontent.com/u/54243898?v=4?s=100" width="100px;" alt=""/><br /><sub><b>IRFAD KP</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=irfadkp" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ziyadzulfikar"><img src="https://avatars.githubusercontent.com/u/56788667?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ziyad Bin Sulfi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ziyadzulfikar" title="Code">💻</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://irfadkp.github.io/"><img src="https://avatars.githubusercontent.com/u/54243898?v=4?s=100" width="100px;" alt=""/><br /><sub><b>IRFAD KP</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=irfadkp" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/mariat189"><img src="https://avatars.githubusercontent.com/u/74430463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mariat</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mariat189" title="Code">💻</a></td>
   </tr>
 </table>
diff --git a/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInputSkeleton-test.js b/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInputSkeleton-test.js
new file mode 100644
index 000000000000..11cdcb166830
--- /dev/null
+++ b/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInputSkeleton-test.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+
+import FluidNumberInputSkeleton from '../FluidNumberInput.Skeleton';
+import React from 'react';
+
+describe('FluidNumberInputSkeleton', () => {
+  it('should render with the appropriate skeleton classes', () => {
+    const { container } = render(<FluidNumberInputSkeleton />);
+
+    const skeletonWrapper = container.firstChild;
+    expect(skeletonWrapper).toHaveClass(
+      'cds--form-item',
+      'cds--text-input--fluid__skeleton'
+    );
+
+    const labelSkeleton = container.querySelector('.cds--label.cds--skeleton');
+    expect(labelSkeleton).toBeInTheDocument();
+
+    const inputSkeleton = container.querySelector(
+      '.cds--skeleton.cds--text-input'
+    );
+    expect(inputSkeleton).toBeInTheDocument();
+  });
+
+  it('should apply custom className to the outermost element', () => {
+    const { container } = render(
+      <FluidNumberInputSkeleton className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread extra props onto the outermost element', () => {
+    render(<FluidNumberInputSkeleton data-testid="test-skeleton" />);
+    expect(screen.getByTestId('test-skeleton')).toBeInTheDocument();
+  });
+});