Modernize Skeleton and Spinner tests

Author: jwalk088

src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {SkeletonBodyText} from '../SkeletonBodyText';
 
 describe('<SkeletonBodyText />', () => {
   it('renders the amount of lines provided', () => {
-    const skeletonBodyText = mountWithAppProvider(
-      <SkeletonBodyText lines={2} />,
-    );
-    expect(skeletonBodyText.find('div').first().children()).toHaveLength(2);
+    const skeletonBodyText = mountWithApp(<SkeletonBodyText lines={2} />);
+    expect(
+      skeletonBodyText.find('div', {className: 'SkeletonBodyTextContainer'}),
+    ).toContainReactComponentTimes('div', 2);
   });
 
   it('renders 3 lines if none are provided', () => {
-    const skeletonBodyText = mountWithAppProvider(<SkeletonBodyText />);
-    expect(skeletonBodyText.find('div').first().children()).toHaveLength(3);
+    const skeletonBodyText = mountWithApp(<SkeletonBodyText />);
+    expect(
+      skeletonBodyText.find('div', {className: 'SkeletonBodyTextContainer'}),
+    ).toContainReactComponentTimes('div', 3);
   });
 });

src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {SkeletonDisplayText} from '../SkeletonDisplayText';
 
 describe('<SkeletonDisplayText />', () => {
   it('renders', () => {
-    const skeletonBodyText = mountWithAppProvider(<SkeletonDisplayText />);
-    expect(skeletonBodyText.exists()).toBe(true);
+    const skeletonBodyText = mountWithApp(<SkeletonDisplayText />);
+    expect(skeletonBodyText).toContainReactComponent('div');
   });
 });

