From 362833fd83ff56544a17b72f57a8db99fdac2344 Mon Sep 17 00:00:00 2001 From: Vlad Ifrim Date: Tue, 19 Dec 2023 20:31:48 +0200 Subject: [PATCH] tests for the Radio component --- src/form/components/Radio/Radio.test.js | 88 ++++++++++++- src/form/components/Radio/index.js | 152 ++++++++++------------ src/form/components/Select/Select.test.js | 4 +- 3 files changed, 158 insertions(+), 86 deletions(-) diff --git a/src/form/components/Radio/Radio.test.js b/src/form/components/Radio/Radio.test.js index f975bb1c..09ce461c 100644 --- a/src/form/components/Radio/Radio.test.js +++ b/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 ( + + ); +} + +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() + .get(selectors.component) + .should('exist'); + }); + + it('can set theme classes', () => { + const theme1 = 'theme1'; + const theme2 = 'theme2'; + cy.mount() + .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() + .get(selectors.component) + .should('have.class', wrapperClassName); + }); + + it('can render with a label', () => { + const label = 'my label'; + cy.mount() + .get(selectors.label) + .should('exist') + .and('have.text', label); + }); + + it('can display a note', () => { + const note = 'please read this'; + cy.mount() + .get(selectors.note) + .should('exist') + .and('have.text', note); + }); + + it('the input can be in the disabled state', () => { + cy.mount() + .get(selectors.input) + .should('have.attr', 'disabled'); + }); + + it('in readOnly mode the input is in the disabled state', () => { + cy.mount() + .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() + .get(selectors.component) + .should('have.class', classes.noMargin); + }); + + it('can be displayed inline', () => { + cy.mount() + .get(selectors.componentInline) + .should('exist'); }); }); diff --git a/src/form/components/Radio/index.js b/src/form/components/Radio/index.js index f064001e..22f7283f 100644 --- a/src/form/components/Radio/index.js +++ b/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 ( -
- + return ( +
+ + {note && (

{note}

-
- ); - } + )} +
+ ); } + +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; diff --git a/src/form/components/Select/Select.test.js b/src/form/components/Select/Select.test.js index 721efeac..ff6deec5 100644 --- a/src/form/components/Select/Select.test.js +++ b/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() .get(selectors.label) @@ -100,7 +100,7 @@ describe('Select', () => { it('in readOnly mode text is displayed, the value or "-" if no value', () => { cy.mount() - .get(selectors.input) + .get(selectors.select) .should('not.exist') .get(selectors.readonly) .should('exist')