tests for row and column

src/layout/Column/Column.test.js

@@ -1,7 +1,62 @@
+import React from 'react';
+import Row from '../Row';
 import Column from './index';
 
+const selectors = {
+  component: '.tyk-col',
+  row: '.tyk-row',
+};
+
+// eslint-disable-next-line react/prop-types
+function Component({ children, ...rest }) {
+  return (
+    <Row style={{ blockSize: '300px', border: '1px solid blue' }}>
+      <Column size="lg-6 md-6" {...rest}>{children ?? 'column content'}</Column>
+    </Row>
+  );
+}
+
 describe('Column', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  it('renders the component', () => {
+    cy.mount(<Component />)
+      .get(selectors.component)
+      .should('exist');
+  });
+
+  it('can specify the size of the column', () => {
+    const gutterWidth = 20;
+    cy.mount(<Component size="lg-3 md-3" />);
+
+    cy
+      .get(selectors.row)
+      .then(($row) => {
+        cy.get(selectors.component).should(($col) => {
+          expect($col.width()).to.equal(($row.width() / 4 - gutterWidth));
+        });
+      });
+  });
+
+  it('can align vertically in the row', () => {
+    cy.mount(<Component align="center" />)
+      .get(selectors.component)
+      .invoke('offset')
+      .its('top')
+      .then((top) => {
+        expect(top).to.be.gt(100);
+      });
+  });
+
+  it('can have custom class names', () => {
+    const customClass = 'custom-class';
+    cy.mount(<Component className={customClass} />)
+      .get(selectors.component)
+      .should('have.class', customClass);
+  });
+
+  it('can have an offset from the left', () => {
+    cy.mount(<Component offset="lg-2 md-2" />)
+      .get(selectors.component)
+      .should('have.class', 'tyk-col--offset-lg-2')
+      .and('have.class', 'tyk-col--offset-md-2');
   });
 });

src/layout/Column/index.js

@@ -1,71 +1,51 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-/**
- * Column component.
- */
-class Column extends PureComponent {
-  static propTypes = {
-    /**
-    * This property describes how the column element will be aligned vertically
-    * within a Row: bottom, center, top
-    */
-    align: PropTypes.string,
-    /** Css classes that can be passed to the column element */
-    className: PropTypes.string,
-    /**
-    * ID  that can be passed to the column element
-    */
-    id: PropTypes.string,
-    /**
-    * Specifies the size of the column within a Row (values must be between 1 - 12)
-    */
-    size: PropTypes.string.isRequired,
-    /**
-    * Specifies the left gap a column can have within a Row (values must be between 1 - 12)
-    */
-    offset: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string,
-      PropTypes.object,
-      PropTypes.node,
-    ]),
-  };
-
-  getCssClasses() {
-    const {
-      align, className, offset, size,
-    } = this.props;
-    const colSize = size.split(' ');
-    const colOffsets = offset ? offset.split(' ') : [];
-
-    let cssClasses = colSize.map(cSize => `tyk-col--${cSize}`);
-    const offsets = colOffsets.map(cOffset => `tyk-col--offset-${cOffset}`);
-
-    if (align) {
-      cssClasses.push(`tyk-col--align-${align}`);
-    }
-
-    if (className) {
-      cssClasses = cssClasses.concat(className.split(' '));
-    }
-
-    cssClasses.push('tyk-col');
-    cssClasses = cssClasses.concat(offsets || []);
-
-    return cssClasses.join(' ');
-  }
-
-  render() {
-    const { children, id, ...props } = this.props;
-
-    return (
-      <div {...props} className={this.getCssClasses()} id={id}>
-        { children }
-      </div>
-    );
-  }
+function Column({
+  children,
+  align,
+  className,
+  offset,
+  size,
+  ...rest
+}) {
+  const classes = [
+    'tyk-col',
+    className,
+    align && `tyk-col--align-${align}`,
+    ...size.split(' ').map((cSize) => `tyk-col--${cSize}`),
+    ...(offset ? offset.split(' ') : []).map((cOffset) => `tyk-col--offset-${cOffset}`),
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} {...rest}>
+      { children }
+    </div>
+  );
 }
 
+Column.propTypes = {
+  /**
+  * This property describes how the column element will be aligned vertically
+  * within a Row: bottom, center, top
+  */
+  align: PropTypes.string,
+  /** Css classes that can be passed to the column element */
+  className: PropTypes.string,
+  /**
+  * Specifies the size of the column within a Row (values must be between 1 - 12)
+  */
+  size: PropTypes.string.isRequired,
+  /**
+  * Specifies the left gap a column can have within a Row (values must be between 1 - 12)
+  */
+  offset: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.node,
+  ]),
+};
+
 export default Column;

src/layout/Row/Row.test.js

@@ -1,7 +1,41 @@
+import React from 'react';
 import Row from './index';
 
+const classes = {
+  noGutter: 'no-gutters',
+  gutterless: 'tyk-row--gutterless',
+};
+
+const selectors = {
+  component: '.tyk-row',
+};
+
 describe('Row', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  it('renders the component', () => {
+    cy.mount(<Row />)
+      .get(selectors.component)
+      .should('exist');
+  });
+
+  it('can have custom class names', () => {
+    const customClass = 'custom-class';
+    cy.mount(<Row className={customClass} />)
+      .get(selectors.component)
+      .should('have.class', customClass);
+  });
+
+  it('adds classes that remove gutters', () => {
+    cy.mount(<Row nogutters />)
+      .get(selectors.component)
+      .should('have.class', classes.noGutter)
+      .and('have.class', classes.gutterless);
+  });
+
+  it('renders its children', () => {
+    const content = <div id="custom-content">custom content</div>;
+    cy.mount(<Row>{content}</Row>)
+      .get(selectors.component)
+      .find('#custom-content')
+      .should('exist');
   });
 });

src/layout/Row/index.js

@@ -1,47 +1,36 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-
 /** Row component which must be always present as a wrapper for Columns */
-export default class Row extends PureComponent {
-  static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-    ]),
-    /** Css classes that can be passed to the Row element */
-    className: PropTypes.string,
-    /** Removes all the spaces between column */
-    nogutters: PropTypes.bool,
-  }
-
-  getCssClasses() {
-    const { className, nogutters } = this.props;
-    let cssClass = ['tyk-row'];
-
-    if (nogutters) {
-      cssClass.push('no-gutters');
-      cssClass.push('tyk-row--gutterless');
-    }
-
-    if (className) {
-      cssClass = cssClass.concat(className.split(' '));
-    }
-
-    return cssClass.join(' ');
-  }
-
-  render() {
-    const {
-      children,
-      nogutters,
-      ...rest
-    } = this.props;
-
-    return (
-      <div {...rest} className={this.getCssClasses()}>
-        { children }
-      </div>
-    );
-  }
+function Row({
+  className,
+  nogutters,
+  children,
+  ...rest
+}) {
+  const classes = [
+    'tyk-row',
+    className,
+    nogutters && 'no-gutters',
+    nogutters && 'tyk-row--gutterless',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div {...rest} className={classes}>
+      { children }
+    </div>
+  );
 }
+
+Row.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+  ]),
+  /** Css classes that can be passed to the Row element */
+  className: PropTypes.string,
+  /** Removes all the spaces between column */
+  nogutters: PropTypes.bool,
+};
+
+export default Row;