Repository: react-materialize/react-materialize
Pull request #1065 (2020-03-27 10:01:55)

github actions: run tests on every push


Patch:
diff --git a/src/Card.js b/src/Card.js
index 70676e8..eb71126 100644
--- a/src/Card.js
+++ b/src/Card.js
@@ -1,61 +1,102 @@
-import React, { Fragment, cloneElement } from 'react';
+import React, { Component, Fragment, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Icon from './Icon';
 
-// eslint-disable-next-line react/prop-types
-const Wrapper = ({ condition, children }) =>
-  condition ? (
-    <div className="card-stacked">{children}</div>
-  ) : (
-    <Fragment>{children}</Fragment>
-  );
+class Card extends Component {
+  constructor(props) {
+    super(props);
+    this.renderTitle = this.renderTitle.bind(this);
+    this.renderReveal = this.renderReveal.bind(this);
+    this.renderAction = this.renderAction.bind(this);
+    this.renderContent = this.renderContent.bind(this);
+    this.renderAll = this.renderAll.bind(this);
+  }
 
-const Card = ({
-  title,
-  header,
-  className,
-  textClassName,
-  actions,
-  reveal,
-  children,
-  horizontal,
-  closeIcon,
-  revealIcon,
-  ...other
-}) => {
-  const classes = {
-    card: true,
-    horizontal: horizontal
-  };
+  renderTitle(title, reveal) {
+    const { revealIcon } = this.props;
 
-  return (
-    <div {...other} className={cx(className, classes)}>
-      {header}
-      <Wrapper condition={horizontal}>
-        <div className={cx('card-content', textClassName)}>
-          {title && (
-            <span className={cx('card-title', { activator: reveal })}>
-              {title}
-              {reveal && cloneElement(revealIcon, { right: true })}
-            </span>
-          )}
-          <div>{children}</div>
-        </div>
+    return (
+      <span
+        className={cx('card-title', {
+          activator: reveal
+        })}
+      >
+        {title}
+        {reveal && { revealIcon }}
+      </span>
+    );
+  }
 
-        <div className="card-reveal">
-          <span className="card-title">
-            {title}
-            {cloneElement(closeIcon, { right: true })}
-          </span>
-          {reveal}
-        </div>
+  renderReveal(title, reveal) {
+    const { closeIcon } = this.props;
 
-        {actions && <div className="card-action">{actions}</div>}
-      </Wrapper>
-    </div>
-  );
-};
+    return (
+      <div className="card-reveal">
+        <span className="card-title">
+          {title}
+          {cloneElement(closeIcon, { right: true })}
+        </span>
+        {reveal}
+      </div>
+    );
+  }
+
+  renderAction(actions) {
+    return <div className="card-action">{actions}</div>;
+  }
+
+  renderContent(title, reveal, textClassName, children) {
+    return (
+      <div className={cx('card-content', textClassName)}>
+        {title && this.renderTitle(title, reveal)}
+        <div>{children}</div>
+      </div>
+    );
+  }
+
+  renderAll(title, reveal, textClassName, children, actions) {
+    return (
+      <Fragment>
+        {this.renderContent(title, reveal, textClassName, children)}
+        {this.renderReveal(title, reveal)}
+        {actions && this.renderAction(actions)}
+      </Fragment>
+    );
+  }
+
+  render() {
+    const {
+      title,
+      header,
+      className,
+      textClassName,
+      actions,
+      reveal,
+      children,
+      horizontal,
+      ...other
+    } = this.props;
+
+    const classes = {
+      card: true,
+      horizontal: horizontal
+    };
+
+    return (
+      <div {...other} className={cx(className, classes)}>
+        {header}
+        {horizontal ? (
+          <div className="card-stacked">
+            {this.renderAll(title, reveal, textClassName, children, actions)}
+          </div>
+        ) : (
+          this.renderAll(title, reveal, textClassName, children, actions)
+        )}
+      </div>
+    );
+  }
+}
 
 Card.propTypes = {
   children: PropTypes.node,
@@ -67,13 +108,7 @@ Card.propTypes = {
   // The buttons to be displayed at the action area
   actions: PropTypes.arrayOf(PropTypes.element),
   horizontal: PropTypes.bool,
-  /*
-   * @default <Icon>close</Icon>
-   */
   closeIcon: PropTypes.node,
-  /*
-   * @default <Icon>more_vert</Icon>
-   */
   revealIcon: PropTypes.node
 };
 
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 6905277..af87aac 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -56,12 +56,10 @@ class Dropdown extends Component {
     const { children } = this.props;
 
     return Children.map(children, element => {
-      if (element) {
-        if (element.type.name === 'Divider') {
-          return <li key={idgen()} className="divider" tabIndex="-1" />;
-        } else {
-          return <li key={idgen()}>{element}</li>;
-        }
+      if (element.type.name === 'Divider') {
+        return <li key={idgen()} className="divider" tabIndex="-1" />;
+      } else {
+        return <li key={idgen()}>{element}</li>;
       }
     });
   }
diff --git a/src/Navbar.js b/src/Navbar.js
index eab2329..6909bba 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -28,7 +28,6 @@ class Navbar extends Component {
       fixed,
       alignLinks,
       centerLogo,
-      centerChildren,
       search,
       menuIcon,
       sidenav
@@ -36,7 +35,6 @@ class Navbar extends Component {
 
     const brandClasses = cx({
       'brand-logo': true,
-      right: alignLinks == 'left',
       center: centerLogo
     });
 
@@ -63,9 +61,7 @@ class Navbar extends Component {
 
     let navbar = (
       <nav className={navCSS}>
-        <div
-          className={centerChildren ? 'nav-wrapper container' : 'nav-wrapper'}
-        >
+        <div className="nav-wrapper">
           {search ? (
             <SearchForm />
           ) : (
@@ -126,10 +122,6 @@ Navbar.propTypes = {
    * Specifying centerLogo as a prop the logo will always be centered
    */
   centerLogo: PropTypes.bool,
-  /**
-   * The Navbar children will be constrained in a container rather than spread out to the far edges
-   */
-  centerChildren: PropTypes.bool,
   /**
    * Makes the navbar fixed
    */
diff --git a/stories/Navbar.stories.js b/stories/Navbar.stories.js
index ea0cb1a..d7bd789 100644
--- a/stories/Navbar.stories.js
+++ b/stories/Navbar.stories.js
@@ -59,21 +59,6 @@ stories.add('Center Logo', () => (
   </Navbar>
 ));
 
-stories.add('Center Children', () => (
-  <Navbar
-    brand={
-      <a href="#" className="brand-logo">
-        Logo
-      </a>
-    }
-    centerChildren
-    alignLinks="right"
-  >
-    <NavItem href="">Getting started</NavItem>
-    <NavItem href="components.html">Components</NavItem>
-  </Navbar>
-));
-
 stories.add('Extended Navbar with Tabs', () => (
   <Navbar
     brand={


Test patch:
diff --git a/.github/workflows/ci-test.yml b/.github/workflows/ci-test.yml
index f02ed8e..f9f9cca 100644
--- a/.github/workflows/ci-test.yml
+++ b/.github/workflows/ci-test.yml
@@ -1,9 +1,6 @@
 name: Test
 
-on:
-  push:
-    branches-ignore:
-      - master
+on: [push]
 
 jobs:
   test:
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
index 5df41bb..dffad43 100644
--- a/test/Navbar.spec.js
+++ b/test/Navbar.spec.js
@@ -59,23 +59,12 @@ describe('<Navbar />', () => {
     expect(wrapper.find('a.brand-logo').hasClass('center'));
   });
 
-  test('can constrain its children to a container', () => {
-    wrapper = shallow(
-      <Navbar brand={<a href="/">Logo</a>} centerChildren>
-        <a href="get-started.html">Getting started</a>
-        <a href="components.html">Components</a>
-      </Navbar>
-    );
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('div').hasClass('nav-wrapper container')).toBe(true);
-  });
-
   test('places brand on right if navbar is left aligned', () => {
     wrapper = shallow(
       <Navbar brand={<a href="/">Logo</a>} alignLinks="left" />
     );
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('a.brand-logo').hasClass('right')).toBe(true);
+    expect(wrapper.find('a.brand-logo').hasClass('right'));
   });
 
   test('adds a brand node', () => {
diff --git a/test/__snapshots__/Card.spec.js.snap b/test/__snapshots__/Card.spec.js.snap
index da295c1..2f331e3 100644
--- a/test/__snapshots__/Card.spec.js.snap
+++ b/test/__snapshots__/Card.spec.js.snap
@@ -3,34 +3,42 @@
 exports[`<Card /> renders 1`] = `
 <div
   className="blue-grey darken-1 card"
+  closeIcon={
+    <Icon>
+      close
+    </Icon>
+  }
+  revealIcon={
+    <Icon>
+      more_vert
+    </Icon>
+  }
 >
-  <Wrapper>
-    <div
-      className="card-content white-text"
+  <div
+    className="card-content white-text"
+  >
+    <span
+      className="card-title"
     >
-      <span
-        className="card-title"
-      >
-        card title
-      </span>
-      <div>
-        I am a very simple card
-      </div>
+      card title
+    </span>
+    <div>
+      I am a very simple card
     </div>
-    <div
-      className="card-reveal"
+  </div>
+  <div
+    className="card-reveal"
+  >
+    <span
+      className="card-title"
     >
-      <span
-        className="card-title"
+      card title
+      <Icon
+        right={true}
       >
-        card title
-        <Icon
-          right={true}
-        >
-          close
-        </Icon>
-      </span>
-    </div>
-  </Wrapper>
+        close
+      </Icon>
+    </span>
+  </div>
 </div>
 `;
diff --git a/test/__snapshots__/Navbar.spec.js.snap b/test/__snapshots__/Navbar.spec.js.snap
index 73eb872..40b71b9 100644
--- a/test/__snapshots__/Navbar.spec.js.snap
+++ b/test/__snapshots__/Navbar.spec.js.snap
@@ -187,79 +187,6 @@ exports[`<Navbar /> can center the brand logo 1`] = `
 </Fragment>
 `;
 
-exports[`<Navbar /> can constrain its children to a container 1`] = `
-<Fragment>
-  <nav
-    className=""
-  >
-    <div
-      className="nav-wrapper container"
-    >
-      <a
-        className="brand-logo"
-        href="/"
-      >
-        Logo
-      </a>
-      <a
-        className="sidenav-trigger"
-        data-target="mobile-nav"
-        href="#!"
-      >
-        <Icon>
-          menu
-        </Icon>
-      </a>
-      <ul
-        className="hide-on-med-and-down"
-      >
-        <li
-          key="0/.0"
-        >
-          <a
-            href="get-started.html"
-          >
-            Getting started
-          </a>
-        </li>
-        <li
-          key="1/.1"
-        >
-          <a
-            href="components.html"
-          >
-            Components
-          </a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-  <ul
-    className="sidenav"
-    id="mobile-nav"
-  >
-    <li
-      key="0/.0"
-    >
-      <a
-        href="get-started.html"
-      >
-        Getting started
-      </a>
-    </li>
-    <li
-      key="1/.1"
-    >
-      <a
-        href="components.html"
-      >
-        Components
-      </a>
-    </li>
-  </ul>
-</Fragment>
-`;
-
 exports[`<Navbar /> can have children with custom ids 1`] = `
 <Fragment>
   <nav
@@ -336,7 +263,7 @@ exports[`<Navbar /> can have custom sidenav 1`] = `
       className="nav-wrapper"
     >
       <a
-        className="brand-logo right"
+        className="brand-logo"
         href="/"
       >
         Logo
@@ -377,7 +304,7 @@ exports[`<Navbar /> places brand on right if navbar is left aligned 1`] = `
       className="nav-wrapper"
     >
       <a
-        className="brand-logo right"
+        className="brand-logo"
         href="/"
       >
         Logo