Merge pull request #76 from SAP/unit-test-cleanup

updated unit test coverage and eslint warnings
SAP · Nov 21, 2018 · f575a9b · f575a9b
2 parents f2ca7ab + c9a5749
commit f575a9b
Show file tree

Hide file tree

Showing 14 changed files with 118 additions and 111 deletions.
diff --git a/src/Identifier/Identifier.js b/src/Identifier/Identifier.js
@@ -5,7 +5,7 @@ export const Identifier = props => {
   const { glyph, size, modifier, color, label, children } = props;
   return (
     <span
-      className={`${size ? ' fd-identifier--' + size : ''}${
+      className={`${'fd-identifier--' + size}${
         glyph ? ' sap-icon--' + glyph : ''
       }${modifier ? ' fd-identifier--' + modifier : ''}${
         color ? ' fd-has-background-color-accent-' + color : ''

diff --git a/src/Identifier/Identifier.test.js b/src/Identifier/Identifier.test.js
@@ -17,7 +17,7 @@ describe('<Identifier />', () => {
     <Identifier size="m" glyph="washing-machine" modifier="circle" />
   );
   const transparent = (
-    <Identifier glyph="washing-machine" modifier="transparent" />
+    <Identifier glyph="washing-machine" modifier="transparent" size="m" />
   );
   const accentColor = <Identifier size="m" glyph="money-bills" color={9} />;
 

diff --git a/src/Identifier/__snapshots__/Identifier.test.js.snap b/src/Identifier/__snapshots__/Identifier.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`<Identifier /> Create identifier 1`] = `
 <span
-  className=" fd-identifier--s sap-icon--washing-machine"
+  className="fd-identifier--s sap-icon--washing-machine"
   role="presentation"
 />
 `;
 
 exports[`<Identifier /> Create identifier 2`] = `
 <span
   aria-label="Wendy Wallace"
-  className=" fd-identifier--m"
+  className="fd-identifier--m"
   role=""
 >
   WW
@@ -19,21 +19,21 @@ exports[`<Identifier /> Create identifier 2`] = `
 
 exports[`<Identifier /> Create identifier 3`] = `
 <span
-  className=" fd-identifier--m sap-icon--washing-machine fd-identifier--circle"
+  className="fd-identifier--m sap-icon--washing-machine fd-identifier--circle"
   role="presentation"
 />
 `;
 
 exports[`<Identifier /> Create identifier 4`] = `
 <span
-  className=" sap-icon--washing-machine fd-identifier--transparent"
+  className="fd-identifier--m sap-icon--washing-machine fd-identifier--transparent"
   role="presentation"
 />
 `;
 
 exports[`<Identifier /> Create identifier 5`] = `
 <span
-  className=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-9"
+  className="fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-9"
   role="presentation"
 />
 `;
diff --git a/src/Image/Image.js b/src/Image/Image.js
@@ -5,9 +5,7 @@ export const Image = props => {
   const { size, type, photo } = props;
   return (
     <span
-      className={`${size ? 'fd-image--' + size : 'm'}${
-        type ? ' fd-image--' + type : ''
-      }`}
+      className={`${'fd-image--' + size}${type ? ' fd-image--' + type : ''}`}
       style={{ backgroundImage: 'url(' + photo + ')' }}
     />
   );

diff --git a/src/Image/Image.test.js b/src/Image/Image.test.js
@@ -9,7 +9,7 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('<Image />', () => {
   const image = <Image size="s" photo="https://placeimg.com/400/400/nature" />;
   const circleImage = (
-    <Image type="circle" photo="https://placeimg.com/400/400/nature" />
+    <Image type="circle" size="m" photo="https://placeimg.com/400/400/nature" />
   );
   test('create image', () => {
     let component = renderer.create(image);

diff --git a/src/Image/__snapshots__/Image.test.js.snap b/src/Image/__snapshots__/Image.test.js.snap
@@ -13,7 +13,7 @@ exports[`<Image /> create image 1`] = `
 
 exports[`<Image /> create image 2`] = `
 <span
-  className="m fd-image--circle"
+  className="fd-image--m fd-image--circle"
   style={
     Object {
       "backgroundImage": "url(https://placeimg.com/400/400/nature)",

diff --git a/src/ListGroup/ListGroup.test.js b/src/ListGroup/ListGroup.test.js
@@ -30,7 +30,7 @@ describe('<ListGroup />', () => {
       <ListGroupItem>
         List item 1
         <ListGroupItemActions>
-          <Button type="light" glyph="edit" />
+          <Button type="standard" glyph="edit" />
         </ListGroupItemActions>
       </ListGroupItem>
     </ListGroup>

diff --git a/src/ListGroup/__snapshots__/ListGroup.test.js.snap b/src/ListGroup/__snapshots__/ListGroup.test.js.snap
@@ -55,7 +55,7 @@ exports[`<ListGroup /> create list group 2`] = `
       className="fd-list-group__action"
     >
       <button
-        className=" fd-button fd-button--light sap-icon--edit"
+        className=" fd-button fd-button--standard sap-icon--edit"
         disabled={false}
         selected={false}
       />

diff --git a/src/Navbar/__snapshots__/Navbar.test.js.snap b/src/Navbar/__snapshots__/Navbar.test.js.snap
@@ -179,7 +179,7 @@ exports[`<Navbar /> create navbar 1`] = `
         selected={false}
       >
         <span
-          className=" fd-identifier--s fd-identifier--circle"
+          className="fd-identifier--s fd-identifier--circle"
           role=""
         >
           WW

diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
@@ -3,95 +3,94 @@ import PropTypes from 'prop-types';
 
 // ---------------------------------------- Popover ----------------------------------------
 export class Popover extends Component {
-    constructor(props) {
-        super(props);
-        this.triggerBody = this.triggerBody.bind(this);
-        this.pressEsc = this.pressEsc.bind(this);
-        this.handleOutsideClick = this.handleOutsideClick.bind(this);
-        this.state = {
-            isExpanded: false,
-            isDisabled: this.props.disabled
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.triggerBody = this.triggerBody.bind(this);
+    this.pressEsc = this.pressEsc.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.state = {
+      isExpanded: false,
+      isDisabled: this.props.disabled
+    };
+  }
 
-    triggerBody() {
-        if (!this.state.isDisabled) {
-            if (!this.state.isExpanded) {
-                document.addEventListener('click', this.handleOutsideClick, false);
-            } else {
-                document.removeEventListener('click', this.handleOutsideClick, false);
-            }
+  triggerBody() {
+    if (!this.state.isDisabled) {
+      if (!this.state.isExpanded) {
+        document.addEventListener('click', this.handleOutsideClick, false);
+      } else {
+        document.removeEventListener('click', this.handleOutsideClick, false);
+      }
 
-            this.setState(prevState => ({
-                isExpanded: !prevState.isExpanded
-            }));
-        }
+      this.setState(prevState => ({
+        isExpanded: !prevState.isExpanded
+      }));
     }
+  }
 
-    pressEsc(event) {
-        if (event.keyCode === 27 && this.state.isExpanded === true) {
-            this.setState({
-                isExpanded: false
-            });
-        }
+  pressEsc(event) {
+    if (event.keyCode === 27 && this.state.isExpanded === true) {
+      this.setState({
+        isExpanded: false
+      });
     }
+  }
 
-    handleOutsideClick(e) {
-        if (!this.node.contains(e.target)) {
-            if (this.state.isExpanded) {
-                this.setState({
-                    isExpanded: false
-                });
-            } else {
-                return;
-            }
-        }
+  handleOutsideClick(e) {
+    if (this.node && !this.node.contains(e.target)) {
+      if (this.state.isExpanded) {
+        this.setState({
+          isExpanded: false
+        });
+      } else {
+        return;
+      }
     }
+  }
 
-    componentDidMount() {
-        document.addEventListener('keydown', this.pressEsc, false);
-        document.addEventListener('click', this.handleOutsideClick, false);
-    }
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.pressEsc, false);
-        document.removeEventListener('click', this.handleOutsideClick, false);
-    }
+  componentDidMount() {
+    document.addEventListener('keydown', this.pressEsc, false);
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.pressEsc, false);
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
 
-    render() {
-        const { id, alignment, noArrow, control, body } = this.props;
-        return (
-            <div
-                className={`fd-popover${alignment ? ' fd-popover--' + alignment : ''}`}
-                ref={this.setWrapperRef}
-                ref={node => {
-                    this.node = node;
-                }}
-            >
-                <div
-                    className="fd-popover__control"
-                    aria-expanded={this.state.isExpanded}
-                    onClick={this.triggerBody}
-                    aria-controls={id}
-                >
-                    {control}
-                </div>
-                <div
-                    className={`fd-popover__body${alignment ? ' fd-popover__body--' + alignment : ''}${
-                        noArrow ? ' fd-popover__body--no-arrow' : ''
-                    }`}
-                    aria-hidden={!this.state.isExpanded}
-                    id={id}
-                >
-                    {body}
-                </div>
-            </div>
-        );
-    }
+  render() {
+    const { id, alignment, noArrow, control, body } = this.props;
+    return (
+      <div
+        className={`fd-popover${alignment ? ' fd-popover--' + alignment : ''}`}
+        ref={node => {
+          this.node = node;
+        }}
+      >
+        <div
+          className="fd-popover__control"
+          aria-expanded={this.state.isExpanded}
+          onClick={this.triggerBody}
+          aria-controls={id}
+        >
+          {control}
+        </div>
+        <div
+          className={`fd-popover__body${
+            alignment ? ' fd-popover__body--' + alignment : ''
+          }${noArrow ? ' fd-popover__body--no-arrow' : ''}`}
+          aria-hidden={!this.state.isExpanded}
+          id={id}
+        >
+          {body}
+        </div>
+      </div>
+    );
+  }
 }
 
 Popover.propTypes = {
-    id: PropTypes.string,
-    alignment: PropTypes.oneOf(['', 'right']),
-    noArrow: PropTypes.bool,
-    disabled: PropTypes.bool
+  id: PropTypes.string,
+  alignment: PropTypes.oneOf(['', 'right']),
+  noArrow: PropTypes.bool,
+  disabled: PropTypes.bool
 };
diff --git a/src/Popover/Popover.test.js b/src/Popover/Popover.test.js
@@ -125,16 +125,26 @@ describe('<Popover />', () => {
     expect(wrapper.state('isExpanded')).toBeFalsy();
   });
 
-  //   test('handle document click to close popover', () => {
-  //     const wrapper = mount(popOver);
-
-  //     // click on popover to show
-  //     wrapper.find('div.fd-popover__control').simulate('click');
-  //     expect(wrapper.state('isExpanded')).toBeTruthy();
-
-  //     // handle click on document
-  //     let event = new MouseEvent('click', { target: 'h' });
-  //     document.dispatchEvent(event);
-  //     expect(wrapper.state('isExpanded')).toBeFalsy();
-  //   });
+  test('handle document click to close popover', () => {
+    const wrapper = mount(popOver);
+
+    // click on popover to show
+    wrapper.find('div.fd-popover__control').simulate('click');
+    expect(wrapper.state('isExpanded')).toBeTruthy();
+
+    // handle click on document
+    let event = new MouseEvent('click', {
+      target: document.querySelector('body')
+    });
+    document.dispatchEvent(event);
+    expect(wrapper.state('isExpanded')).toBeFalsy();
+  });
+
+  test('handle document click to close popover', () => {
+    const wrapper = mount(popOverDisabled);
+
+    // click on popover to show
+    wrapper.find('div.fd-popover__control').simulate('click');
+    expect(wrapper.state('isExpanded')).toBeFalsy();
+  });
 });
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
@@ -12,11 +12,11 @@ export class TabComponent extends Component {
     super(props);
     let initialStates = [];
 
-    props.ids.forEach(ids => {
+    initialStates = props.ids.forEach(ids => {
       let obj = {};
       let id = ids.id;
       obj[id] = false;
-      initialStates.push(obj);
+      return obj;
     });
     this.state = {
       selectedTab: '1',

diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js
@@ -48,7 +48,7 @@ describe('<Tile />', () => {
       <TileContent title="Tile Title" />
       <TileActions>
         <Popover
-          control={<Button type="secondary" glyph="vertical-grip" />}
+          control={<Button type="standard" glyph="vertical-grip" />}
           body={
             <Menu>
               <MenuList>

diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -49,7 +49,7 @@ exports[`<Tile /> create tile component 3`] = `
     className="fd-tile__media"
   >
     <span
-      className=" fd-identifier--m sap-icon--home fd-has-background-color-accent-3"
+      className="fd-identifier--m sap-icon--home fd-has-background-color-accent-3"
       role="presentation"
     />
   </div>
@@ -94,7 +94,7 @@ exports[`<Tile /> create tile component 4`] = `
         onClick={[Function]}
       >
         <button
-          className=" fd-button fd-button--secondary sap-icon--vertical-grip"
+          className=" fd-button fd-button--standard sap-icon--vertical-grip"
           disabled={false}
           selected={false}
         />