Merge pull request #344 from TykTechnologies/TUI-8/radio-tests

tests for the Radio component

src/form/components/Radio/Radio.test.js

@@ -1,7 +1,91 @@
+import React from 'react';
 import Radio from './index';
 
+// eslint-disable-next-line react/prop-types
+function Component(props) {
+  return (
+    <Radio {...props} />
+  );
+}
+
+const classes = {
+  disabled: 'tyk-radio--is-disabled',
+  noMargin: 'no-margin',
+};
+
+const selectors = {
+  component: '.tyk-radio',
+  componentInline: '.tyk-radio--inline',
+  label: '.tyk-radio > label',
+  option: 'option',
+  readonly: '.tyk-form-control--readonly',
+  error: '.tyk-form-control__error-message',
+  note: '.tyk-form-control__help-block',
+  input: '.tyk-radio input',
+};
+
 describe('Radio', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  it('renders the component', () => {
+    cy.mount(<Component />)
+      .get(selectors.component)
+      .should('exist');
+  });
+
+  it('can set theme classes', () => {
+    const theme1 = 'theme1';
+    const theme2 = 'theme2';
+    cy.mount(<Component theme={`${theme1} ${theme2}`} />)
+      .get(selectors.component)
+      .should('have.class', `tyk-radio--theme-${theme1}`)
+      .and('have.class', `tyk-radio--theme-${theme2}`);
+  });
+
+  it('can have a custom css class', () => {
+    const wrapperClassName = 'datepicker-1';
+    cy.mount(<Component wrapperClassName={wrapperClassName} />)
+      .get(selectors.component)
+      .should('have.class', wrapperClassName);
+  });
+
+  it('can render with a label', () => {
+    const label = 'my label';
+    cy.mount(<Component label={label} />)
+      .get(selectors.label)
+      .should('exist')
+      .and('have.text', label);
+  });
+
+  it('can display a note', () => {
+    const note = 'please read this';
+    cy.mount(<Component label="my label" note={note} />)
+      .get(selectors.note)
+      .should('exist')
+      .and('have.text', note);
+  });
+
+  it('the input can be in the disabled state', () => {
+    cy.mount(<Component disabled />)
+      .get(selectors.input)
+      .should('have.attr', 'disabled');
+  });
+
+  it('in readOnly mode the input is in the disabled state', () => {
+    cy.mount(<Component readOnly />)
+      .get(selectors.component)
+      .should('have.class', classes.disabled)
+      .get(selectors.input)
+      .should('have.attr', 'disabled');
+  });
+
+  it('can remove margins with the "nospace" prop', () => {
+    cy.mount(<Component nospace />)
+      .get(selectors.component)
+      .should('have.class', classes.noMargin);
+  });
+
+  it('can be displayed inline', () => {
+    cy.mount(<Component inline />)
+      .get(selectors.componentInline)
+      .should('exist');
   });
 });

src/form/components/Radio/index.js

@@ -1,90 +1,78 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-
 /**
  * Radio can be used when a user needs to select at most one value from a multiple options.
  */
-export default class Radio extends Component {
-  static propTypes = {
-    /** Used to disable the element */
-    disabled: PropTypes.bool,
-    /** Readonly prop behaves the same as disabled on radio elements */
-    readOnly: PropTypes.bool,
-    /** Align radio with in same line with other elements */
-    inline: PropTypes.bool,
-    /** Set a theme for radio */
-    theme: PropTypes.string,
-    input: PropTypes.instanceOf(Object),
-    /** Adds label to the radio input */
-    label: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-      PropTypes.element,
-      PropTypes.func,
-      PropTypes.string,
-    ]),
-    /** Set name for the radio input */
-    name: PropTypes.string,
-    /** If set to true removes margin by adding `no-margin` class */
-    nospace: PropTypes.bool,
-    /** Set initial value for the radio input */
-    value: PropTypes.string,
-    /** Add note at the bottom of the radio input */
-    note: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.node,
-    ]),
-    wrapperClassName: PropTypes.string,
-  };
-
-  getCssClasses() {
-    const {
-      inline, nospace, theme = '', disabled, readOnly, wrapperClassName = '',
-    } = this.props;
-    const cssClasses = [wrapperClassName];
-
-    if (inline) {
-      cssClasses.push('tyk-radio--inline');
-    } else {
-      cssClasses.push('tyk-radio');
-    }
-
-    if (nospace) {
-      cssClasses.push('no-margin');
-    }
-
-    if (theme.trim()) {
-      cssClasses.push(...theme.split(' ').map(t => `tyk-radio--theme-${t}`));
-    }
+function Radio({
+  label,
+  input,
+  note,
+  inline,
+  nospace,
+  theme = '',
+  disabled,
+  readOnly,
+  wrapperClassName = '',
+  ...rest
+}) {
+  const cssClasses = [
+    inline ? 'tyk-radio--inline' : 'tyk-radio',
+    wrapperClassName,
+    nospace && 'no-margin',
+    ...(theme ? theme.split(' ').filter(Boolean).map((t) => `tyk-radio--theme-${t}`) : []),
+    (readOnly || disabled) && 'tyk-radio--is-disabled',
+  ].filter(Boolean).join(' ');
 
-    if (readOnly || disabled) {
-      cssClasses.push('tyk-radio--is-disabled');
-    }
-
-    return cssClasses.join(' ');
-  }
-
-  render() {
-    const {
-      input, label, note, disabled, readOnly, ...rest
-    } = this.props;
-    return (
-      <div
-        className={this.getCssClasses()}
-      >
-        <label>
-          <input
-            {...input}
-            {...rest}
-            type="radio"
-            disabled={readOnly || disabled}
-          />
-          {label}
-        </label>
+  return (
+    <div className={cssClasses}>
+      <label>
+        <input
+          {...input}
+          {...rest}
+          type="radio"
+          disabled={readOnly || disabled}
+        />
+        {label}
+      </label>
+      {note && (
         <p className="tyk-form-control__help-block">{note}</p>
-      </div>
-    );
-  }
+      )}
+    </div>
+  );
 }
+
+Radio.propTypes = {
+  /** Used to disable the element */
+  disabled: PropTypes.bool,
+  /** Readonly prop behaves the same as disabled on radio elements */
+  readOnly: PropTypes.bool,
+  /** Align radio in the same line with other elements */
+  inline: PropTypes.bool,
+  /** Set a theme for radio */
+  theme: PropTypes.string,
+  input: PropTypes.instanceOf(Object),
+  /** Adds label to the radio input */
+  label: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.func,
+    PropTypes.string,
+  ]),
+  /** Set name for the radio input */
+  name: PropTypes.string,
+  /** If set to true removes margin by adding `no-margin` class */
+  nospace: PropTypes.bool,
+  /** Set initial value for the radio input */
+  value: PropTypes.string,
+  /** Add note at the bottom of the radio input */
+  note: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.node,
+  ]),
+  wrapperClassName: PropTypes.string,
+};
+
+export default Radio;

src/form/components/Select/Select.test.js

@@ -59,7 +59,7 @@ describe('Select', () => {
       .should('have.class', wrapperClassName);
   });
 
-  it('can renders with a label', () => {
+  it('can render with a label', () => {
     const label = 'my label';
     cy.mount(<Component label={label} />)
       .get(selectors.label)
@@ -100,7 +100,7 @@ describe('Select', () => {
 
   it('in readOnly mode text is displayed, the value or "-" if no value', () => {
     cy.mount(<Component readOnly />)
-      .get(selectors.input)
+      .get(selectors.select)
       .should('not.exist')
       .get(selectors.readonly)
       .should('exist')