test(Loader): rewrite test using react-testing-library (#819)

[ci skip]

Author: sidram05

packages/main/src/components/Loader/Loader.test.tsx

@@ -1,38 +1,38 @@
+import { render } from '@shared/tests';
 import { createPassThroughPropsTest } from '@shared/tests/utils';
-import { mount } from 'enzyme';
 import { Loader } from '@ui5/webcomponents-react/lib/Loader';
 import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 import React from 'react';
 
 describe('Loader', () => {
   test('indeterminate', () => {
-    const wrapper = mount(<Loader type={LoaderType.Indeterminate} />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader type={LoaderType.Indeterminate} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('determinate', () => {
-    const wrapper = mount(<Loader type={LoaderType.Determinate} />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader type={LoaderType.Determinate} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('determinate with progress prop', () => {
-    const wrapper = mount(<Loader type={LoaderType.Determinate} progress="42%" />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader type={LoaderType.Determinate} progress="42%" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('default', () => {
-    const wrapper = mount(<Loader />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with Custom Class Name', () => {
-    const wrapper = mount(<Loader className="myTestClass" />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader className="myTestClass" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with delay', () => {
-    const wrapper = mount(<Loader delay={1000} />).render();
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Loader delay={1000} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   createPassThroughPropsTest(Loader);

packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap

@@ -1,58 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loader default 1`] = `
-<div
-  aria-busy="true"
-  class="Loader-loader-0 Loader-loaderIndeterminate-0"
-  data-component-name="Loader"
-  role="progressbar"
-  style="background-size: 40%;"
-  title="Please wait"
-/>
+<DocumentFragment>
+  <div
+    aria-busy="true"
+    class="Loader-loader Loader-loaderIndeterminate"
+    data-component-name="Loader"
+    role="progressbar"
+    style="background-size: 40%;"
+    title="Please wait"
+  />
+</DocumentFragment>
 `;
 
 exports[`Loader determinate 1`] = `
-<div
-  aria-busy="true"
-  class="Loader-loader-0 Loader-loaderDeterminate-0"
-  data-component-name="Loader"
-  role="progressbar"
-  style="background-size: 0px;"
-  title="Please wait"
-/>
+<DocumentFragment>
+  <div
+    aria-busy="true"
+    class="Loader-loader Loader-loaderDeterminate"
+    data-component-name="Loader"
+    role="progressbar"
+    style="background-size: 0px;"
+    title="Please wait"
+  />
+</DocumentFragment>
 `;
 
 exports[`Loader determinate with progress prop 1`] = `
-<div
-  aria-busy="true"
-  class="Loader-loader-0 Loader-loaderDeterminate-0"
-  data-component-name="Loader"
-  role="progressbar"
-  style="background-size: 42%;"
-  title="Please wait"
-/>
+<DocumentFragment>
+  <div
+    aria-busy="true"
+    class="Loader-loader Loader-loaderDeterminate"
+    data-component-name="Loader"
+    role="progressbar"
+    style="background-size: 42%;"
+    title="Please wait"
+  />
+</DocumentFragment>
 `;
 
 exports[`Loader indeterminate 1`] = `
-<div
-  aria-busy="true"
-  class="Loader-loader-0 Loader-loaderIndeterminate-0"
-  data-component-name="Loader"
-  role="progressbar"
-  style="background-size: 40%;"
-  title="Please wait"
-/>
+<DocumentFragment>
+  <div
+    aria-busy="true"
+    class="Loader-loader Loader-loaderIndeterminate"
+    data-component-name="Loader"
+    role="progressbar"
+    style="background-size: 40%;"
+    title="Please wait"
+  />
+</DocumentFragment>
 `;
 
 exports[`Loader with Custom Class Name 1`] = `
-<div
-  aria-busy="true"
-  class="Loader-loader-0 myTestClass Loader-loaderIndeterminate-0"
-  data-component-name="Loader"
-  role="progressbar"
-  style="background-size: 40%;"
-  title="Please wait"
-/>
+<DocumentFragment>
+  <div
+    aria-busy="true"
+    class="Loader-loader myTestClass Loader-loaderIndeterminate"
+    data-component-name="Loader"
+    role="progressbar"
+    style="background-size: 40%;"
+    title="Please wait"
+  />
+</DocumentFragment>
 `;
 
-exports[`Loader with delay 1`] = `null`;
+exports[`Loader with delay 1`] = `<DocumentFragment />`;