test: test className and style on every component (#530)

[ci skip]

Author: MarcusNotheis

package.json

@@ -52,7 +52,7 @@
     "@storybook/storybook-deployer": "^2.8.5",
     "@testing-library/react": "^10.0.4",
     "@types/enzyme": "^3.10.5",
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^25.2.3",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/sinon": "^9.0.0",

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

@@ -1,49 +1,65 @@
 import { createPassThroughPropsTest } from '@shared/tests/utils';
-import { mount } from 'enzyme';
+import { render, screen, cleanup } from '@testing-library/react';
 import { Bar } from '@ui5/webcomponents-react/lib/Bar';
+import { BarDesign } from '@ui5/webcomponents-react/lib/BarDesign';
 import React from 'react';
 
-const createRenderLabel = (text) => () => {
-  return <p>{text}</p>;
-};
+const text1 = 'Content Left';
+const text2 = 'Content Middle';
+const text3 = 'Content Right';
 
 describe('Bar', () => {
+  afterEach(cleanup);
+
   test('Renders with default Props', () => {
-    expect(mount(<Bar />).render()).toMatchSnapshot();
+    expect(render(<Bar />).asFragment()).toMatchSnapshot();
   });
 
   test('Render all content', () => {
-    const wrapper = mount(
-      <Bar
-        contentLeft={<div>Content Left</div>}
-        contentMiddle={<div>Content Middle</div>}
-        contentRight={<div>Content Right</div>}
-      />
+    const utils = render(
+      <Bar contentLeft={<div>{text1}</div>} contentMiddle={<div>{text2}</div>} contentRight={<div>{text3}</div>} />
     );
-    expect(wrapper.render()).toMatchSnapshot();
+
+    expect(screen.getByText(text1).textContent).toEqual(text1);
+    expect(screen.getByText(text2).textContent).toEqual(text2);
+    expect(screen.getByText(text3).textContent).toEqual(text3);
+
+    expect(utils.asFragment()).toMatchSnapshot();
   });
 
-  test('Render all content', () => {
-    const text1 = 'Content Left';
-    const text2 = 'Content Middle';
-    const text3 = 'Content Right';
+  test('Test classes for all modes', () => {
+    const { rerender } = render(
+      <Bar
+        design={BarDesign.Footer}
+        contentLeft={<div>{text1}</div>}
+        contentMiddle={<div>{text2}</div>}
+        contentRight={<div>{text3}</div>}
+        data-testid={'bar'}
+      />
+    );
+    expect(screen.getByTestId('bar').className).toMatch(/footer/);
 
-    const wrapper = mount(
-      <Bar contentLeft={<div>{text1}</div>} contentMiddle={<div>{text2}</div>} contentRight={<div>{text3}</div>} />
+    rerender(
+      <Bar
+        design={BarDesign.SubHeader}
+        contentLeft={<div>{text1}</div>}
+        contentMiddle={<div>{text2}</div>}
+        contentRight={<div>{text3}</div>}
+        data-testid={'bar'}
+      />
     );
-    expect(wrapper.text()).toContain(text1);
-    expect(wrapper.text()).toContain(text2);
-    expect(wrapper.text()).toContain(text3);
-  });
 
-  test('Has Fiori 3 padding', () => {
-    const wrapper = mount(
-      <Bar renderContentLeft={createRenderLabel('Test')} renderContentRight={createRenderLabel('Right')} />
-    )
-      .find('div')
-      .at(1);
-    const node = wrapper.getDOMNode();
-    expect(window.getComputedStyle(node).paddingLeft).toEqual('0.5rem');
+    expect(screen.getByTestId('bar').className).toMatch(/subHeader/);
+    rerender(
+      <Bar
+        design={BarDesign.FloatingFooter}
+        contentLeft={<div>{text1}</div>}
+        contentMiddle={<div>{text2}</div>}
+        contentRight={<div>{text3}</div>}
+        data-testid={'bar'}
+      />
+    );
+    expect(screen.getByTestId('bar').className).toMatch(/floatingFooter/);
   });
 
   createPassThroughPropsTest(Bar);

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

@@ -1,61 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Bar Render all content 1`] = `
-<div
-  class="Bar-bar-0 Bar-auto-0"
-  data-bar-part="Root"
->
+<DocumentFragment>
   <div
-    class="Bar-left-0"
-    data-bar-part="Left"
-  >
-    <div>
-      Content Left
-    </div>
-  </div>
-  <div
-    class="Bar-center-0"
-    data-bar-part="Center"
+    class="Bar-bar-0-2-1 Bar-auto-0-2-6"
+    data-bar-part="Root"
   >
     <div
-      class="Bar-inner-0"
+      class="Bar-left-0-2-2"
+      data-bar-part="Left"
     >
       <div>
-        Content Middle
+        Content Left
       </div>
     </div>
-  </div>
-  <div
-    class="Bar-right-0"
-    data-bar-part="Right"
-  >
-    <div>
-      Content Right
+    <div
+      class="Bar-center-0-2-3"
+      data-bar-part="Center"
+    >
+      <div
+        class="Bar-inner-0-2-4"
+      >
+        <div>
+          Content Middle
+        </div>
+      </div>
+    </div>
+    <div
+      class="Bar-right-0-2-5"
+      data-bar-part="Right"
+    >
+      <div>
+        Content Right
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Bar Renders with default Props 1`] = `
-<div
-  class="Bar-bar-0 Bar-auto-0"
-  data-bar-part="Root"
->
-  <div
-    class="Bar-left-0"
-    data-bar-part="Left"
-  />
+<DocumentFragment>
   <div
-    class="Bar-center-0"
-    data-bar-part="Center"
+    class="Bar-bar-0-2-1 Bar-auto-0-2-6"
+    data-bar-part="Root"
   >
     <div
-      class="Bar-inner-0"
+      class="Bar-left-0-2-2"
+      data-bar-part="Left"
+    />
+    <div
+      class="Bar-center-0-2-3"
+      data-bar-part="Center"
+    >
+      <div
+        class="Bar-inner-0-2-4"
+      />
+    </div>
+    <div
+      class="Bar-right-0-2-5"
+      data-bar-part="Right"
     />
   </div>
-  <div
-    class="Bar-right-0"
-    data-bar-part="Right"
-  />
-</div>
+</DocumentFragment>
 `;

packages/main/src/components/FilterBar/index.tsx

@@ -21,7 +21,7 @@ const useStyles = createComponentStyles(styles, { name: 'FilterBar' });
  * <code>import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';</code>
  */
 const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes, ref: RefObject<HTMLDivElement>) => {
-  const { children, search, variants } = props as FilterBarInternalProps;
+  const { children, search, variants, className, style, tooltip, slot } = props as FilterBarInternalProps;
   const [showFilters, setShowFilters] = useState(true);
 
   const classes = useStyles();
@@ -39,8 +39,20 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
 
   const passThroughProps = usePassThroughHtmlProps(props);
 
+  const filterBarClasses = StyleClassHelper.of(classes.outerContainer);
+  if (className) {
+    filterBarClasses.put(className);
+  }
+
   return (
-    <div ref={ref} className={classes.outerContainer} {...passThroughProps}>
+    <div
+      ref={ref}
+      className={filterBarClasses.valueOf()}
+      style={style}
+      title={tooltip}
+      slot={slot}
+      {...passThroughProps}
+    >
       <div className={classes.filterBarHeader}>
         {variants}
         {search && <div className={classes.vLine}> {search} </div>}

shared/tests/utils.tsx

@@ -1,5 +1,5 @@
-import { mount } from 'enzyme';
 import React, { ComponentType } from 'react';
+import { render, screen } from '@testing-library/react';
 
 export const modifyObjectProperty = (object: any, attr: string, value: any) => {
   Object.defineProperty(object, attr, {
@@ -20,23 +20,30 @@ export const setUserAgentString = (userAgent) => {
 
 export const createPassThroughPropsTest = (Component: ComponentType<any>, props = {}) => {
   test('Pass Through HTML Standard Props', () => {
-    const wrapper = mount(
+    render(
       <Component
+        data-testid={'component-to-be-tested'}
         data-special-test-prop="data-prop"
         aria-labelledby="aria-prop"
         id="element-id"
         disabled-custom-prop
+        className="thisClassIsUsedForTestingPurposesOnly"
+        style={{ pointerEvents: 'none' }}
         {...props}
       />
     );
-    const html = wrapper.html();
 
-    expect(html).toMatch(/data-special-test-prop="data-prop"/);
-    expect(html).toMatch(/aria-labelledby="aria-prop"/);
+    const element = screen.getByTestId('component-to-be-tested');
+
+    expect(element.classList.contains('thisClassIsUsedForTestingPurposesOnly')).toBeTruthy();
+    expect(element.style.pointerEvents).toEqual('none');
+
+    expect(element.dataset.specialTestProp).toEqual('data-prop');
+    expect(element.getAttribute('aria-labelledby')).toEqual('aria-prop');
     // special handling for ObjectPage Sections because of own ID handling...
     if (Component.displayName !== 'ObjectPageSection' && Component.displayName !== 'ObjectPageSubSection') {
-      expect(html).toMatch(/id="element-id"/);
+      expect(element.id).toBe('element-id');
     }
-    expect(html).not.toMatch(/disabled-custom-prop/);
+    expect(element.hasAttribute('disabled-custom-prop')).toBeFalsy();
   });
 };

yarn.lock

@@ -3755,10 +3755,10 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^25.2.1":
-  version "25.2.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.1.tgz#9544cd438607955381c1bdbdb97767a249297db5"
-  integrity sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==
+"@types/jest@^25.2.3":
+  version "25.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf"
+  integrity sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==
   dependencies:
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"