From fab91fa93dbc6369c22f6ce1a53e1e8c6d2f6d0e Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Thu, 19 Sep 2024 02:38:24 -0300
Subject: [PATCH] Added tests to `Tag Skeleton`  (#17460)

* chore(release): v11.66.0 (#17413)

Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* test: added test to skeleton

* test: removed tests for tag

* test: removed function

* test: added test for size prop

* fix: changed const name

---------

Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
---
 packages/react/src/components/Tag/Tag-test.js | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 0424fd687a07..526a3d0fb3e9 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -8,10 +8,12 @@
 import { Add } from '@carbon/icons-react';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import Tag from './';
+import Tag, { TagSkeleton } from './';
 import DismissibleTag from './DismissibleTag';
 import { AILabel } from '../AILabel';
 
+const prefix = 'cds';
+
 describe('Tag', () => {
   describe('automated accessibility testing', () => {
     it('should have no Axe violations', async () => {
@@ -63,4 +65,22 @@ describe('Tag', () => {
       screen.getByRole('button', { name: 'AI - Show information' })
     ).toBeInTheDocument();
   });
+
+  describe('Skeleton Tag', () => {
+    it('should render a skeleton state', () => {
+      const { container } = render(<TagSkeleton />);
+
+      const skeletonTag = container.querySelector(`.${prefix}--tag`);
+
+      expect(skeletonTag).toHaveClass(`${prefix}--skeleton`);
+    });
+
+    it('should render a skeleton state with a small size', () => {
+      const { container } = render(<TagSkeleton size="sm" />);
+
+      const skeletonTag = container.querySelector(`.${prefix}--tag`);
+
+      expect(skeletonTag).toHaveClass(`${prefix}--layout--size-sm`);
+    });
+  });
 });