src/components/SkeletonPage/tests/SkeletonPage.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {
   Layout,
   Card,
@@ -13,68 +12,76 @@ import {SkeletonPage} from '../SkeletonPage';
 
 describe('<SkeletonPage />', () => {
   it('renders its children', () => {
-    const children = (
-      <Layout>
-        <Layout.Section>
-          <Card sectioned>
-            <SkeletonBodyText />
-          </Card>
-          <Card sectioned title="Variants">
-            <SkeletonBodyText />
-          </Card>
-        </Layout.Section>
-      </Layout>
-    );
+    const Children = () => {
+      return (
+        <Layout>
+          <Layout.Section>
+            <Card sectioned>
+              <SkeletonBodyText />
+            </Card>
+            <Card sectioned title="Variants">
+              <SkeletonBodyText />
+            </Card>
+          </Layout.Section>
+        </Layout>
+      );
+    };
 
-    const skeletonPage = mountWithAppProvider(
-      <SkeletonPage title="Products">{children}</SkeletonPage>,
+    const skeletonPage = mountWithApp(
+      <SkeletonPage title="Products">
+        <Children />
+      </SkeletonPage>,
     );
-    expect(skeletonPage.contains(children)).toBe(true);
+    expect(skeletonPage).toContainReactComponent(Children);
   });
 
   describe('title', () => {
     it('renders an h1 with the Title class when title is defined', () => {
-      const skeletonPage = mountWithAppProvider(
-        <SkeletonPage title="Products" />,
-      );
+      const skeletonPage = mountWithApp(<SkeletonPage title="Products" />);
 
-      expect(skeletonPage.find('h1.Title')).toHaveLength(1);
-      expect(skeletonPage.find(DisplayText)).toHaveLength(0);
+      expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'});
+      expect(skeletonPage).not.toContainReactComponent(DisplayText);
     });
 
     it('renders SkeletonTitle when a title not defined', () => {
-      const skeletonPage = mountWithAppProvider(<SkeletonPage />);
+      const skeletonPage = mountWithApp(<SkeletonPage />);
 
-      expect(skeletonPage.find('h1.Title')).toHaveLength(0);
-      expect(skeletonPage.find('.SkeletonTitle')).toHaveLength(1);
+      expect(skeletonPage).not.toContainReactComponent('h1', {
+        className: 'Title',
+      });
+      expect(skeletonPage).toContainReactComponent('div', {
+        className: 'SkeletonTitle',
+      });
     });
 
     it('renders SkeletonTitle when title is an empty string', () => {
-      const skeletonPage = mountWithAppProvider(<SkeletonPage title="" />);
+      const skeletonPage = mountWithApp(<SkeletonPage title="" />);
 
-      expect(skeletonPage.find('h1.Title')).toHaveLength(0);
-      expect(skeletonPage.find('.SkeletonTitle')).toHaveLength(1);
+      expect(skeletonPage).not.toContainReactComponent('h1', {
+        className: 'Title',
+      });
+      expect(skeletonPage).toContainReactComponent('div', {
+        className: 'SkeletonTitle',
+      });
     });
   });
 
   it('renders the provided number of secondary actions as SkeletonBodyText', () => {
-    const skeletonPage = mountWithAppProvider(
-      <SkeletonPage secondaryActions={3} />,
-    );
-    expect(skeletonPage.find(SkeletonBodyText)).toHaveLength(3);
+    const skeletonPage = mountWithApp(<SkeletonPage secondaryActions={3} />);
+    expect(skeletonPage).toContainReactComponentTimes(SkeletonBodyText, 3);
   });
 
   it('renders breadcrumbs', () => {
-    const skeletonPage = mountWithAppProvider(<SkeletonPage breadcrumbs />);
-    expect(skeletonPage.find(SkeletonBodyText)).toHaveLength(1);
+    const skeletonPage = mountWithApp(<SkeletonPage breadcrumbs />);
+    expect(skeletonPage).toContainReactComponent(SkeletonBodyText);
   });
 
   describe('primaryAction', () => {
     it('renders SkeletonDisplayText if true', () => {
-      const skeletonPage = mountWithAppProvider(
+      const skeletonPage = mountWithApp(
         <SkeletonPage title="Title" primaryAction />,
       );
-      expect(skeletonPage.find(SkeletonDisplayText)).toHaveLength(1);
+      expect(skeletonPage).toContainReactComponent(SkeletonDisplayText);
     });
   });
 });

src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {SkeletonThumbnail} from '../SkeletonThumbnail';
 
 describe('<SkeletonThumbnail />', () => {
   it('renders', () => {
-    const skeletonThumbnail = mountWithAppProvider(<SkeletonThumbnail />);
-    expect(skeletonThumbnail.exists()).toBe(true);
+    const skeletonThumbnail = mountWithApp(<SkeletonThumbnail />);
+    expect(skeletonThumbnail).toContainReactComponent('div');
   });
 });

src/components/Spinner/tests/Spinner.test.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {Spinner} from '../Spinner';
@@ -20,18 +18,24 @@ describe('<Spinner />', () => {
 
   describe('size', () => {
     it('renders a large spinner by default', () => {
-      const spinner = mountWithAppProvider(<Spinner />);
-      expect(spinner.find('span').first().hasClass('sizeLarge')).toBeTruthy();
+      const spinner = mountWithApp(<Spinner />);
+      expect(spinner).toContainReactComponent('span', {
+        className: 'Spinner sizeLarge',
+      });
     });
 
     it('renders a large spinner when size is large', () => {
-      const spinner = mountWithAppProvider(<Spinner size="large" />);
-      expect(spinner.find('span').first().hasClass('sizeLarge')).toBeTruthy();
+      const spinner = mountWithApp(<Spinner size="large" />);
+      expect(spinner).toContainReactComponent('span', {
+        className: 'Spinner sizeLarge',
+      });
     });
 
     it('renders a small spinner when size is small', () => {
-      const spinner = mountWithAppProvider(<Spinner size="small" />);
-      expect(spinner.find('span').first().hasClass('sizeSmall')).toBeTruthy();
+      const spinner = mountWithApp(<Spinner size="small" />);
+      expect(spinner).toContainReactComponent('span', {
+        className: 'Spinner sizeSmall',
+      });
     });
   });