chore(Skeleton): update SkeletonPlaceholder, SkeletonText, SkeletonIc…

…on & IconSkeleton tests to RTL (#11632)

* chore: update Skeleton icon test

* chore: add IconSkeleton test

* chore: update SkeletonPlaceholder tests

* chore: update SkeletonText tests

packages/react/src/components/Icon/Icon.Skeleton-test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 React from 'react';
+import IconSkeleton from './Icon.Skeleton';
+
+describe('IconSkeleton', () => {
+  it('should pass in an extra className when one is given', () => {
+    render(<IconSkeleton className="custom-class" data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
+  });
+});

packages/react/src/components/SkeletonIcon/SkeletonIcon-test.js

@@ -7,14 +7,11 @@
 
 import React from 'react';
 import SkeletonIcon from '../SkeletonIcon';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import { render, screen } from '@testing-library/react';
 
 describe('SkeletonIcon', () => {
-  const wrapper = shallow(<SkeletonIcon />);
-
-  it('Has the expected classes', () => {
-    expect(wrapper.hasClass(`${prefix}--icon--skeleton`)).toEqual(true);
+  it('should pass in an extra className when one is given', () => {
+    render(<SkeletonIcon className="custom-class" data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
   });
 });

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-test.js

@@ -7,14 +7,13 @@
 
 import React from 'react';
 import SkeletonPlaceholder from '../SkeletonPlaceholder';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import { render, screen } from '@testing-library/react';
 
 describe('SkeletonPlaceholder', () => {
-  const wrapper = shallow(<SkeletonPlaceholder />);
-
-  it('Has the expected classes', () => {
-    expect(wrapper.hasClass(`${prefix}--skeleton__placeholder`)).toEqual(true);
+  it('should pass in an extra className when one is given', () => {
+    render(
+      <SkeletonPlaceholder className="custom-class" data-testid="skeleton" />
+    );
+    expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
   });
 });

packages/react/src/components/SkeletonText/SkeletonText-test.js

@@ -7,26 +7,22 @@
 
 import React from 'react';
 import SkeletonText from '../SkeletonText';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 const prefix = 'cds';
 
 describe('SkeletonText', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<SkeletonText />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--skeleton__text`)).toEqual(true);
-    });
+  it('should pass in an extra className when one is given', () => {
+    render(<SkeletonText className="custom-class" data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
   });
 });
 
 describe('SkeletonText Heading', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<SkeletonText heading />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--skeleton__heading`)).toEqual(true);
-    });
+  it('should add heading classNames when the heading prop is passed in', () => {
+    render(<SkeletonText heading data-testid="skeleton2" />);
+    expect(screen.getByTestId('skeleton2')).toHaveClass(
+      `${prefix}--skeleton__heading`
+    );
   });
 });