Merge 5670161 into 2556258

SAP · Jan 15, 2019 · b4dd707 · b4dd707
2 parents 2556258 + 5670161
commit b4dd707
Show file tree

Hide file tree

Showing 37 changed files with 5,651 additions and 4,685 deletions.
diff --git a/config/jest/jest.config.js b/config/jest/jest.config.js
@@ -0,0 +1,4 @@
+import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme';
+
+configure({ adapter: new Adapter() });
diff --git a/package.json b/package.json
@@ -127,7 +127,8 @@
     ],
     "resolver": "jest-pnp-resolver",
     "setupFiles": [
-      "react-app-polyfill/jsdom"
+      "react-app-polyfill/jsdom",
+      "./config/jest/jest.config.js"
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",

diff --git a/src/ActionBar/ActionBar.test.js b/src/ActionBar/ActionBar.test.js
@@ -1,80 +1,135 @@
+import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {
-  ActionBar,
-  ActionBarBack,
-  ActionBarHeader,
-  ActionBarActions
+    ActionBar,
+    ActionBarBack,
+    ActionBarHeader,
+    ActionBarActions
 } from './ActionBar';
 
 describe('<ActionBar />', () => {
-  const basicActionBar = (
-      <ActionBar className='blue'>
-          <ActionBarBack className='blue' />
-          <ActionBarHeader
-              className='blue'
-              title={'Page Title'}
-              description={'Action Bar Description'} />
-          <ActionBarActions className='blue'>
-              <button>Button</button>
-          </ActionBarActions>
-      </ActionBar>
-  );
-
-  const basicActionBarNoClass = (
-      <ActionBar>
-          <ActionBarBack className='blue' />
-          <ActionBarHeader
-              className='blue'
-              title={'Page Title'}
-              description={'Action Bar Description'} />
-          <ActionBarActions className='blue'>
-              <button>Button</button>
-          </ActionBarActions>
-      </ActionBar>
-  );
-
-  const mobileActionBar = (
-      <ActionBar className='blue' mobile>
-          <ActionBarBack />
-          <ActionBarHeader
-              title={'Page Title'}
-              description={'Action Bar Description'} />
-          <ActionBarActions>
-              <button>Button</button>
-          </ActionBarActions>
-      </ActionBar>
-  );
-
-  const mobileActionBarWidthSet = (
-      <ActionBar mobile width='500px'>
-          <ActionBarBack />
-          <ActionBarHeader
-              title={'Page Title'}
-              description={'Action Bar Description'} />
-          <ActionBarActions>
-              <button>Button</button>
-          </ActionBarActions>
-      </ActionBar>
-  );
-
-  test('create basic Action Bar', () => {
-    let component = renderer.create(basicActionBar);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    component = renderer.create(basicActionBarNoClass);
-    tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('create basic mobile Action Bar', () => {
-    let component = renderer.create(mobileActionBar);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    component = renderer.create(mobileActionBarWidthSet);
-    tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    const basicActionBar = (
+        <ActionBar className='blue'>
+            <ActionBarBack className='blue' />
+            <ActionBarHeader
+                className='blue'
+                title={'Page Title'}
+                description={'Action Bar Description'} />
+            <ActionBarActions className='blue'>
+                <button>Button</button>
+            </ActionBarActions>
+        </ActionBar>
+    );
+
+    const basicActionBarNoClass = (
+        <ActionBar>
+            <ActionBarBack className='blue' />
+            <ActionBarHeader
+                className='blue'
+                title={'Page Title'}
+                description={'Action Bar Description'} />
+            <ActionBarActions className='blue'>
+                <button>Button</button>
+            </ActionBarActions>
+        </ActionBar>
+    );
+
+    const mobileActionBar = (
+        <ActionBar className='blue' mobile>
+            <ActionBarBack />
+            <ActionBarHeader
+                title={'Page Title'}
+                description={'Action Bar Description'} />
+            <ActionBarActions>
+                <button>Button</button>
+            </ActionBarActions>
+        </ActionBar>
+    );
+
+    const mobileActionBarWidthSet = (
+        <ActionBar mobile width='500px'>
+            <ActionBarBack />
+            <ActionBarHeader
+                title={'Page Title'}
+                description={'Action Bar Description'} />
+            <ActionBarActions>
+                <button>Button</button>
+            </ActionBarActions>
+        </ActionBar>
+    );
+
+    test('create basic Action Bar', () => {
+        let component = renderer.create(basicActionBar);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        component = renderer.create(basicActionBarNoClass);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('create basic mobile Action Bar', () => {
+        let component = renderer.create(mobileActionBar);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        component = renderer.create(mobileActionBarWidthSet);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    describe('Prop spreading', () => {
+        test('should allow props to be spread to the ActionBar component', () => {
+            const element = mount(<ActionBar data-sample='Sample' />);
+
+            expect(
+                element.getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+
+        test('should allow props to be spread to the ActionBar component for mobile', () => {
+            const element = mount(<ActionBar data-sample='Sample' mobile />);
+
+            expect(
+                element.getDOMNode().querySelector('div').attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+
+        test('should allow props to be spread to the ActionBarBack component', () => {
+            const element = mount(<ActionBarBack data-sample='Sample' />);
+
+            expect(
+                element.getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+
+        xtest('should allow props to be spread to the ActionBarBack component\'s button element', () => {
+            // TODO: placeholder for this test description once that functionality is built
+        });
+
+        test('should allow props to be spread to the ActionBarHeader component', () => {
+            const element = mount(<ActionBarHeader data-sample='Sample' />);
+
+            expect(
+                element.getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+
+        xtest('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
+            // TODO: placeholder for this test description once that functionality is built
+        });
+
+        xtest('should allow props to be spread to the ActionBarHeader component\'s p element', () => {
+            // TODO: placeholder for this test description once that functionality is built
+        });
+
+        test('should allow props to be spread to the ActionBarActions component', () => {
+            const element = mount(<ActionBarActions data-sample='Sample' />);
+
+            expect(
+                element.getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+    });
 });
diff --git a/src/Alert/Alert.test.js b/src/Alert/Alert.test.js
@@ -1,58 +1,73 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { mount, shallow } from 'enzyme';
 import { Alert } from './Alert';
 
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('<Alert />', () => {
-  const basicAlert = (
-      <Alert dismissable link='#'
-          linkText='link'>
-      Default alert with a
-      </Alert>
-  );
-
-  const basicErrorAlert = (
-      <Alert dismissable type='error'
-          linkText='link'>
-      Error message with a
-      </Alert>
-  );
-
-  const nonDismissableAlert = (
-      <Alert className='blue' link='#'
-          linkText='link'>
-      Default alert that cannot be dismissed
-      </Alert>
-  );
-
-  test('create basic alert', () => {
-    let component = renderer.create(basicAlert);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    component = renderer.create(basicErrorAlert);
-    tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    let wrapper = shallow(basicAlert);
-    expect(wrapper.state(['isActive'])).toBeTruthy();
-    wrapper.find('button.fd-alert__close').simulate('click');
-    expect(wrapper.state(['isActive'])).toBeFalsy();
-  });
-
-  test('create non-dismissable alert', () => {
-    const component = renderer.create(nonDismissableAlert);
-    const tree = component.toJSON();
-
-    expect(tree).toMatchSnapshot();
-
-    // const wrapper = shallow(basicAlert);
-    // expect(wrapper.state(['isActive'])).toBeTruthy();
-
-    // wrapper.find('button.fd-alert__close').simulate('click');
-    // expect(wrapper.state(['isActive'])).toBeFalsy();
-  });
+    const basicAlert = (
+        <Alert dismissable link='#'
+            linkText='link'>
+            Default alert with a
+        </Alert>
+    );
+
+    const basicErrorAlert = (
+        <Alert dismissable type='error'
+            linkText='link'>
+            Error message with a
+        </Alert>
+    );
+
+    const nonDismissableAlert = (
+        <Alert className='blue' link='#'
+            linkText='link'>
+            Default alert that cannot be dismissed
+        </Alert>
+    );
+
+    test('create basic alert', () => {
+        let component = renderer.create(basicAlert);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        component = renderer.create(basicErrorAlert);
+        tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        let wrapper = shallow(basicAlert);
+        expect(wrapper.state(['isActive'])).toBeTruthy();
+        wrapper.find('button.fd-alert__close').simulate('click');
+        expect(wrapper.state(['isActive'])).toBeFalsy();
+    });
+
+    test('create non-dismissable alert', () => {
+        const component = renderer.create(nonDismissableAlert);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+
+        // const wrapper = shallow(basicAlert);
+        // expect(wrapper.state(['isActive'])).toBeTruthy();
+
+        // wrapper.find('button.fd-alert__close').simulate('click');
+        // expect(wrapper.state(['isActive'])).toBeFalsy();
+    });
+
+    describe('Prop spreading', () => {
+        test('should allow props to be spread to the Alert component', () => {
+            const element = mount(<Alert data-sample='Sample' />);
+
+            expect(
+                element.getDOMNode().querySelector('div').attributes['data-sample'].value
+            ).toBe('Sample');
+        });
+
+        xtest('should allow props to be spread to the Alert component\'s button element when dismissable', () => {
+            // TODO: placeholder for this test description once that functionality is built
+        });
+
+        xtest('should allow props to be spread to the Alert component\'s a element when link provided', () => {
+            // TODO: placeholder for this test description once that functionality is built
+        });
+    });
 });