test(Text): rewrite test using react-testing-library (#817)

[ci skip]

Author: sidram05

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

@@ -1,33 +1,35 @@
+import { render } from '@shared/tests';
 import { createPassThroughPropsTest } from '@shared/tests/utils';
-import { mount } from 'enzyme';
 import { Text } from '@ui5/webcomponents-react/lib/Text';
 import React from 'react';
 
 describe('Text', () => {
   test('Render Basic Text', () => {
-    const wrapper = mount(<Text>FioriText</Text>);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Text>FioriText</Text>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('No Wrap', () => {
-    const wrapper = mount(<Text wrapping={false}>Lorem Ipsum dolor sit amed</Text>);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Text wrapping={false}>Lorem Ipsum dolor sit amed</Text>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Render Whitespace', () => {
-    const wrapper = mount(<Text renderWhitespace>Lorem Ipsum dolor sit amed</Text>);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Text renderWhitespace>Lorem Ipsum dolor sit amed</Text>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders correct Text', () => {
     const el = 'My Text';
-    const wrapper = mount(<Text>{el}</Text>);
-    expect(wrapper.text()).toEqual(el);
+    const { container } = render(<Text>{el}</Text>);
+    expect(container).toHaveTextContent(el);
   });
 
   test('custom width', () => {
-    const wrapper = mount(<Text style={{ width: '300px' }}>Test</Text>);
-    expect(window.getComputedStyle(wrapper.getDOMNode()).width).toEqual('300px');
+    const { getByText } = render(<Text style={{ width: '300px' }}>Test</Text>);
+    expect(getByText('Test')).toHaveStyle({
+      width: '300px'
+    });
   });
 
   createPassThroughPropsTest(Text);

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

@@ -1,25 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Text No Wrap 1`] = `
-<span
-  class="Text-text-0 Text-noWrap-0"
->
-  Lorem Ipsum dolor sit amed
-</span>
+<DocumentFragment>
+  <span
+    class="Text-text Text-noWrap"
+  >
+    Lorem Ipsum dolor sit amed
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Text Render Basic Text 1`] = `
-<span
-  class="Text-text-0"
->
-  FioriText
-</span>
+<DocumentFragment>
+  <span
+    class="Text-text"
+  >
+    FioriText
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Text Render Whitespace 1`] = `
-<span
-  class="Text-text-0 Text-renderWhitespace-0"
->
-  Lorem Ipsum dolor sit amed
-</span>
+<DocumentFragment>
+  <span
+    class="Text-text Text-renderWhitespace"
+  >
+    Lorem Ipsum dolor sit amed
+  </span>
+</DocumentFragment>
 `;