diff options
Diffstat (limited to 'test/react')
37 files changed, 1733 insertions, 0 deletions
diff --git a/test/react/Accordion.spec.js b/test/react/Accordion.spec.js new file mode 100644 index 0000000..614dcdd --- /dev/null +++ b/test/react/Accordion.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import Accordion from '../../src/react/Accordion.js'; + +import renderer from 'react-test-renderer'; + +describe('Accordion', () => { + test('Accordion - Default', () => { + const accordion = renderer.create(<Accordion title='Accordion'>Accordion body</Accordion>).toJSON(); + expect(accordion).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/test/react/Button.spec.js b/test/react/Button.spec.js new file mode 100644 index 0000000..3b3b72e --- /dev/null +++ b/test/react/Button.spec.js @@ -0,0 +1,77 @@ +import React from 'react'; +import Button from '../../src/react/Button.js'; + +import renderer from 'react-test-renderer'; + +describe('Button', () => { + test('Button - Default - Primary', () => { + const button = renderer.create(<Button>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - Primary - Disabled', () => { + const button = renderer.create(<Button disabled>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - White', () => { + const button = renderer.create(<Button color='white'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - Gray', () => { + const button = renderer.create(<Button color='gray'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - Positive', () => { + const button = renderer.create(<Button color='positive'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - Negative', () => { + const button = renderer.create(<Button color='negative'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Default - Warning', () => { + const button = renderer.create(<Button color='warning'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Outline - Primary', () => { + const button = renderer.create(<Button btnType='outline'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Outline - Gray', () => { + const button = renderer.create(<Button btnType='outline' color='gray'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Outline - Positive', () => { + const button = renderer.create(<Button btnType='outline' color='positive'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Outline - Negative', () => { + const button = renderer.create(<Button btnType='outline' color='negative'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Link - Primary', () => { + const button = renderer.create(<Button btnType='link' color='primary'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Link - Primary - Disabled', () => { + const button = renderer.create(<Button btnType='link' color='primary' disabled>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + + test('Button - Link - Primary - With Icon', () => { + const button = renderer.create(<Button btnType='link' color='primary' iconName='plus'>Click Me</Button>).toJSON(); + expect(button).toMatchSnapshot(); + }); + +}); diff --git a/test/react/Checkbox.spec.js b/test/react/Checkbox.spec.js new file mode 100644 index 0000000..88ba660 --- /dev/null +++ b/test/react/Checkbox.spec.js @@ -0,0 +1,60 @@ +import React from 'react'; +import Checkbox from '../../src/react/Checkbox.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class CheckboxForm extends React.Component { + constructor(props) { + super(props); + this.state = {checked: false}; + + this.handleChange = this.handleChange.bind(this); + } + + handleChange(val) { + this.setState({checked: val}); + } + + getChecked() { + return this.checkbox.getChecked(); + } + + render() { + return ( + <form > + <Checkbox ref={(checkbox)=>{this.checkbox = checkbox;}} checked={this.state.checked} onChange={this.handleChange} label='This is the checkbox label' /> + </form> + ); + } +} + +describe('Checkbox', () => { + test('Checkbox - unchecked', () => { + const checkbox = renderer.create(<Checkbox label='This is the checkbox label'/>).toJSON(); + expect(checkbox).toMatchSnapshot(); + }); + + test('Checkbox - disabled', () => { + const checkbox = renderer.create(<Checkbox disabled={true} label='This is the checkbox label' />).toJSON(); + expect(checkbox).toMatchSnapshot(); + }); + + test('Checkbox - checked state changes', () => { + const checkbox = mount(<CheckboxForm />); + expect(checkbox.instance().getChecked()).toEqual(false); + expect(checkbox.instance().getChecked()).toEqual(checkbox.find('input').props().checked); + checkbox.find('input').simulate('change', { target : { checked: true }}); + expect(checkbox.instance().getChecked()).toEqual(checkbox.find('input').props().checked); + expect(checkbox.instance().getChecked()).toEqual(true); + checkbox.find('input').simulate('change', { target : { checked: false }}); + expect(checkbox.instance().getChecked()).toEqual(false); + expect(checkbox.instance().getChecked()).toEqual(checkbox.find('input').props().checked); + }); + + test('Checkbox - returns its value', () => { + const checkbox = mount(<Checkbox label='This is the checkbox label' value='myVal' />); + expect(checkbox.instance().getValue()).toEqual('myVal'); + }); + +}); diff --git a/test/react/Checklist.spec.js b/test/react/Checklist.spec.js new file mode 100644 index 0000000..a3409ad --- /dev/null +++ b/test/react/Checklist.spec.js @@ -0,0 +1,64 @@ +import React from 'react'; +import Checklist from '../../src/react/Checklist.js'; + +import renderer from 'react-test-renderer'; + +const items = [ + { + label: 'apple', + value: 'apple', + dataTestId: 'apple', + checked: true + }, + { + label: 'banana', + value: 'banana', + dataTestId: 'banana', + checked: false + }, + { + label: 'orange', + value: 'orange', + dataTestId: 'orange', + checked: true + } +]; + +const itemsDisabled = [ + { + label: 'apple', + value: 'apple', + dataTestId: 'apple', + checked: true, + disabled: true + }, + { + label: 'banana', + value: 'banana', + dataTestId: 'banana', + checked: false, + disabled: true + }, + { + label: 'orange', + value: 'orange', + dataTestId: 'orange', + checked: false + } +]; + + +describe('Checklist', () => { + test('Checklist - Default ', () => { + const checklist = renderer.create(<Checklist items={items} onChange={() => { }} />).toJSON(); + expect(checklist).toMatchSnapshot(); + }); + + test('Checklist - With disabled items ', () => { + const checklist = renderer.create(<Checklist items={itemsDisabled} onChange={() => { }} />).toJSON(); + expect(checklist).toMatchSnapshot(); + }); + + + +});
\ No newline at end of file diff --git a/test/react/Input.spec.js b/test/react/Input.spec.js new file mode 100644 index 0000000..3766e45 --- /dev/null +++ b/test/react/Input.spec.js @@ -0,0 +1,69 @@ +import React from 'react'; +import Input from '../../src/react/Input.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class InputForm extends React.Component { + constructor(props) { + super(props); + this.state = {value: 'Initial'}; + this.handleChange = this.handleChange.bind(this); + } + + handleChange(val) { + this.setState({value: val}); + } + + getValue() { + return this.input.getValue(); + } + + render() { + return ( + <form > + <Input ref={(input)=>{this.input = input;}} value={this.state.value} name='testinput' onChange={this.handleChange} /> + </form> + ); + } +} + +describe('Input', () => { + test('Input - default', () => { + const input = renderer.create(<Input label='label for input' name='clickme' type='text'/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - required', () => { + const input = renderer.create(<Input required label='label for input' name='clickme' type='text'/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - number', () => { + const input = renderer.create(<Input label='label for input' name='clickme' type='number'/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - readonly', () => { + const input = renderer.create(<Input label='label for input' name='clickme' type='text' readOnly/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - placeholder', () => { + const input = renderer.create(<Input label='label for input' name='clickme' type='text' placeholder='hint'/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - error', () => { + const input = renderer.create(<Input label='label for input' name='clickme' type='text' errorMessage='this is an error'/>).toJSON(); + expect(input).toMatchSnapshot(); + }); + + test('Input - checked state value changes', () => { + const input = mount(<InputForm />); + expect(input.instance().getValue()).toEqual('Initial'); + input.find('input').simulate('change', { target : { value: 'Changed' }}); + expect(input.instance().getValue()).toEqual('Changed'); + expect(input.find('input').prop('value')).toEqual('Changed'); + }); +}); diff --git a/test/react/Modal.spec.js b/test/react/Modal.spec.js new file mode 100644 index 0000000..7c4738f --- /dev/null +++ b/test/react/Modal.spec.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; + +import Modal from '../../src/react/Modal'; + +describe('Modal', () => { + + const MODAL_MESSAGE = 'Message'; + test('standard modal', ()=>{ + const modal = new ReactWrapper(mount(<Modal show={true} size='small'> + <Modal.Header><Modal.Title>Standard Modal</Modal.Title></Modal.Header> + <Modal.Body> + {MODAL_MESSAGE} + </Modal.Body> + <Modal.Footer actionButtonText='Yes' actionButtonClick={()=>{}}/> + </Modal>).instance().modalRef, true); + + expect(modal.find(Modal.Body).length).toBe(1); + expect(modal.find(Modal.Header).length).toBe(1); + expect(modal.find(Modal.Title).length).toBe(1); + expect(modal.find(Modal.Body).length).toBe(1); + expect(modal.find(Modal.Footer).length).toBe(1); + expect(modal.find(Modal.Header).props().type).toBe('info'); + expect(modal.find(Modal.Body).text()).toBe(MODAL_MESSAGE); + expect(modal.html()).toMatchSnapshot(); + }); + + test('standard modal - not displayed', ()=>{ + const modal = new ReactWrapper(mount(<Modal show={false} size='small'> + <Modal.Header><Modal.Title>Standard Modal</Modal.Title></Modal.Header> + <Modal.Body> + {MODAL_MESSAGE} + </Modal.Body> + <Modal.Footer actionButtonText='Yes' actionButtonClick={()=>{}}/> + </Modal>).instance().modalRef, true); + expect(modal.find(Modal.Body).length).toBe(0); + expect(modal.html()).toMatchSnapshot(); + }); + + test('alert modal', ()=>{ + const modal = new ReactWrapper(mount( + <Modal show type='alert' size='small'> + <Modal.Header type='alert'><Modal.Title>Title</Modal.Title></Modal.Header> + <Modal.Body> + {MODAL_MESSAGE} + </Modal.Body> + <Modal.Footer closeButtonText='Ok'/> + </Modal>).instance().modalRef, true); + expect(modal.find(Modal.Body).text()).toBe(MODAL_MESSAGE); + expect(modal.find('.sdc-modal-type-alert').length).toBe(1); + expect(modal.html()).toMatchSnapshot(); + }); + + test('custom modal', ()=>{ + const modal = new ReactWrapper(mount( + <Modal show type='custom'> + <Modal.Header type='custom'><Modal.Title>Title</Modal.Title></Modal.Header> + <Modal.Body> + {MODAL_MESSAGE} + </Modal.Body> + <Modal.Footer actionButtonText='Ok' actionButtonClick={()=>{}}/> + </Modal>).instance().modalRef, true); + expect(modal.find(Modal.Body).text()).toBe(MODAL_MESSAGE); + expect(modal.find('.sdc-modal-type-custom').length).toBe(1); + expect(modal.html()).toMatchSnapshot(); + }); + +}); diff --git a/test/react/ModalBody.spec.js b/test/react/ModalBody.spec.js new file mode 100644 index 0000000..d83c899 --- /dev/null +++ b/test/react/ModalBody.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ModalBody from '../../src/react/ModalBody.js'; + +import renderer from 'react-test-renderer'; + +describe('ModalBody', () => { + test('basic test', () => { + const header = renderer.create(<ModalBody/>).toJSON(); + expect(header).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/test/react/ModalFooter.spec.js b/test/react/ModalFooter.spec.js new file mode 100644 index 0000000..e4e3f5b --- /dev/null +++ b/test/react/ModalFooter.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ModalFooter from '../../src/react/ModalFooter.js'; + +import renderer from 'react-test-renderer'; + +describe('ModalFooter', () => { + test('basic test', () => { + const footer = renderer.create(<ModalFooter closeButtonText='Ok'/>).toJSON(); + expect(footer).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/test/react/ModalHeader.spec.js b/test/react/ModalHeader.spec.js new file mode 100644 index 0000000..e9d0602 --- /dev/null +++ b/test/react/ModalHeader.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ModalHeader from '../../src/react/ModalHeader.js'; + +import renderer from 'react-test-renderer'; + +describe('ModalHeader', () => { + test('basic test', () => { + const header = renderer.create(<ModalHeader/>).toJSON(); + expect(header).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/test/react/ModalTitle.spec.js b/test/react/ModalTitle.spec.js new file mode 100644 index 0000000..a8cf2a3 --- /dev/null +++ b/test/react/ModalTitle.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ModalTitle from '../../src/react/ModalTitle.js'; + +import renderer from 'react-test-renderer'; + +describe('ModalTitle', () => { + test('basic test', () => { + const header = renderer.create(<ModalTitle>Title</ModalTitle>).toJSON(); + expect(header).toMatchSnapshot(); + }); +});
\ No newline at end of file diff --git a/test/react/Panel.spec.js b/test/react/Panel.spec.js new file mode 100644 index 0000000..acae6a9 --- /dev/null +++ b/test/react/Panel.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; +import Panel from '../../src/react/Panel.js'; + +import renderer from 'react-test-renderer'; + +describe('Panel', () => { + test('Panel - Default', () => { + const panel = renderer.create(<Panel>Panel</Panel>).toJSON(); + expect(panel).toMatchSnapshot(); + }); +}); diff --git a/test/react/PopupMenu.spec.js b/test/react/PopupMenu.spec.js new file mode 100644 index 0000000..5014728 --- /dev/null +++ b/test/react/PopupMenu.spec.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PopupMenu from '../../src/react/PopupMenu.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class MyPopupForm extends React.Component { + constructor(props) { + super(props); + this.state = {position: {}}; + } + + handleClick(newPos) { + this.setState({position: newPos}); + } + + getPosition() { + return this.state.position; + } + + render() { + return ( + <form onClick={event => this.handleClick({ + x: event.pageX - event.target.offsetLeft, + y: event.pageY - event.target.offsetTop + })}> + <PopupMenu position={this.state.position} relative onMenuItemClick={() => {}} /> + </form> + ); + } +} + +describe('PopupMenu', () => { + test('check static menu rendered', () => { + const menu = renderer.create(<PopupMenu onMenuItemClick={() => {}}/>).toJSON(); + expect(menu).toMatchSnapshot(); + }); + + test('check relative menu rendered', () => { + const menu = renderer.create(<PopupMenu onMenuItemClick={()=> {}} position={{x: 10, y: 10}} relative/>).toJSON(); + expect(menu).toMatchSnapshot(); + }); + + test('check separator rendered', () => { + const separator = renderer.create(<PopupMenu.Separator/>).toJSON(); + expect(separator).toMatchSnapshot(); + }); + + test('check position changed', () => { + const menuForm = mount(<MyPopupForm />); + const position = menuForm.instance().getPosition(); + expect(position).toEqual({}); + expect(position).toEqual(menuForm.find('ul').props().style); + menuForm.find('form').simulate('click', { + target: {offsetLeft: 10, offsetTop: 20}, + pageX: 30, pageY: 50 + }); + const newPosition = menuForm.instance().getPosition(); + expect(newPosition).toEqual({x:20, y:30}); + expect({left: newPosition.x, top: newPosition.y}).toEqual(menuForm.find('ul').props().style); + }); +});
\ No newline at end of file diff --git a/test/react/PopupMenuItem.spec.js b/test/react/PopupMenuItem.spec.js new file mode 100644 index 0000000..9262319 --- /dev/null +++ b/test/react/PopupMenuItem.spec.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PopupMenuItem from '../../src/react/PopupMenuItem.js'; +import PopupMenu from '../../src/react/PopupMenu.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +describe('PopupMenuItem', () => { + test('check selected', () => { + const menuItem = renderer.create(<PopupMenuItem itemId='1' value='item 1' selected/>).toJSON(); + expect(menuItem).toMatchSnapshot(); + }); + + test('check disabled', () => { + const menuItem = renderer.create(<PopupMenuItem itemId='2' value='item 2' disabled/>).toJSON(); + expect(menuItem).toMatchSnapshot(); + }); + + test('check parent onclick invoked by child', () => { + const mockFunc = jest.fn(); + const menu = mount( + <PopupMenu onMenuItemClick={mockFunc}> + <PopupMenuItem itemId='1' value='item 1'/> + </PopupMenu> + ); + expect(menu.find('li')).toHaveLength(1); + menu.find('li').simulate('click'); + expect(mockFunc).toHaveBeenCalled(); + }); + + test('check custom onclick invoked by child', () => { + const mockParentFunc = jest.fn(); + const mockChildFunc = jest.fn(); + const menu = mount( + <PopupMenu onMenuItemClick={mockParentFunc}> + <PopupMenuItem itemId='1' value='item 1' onClick={mockChildFunc}/> + </PopupMenu> + ); + expect(menu.find('li')).toHaveLength(1); + menu.find('li').simulate('click'); + expect(mockChildFunc).toHaveBeenCalled(); + expect(mockParentFunc).not.toHaveBeenCalled(); + }); + + test('check no click handler if item is disabled', () => { + const mockFunc = jest.fn(); + const menu = mount( + <PopupMenu onMenuItemClick={mockFunc}> + <PopupMenuItem itemId='1' value='item 1' disabled/> + </PopupMenu> + ); + expect(menu.find('li')).toHaveLength(1); + menu.find('li').simulate('click'); + expect(mockFunc).not.toHaveBeenCalled(); + }); +});
\ No newline at end of file diff --git a/test/react/Portal.spec.js b/test/react/Portal.spec.js new file mode 100644 index 0000000..864b342 --- /dev/null +++ b/test/react/Portal.spec.js @@ -0,0 +1,10 @@ +import React from 'react'; +import {mount} from 'enzyme'; +import Portal from '../../src/react/Portal'; + +describe('Portal',()=>{ + test('portal basic', ()=>{ + const portal = mount(<Portal><strong>Message</strong></Portal>); + expect(portal.find(Portal).exists()).toBe(true); + }); +});
\ No newline at end of file diff --git a/test/react/Radio.spec.js b/test/react/Radio.spec.js new file mode 100644 index 0000000..39e33f7 --- /dev/null +++ b/test/react/Radio.spec.js @@ -0,0 +1,60 @@ +import React from 'react'; +import Radio from '../../src/react/Radio.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class RadioForm extends React.Component { + constructor(props) { + super(props); + this.state = {checked: false}; + + this.handleChange = this.handleChange.bind(this); + } + + handleChange(val) { + this.setState({checked: val}); + } + + getChecked() { + return this.radio.getChecked(); + } + + render() { + return ( + <form > + <Radio ref={(radio)=>{this.radio = radio;}} name='grp1' checked={this.state.checked} label='This is the radio label' value='1' onChange={this.handleChange} /> + </form> + ); + } +} + +describe('Radio', () => { + test('Radio - unchecked', () => { + const radio = renderer.create(<Radio name='grp4' label='This is the radio label' value='1' />).toJSON(); + expect(radio).toMatchSnapshot(); + }); + + test('Radio - disabled', () => { + const radio = renderer.create(<Radio name='grp2' disabled={true} label='This is the radio label' value='1' />).toJSON(); + expect(radio).toMatchSnapshot(); + }); + + test('Radio - checked state changes', () => { + const radio = mount(<RadioForm />); + expect(radio.instance().getChecked()).toEqual(false); + expect(radio.instance().getChecked()).toEqual(radio.find('input').props().checked); + radio.find('input').simulate('change', { target : { checked: true }}); + expect(radio.instance().getChecked()).toEqual(true); + expect(radio.instance().getChecked()).toEqual(radio.find('input').props().checked); + radio.find('input').simulate('change', { target : { checked: false }}); + expect(radio.instance().getChecked()).toEqual(false); + expect(radio.instance().getChecked()).toEqual(radio.find('input').props().checked); + }); + + test('Radio - returns its value', () => { + const radio = mount(<Radio label='This is the radio label' value='myVal' />); + expect(radio.instance().getValue()).toEqual('myVal'); + }); + +}); diff --git a/test/react/RadioGroup.spec.js b/test/react/RadioGroup.spec.js new file mode 100644 index 0000000..638b9c4 --- /dev/null +++ b/test/react/RadioGroup.spec.js @@ -0,0 +1,69 @@ +import React from 'react'; +import RadioGroup from '../../src/react/RadioGroup.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class RadioGroupForm extends React.Component { + constructor(props) { + super(props); + this.state = {value: undefined}; + this.handleChange = this.handleChange.bind(this); + } + + handleChange(val) { + this.setState({value: val}); + } + + getValue() { + return this.grp.getValue(); + } + + render() { + return ( + <form > + <RadioGroup name='grp1' title='Group A' value={this.state.value} ref={(grp) => { this.grp = grp;}} onChange={this.handleChange} data-test-id='grp1' + options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} /> + </form> + ); + } +} + +describe('RadioGroup', () => { + test('RadioGroup - basic rendering', () => { + const radio = renderer.create(<RadioGroup name='grp1' defaultValue='2' value='1' title='Group A' + onChange={()=>{}} data-test-id='grp1' + options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />).toJSON(); + expect(radio).toMatchSnapshot(); + }); + + test('RadioGroup - value overrides default value', () => { + const radio = mount(<RadioGroup name='grp1' defaultValue='2' value='1' title='Group A' + onChange={()=>{}} data-test-id='grp1' + options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />); + expect(radio.instance().getValue()).toEqual('1'); + }); + + test('RadioGroup - can have no value', () => { + const radio = mount(<RadioGroup name='grp1' title='Group A' + onChange={()=>{}} data-test-id='grp1' + options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />); + expect(radio.instance().getValue()).toEqual(undefined); + }); + + test('RadioGroup - can be rendered without title', () => { + const radio = mount(<RadioGroup name='grp1' + onChange={()=>{}} data-test-id='grp1' + options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />); + expect(radio.find('.sdc-radio-group__legend').length).toEqual(0); + }); + + test('RadioGroup - value changes', () => { + const radio = mount(<RadioGroupForm />); + expect(radio.instance().getValue()).toEqual(undefined); + radio.find('input[value="1"]').simulate('change', { target : { checked: true }}); + expect(radio.instance().getValue()).toEqual('1'); + radio.find('input[value="2"]').simulate('change', { target : { checked: true }}); + expect(radio.instance().getValue()).toEqual('2'); + }); +}); diff --git a/test/react/Tabs.spec.js b/test/react/Tabs.spec.js new file mode 100644 index 0000000..9906708 --- /dev/null +++ b/test/react/Tabs.spec.js @@ -0,0 +1,55 @@ +import React from 'react'; +import Tab from '../../src/react/Tab.js'; +import Tabs from '../../src/react/Tabs.js'; + +import renderer from 'react-test-renderer'; +import {mount} from 'enzyme'; + +class TabsForm extends React.Component { + constructor(props) { + super(props); + this.state = {tabId: '1'}; + + this.handleChange = this.handleChange.bind(this); + } + + handleChange(val) { + this.setState({tabId: val}); + } + + render() { + return ( + <form > + <fieldset disabled={this.props.disabled}> + <Tabs ref={(tabs) => this.tabsInst = tabs} activeTab={this.state.tabId} onTabClick={this.handleChange} > + <Tab title='tab 1' tabId='1' data-test-id='1'>Tab #1</Tab> + <Tab title='tab 2' tabId='2' data-test-id='2'>Tab #2</Tab> + <Tab title='tab 3' tabId='3' data-test-id='3'>Tab #3</Tab> + </Tabs> + </fieldset> + + </form> + ); + } +} + +describe('Tabs', () => { + + test('Tabs - basic rendering', () => { + const tabs = renderer.create(<TabsForm disabled={false} />).toJSON(); + expect(tabs).toMatchSnapshot(); + }); + + test('Tabs - when active tab id is changed, the respective tab is shown', () => { + const tabs = mount(<TabsForm disabled={false} />); + expect(tabs.instance().tabsInst.props.activeTab).toEqual('1'); + expect(tabs.find('.sdc-tab-content').text()).toEqual('Tab #1'); + expect(tabs.find('li[data-test-id="1"]').hasClass('sdc-tab-active')).toBeTruthy(); + tabs.find('li[data-test-id="2"]').simulate('click'); + expect(tabs.instance().tabsInst.props.activeTab).toEqual('2'); + expect(tabs.find('li[data-test-id="2"]').hasClass('sdc-tab-active')).toBeTruthy(); + expect(tabs.find('li[data-test-id="1"]').hasClass('sdc-tab-active')).not.toBeTruthy(); + expect(tabs.find('.sdc-tab-content').text()).toEqual('Tab #2'); + }); + +}); diff --git a/test/react/Tile.spec.js b/test/react/Tile.spec.js new file mode 100644 index 0000000..7ce98a8 --- /dev/null +++ b/test/react/Tile.spec.js @@ -0,0 +1,30 @@ +import React from 'react'; +import Tile from '../../src/react/Tile.js'; +import TileInfo from '../../src/react/TileInfo.js'; +import TileInfoLine from '../../src/react/TileInfoLine.js'; +import TileFooter from '../../src/react/TileFooter.js'; +import TileFooterCell from '../../src/react/TileFooterCell.js'; + +import renderer from 'react-test-renderer'; + +describe('Tile', () => { + test('Empty tile', () => { + const tile = renderer.create(<Tile />).toJSON(); + expect(tile).toMatchSnapshot(); + }); + + test('Tile with props', () => { + const tile = renderer.create(<Tile headerText='header' headerColor='blue' iconName='vlm' iconColor='blue' />).toJSON(); + expect(tile).toMatchSnapshot(); + }); + + test('Tile with content info', () => { + const tile = renderer.create(<Tile><TileInfo align='center'><TileInfoLine type='title'>Info</TileInfoLine></TileInfo></Tile>).toJSON(); + expect(tile).toMatchSnapshot(); + }); + + test('Tile with footer', () => { + const tile = renderer.create(<Tile><TileFooter align='center'><TileFooterCell>Footer</TileFooterCell></TileFooter></Tile>).toJSON(); + expect(tile).toMatchSnapshot(); + }); +}); diff --git a/test/react/__snapshots__/Accordion.spec.js.snap b/test/react/__snapshots__/Accordion.spec.js.snap new file mode 100644 index 0000000..fe75ada --- /dev/null +++ b/test/react/__snapshots__/Accordion.spec.js.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Accordion Accordion - Default 1`] = ` +<div + className="sdc-accordion " +> + <div + className="sdc-accordion-header" + data-test-id={undefined} + onClick={[Function]} + > + <div + className="svg-icon-wrapper bottom" + disabled={undefined} + onClick={undefined} + > + <svg /> + + </div> + <div + className="title" + > + Accordion + </div> + </div> + <div + className="sdc-accordion-body " + > + Accordion body + </div> +</div> +`; diff --git a/test/react/__snapshots__/Button.spec.js.snap b/test/react/__snapshots__/Button.spec.js.snap new file mode 100644 index 0000000..16e13bc --- /dev/null +++ b/test/react/__snapshots__/Button.spec.js.snap @@ -0,0 +1,163 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button Button - Default - Gray 1`] = ` +<button + className="sdc-button sdc-button__primary " + color="gray" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - Negative 1`] = ` +<button + className="sdc-button sdc-button__primary " + color="negative" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - Positive 1`] = ` +<button + className="sdc-button sdc-button__primary " + color="positive" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - Primary - Disabled 1`] = ` +<button + className="sdc-button sdc-button__primary " + disabled={true} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - Primary 1`] = ` +<button + className="sdc-button sdc-button__primary " + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - Warning 1`] = ` +<button + className="sdc-button sdc-button__primary " + color="warning" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Default - White 1`] = ` +<button + className="sdc-button sdc-button__primary " + color="white" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Link - Primary - Disabled 1`] = ` +<button + className="sdc-button sdc-button__link " + color="primary" + disabled={true} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Link - Primary - With Icon 1`] = ` +<button + className="sdc-button sdc-button__link plus" + color="primary" + disabled={false} + onClick={undefined} +> + <div + className="svg-icon-wrapper right" + disabled={undefined} + onClick={undefined} + > + <svg /> + <span + className="svg-icon-label " + > + Click Me + </span> + </div> +</button> +`; + +exports[`Button Button - Link - Primary 1`] = ` +<button + className="sdc-button sdc-button__link " + color="primary" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Outline - Gray 1`] = ` +<button + className="sdc-button sdc-button__outline " + color="gray" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Outline - Negative 1`] = ` +<button + className="sdc-button sdc-button__outline " + color="negative" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Outline - Positive 1`] = ` +<button + className="sdc-button sdc-button__outline " + color="positive" + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; + +exports[`Button Button - Outline - Primary 1`] = ` +<button + className="sdc-button sdc-button__outline " + disabled={false} + onClick={undefined} +> + Click Me +</button> +`; diff --git a/test/react/__snapshots__/Checkbox.spec.js.snap b/test/react/__snapshots__/Checkbox.spec.js.snap new file mode 100644 index 0000000..fa6239b --- /dev/null +++ b/test/react/__snapshots__/Checkbox.spec.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox Checkbox - disabled 1`] = ` +<div + className="sdc-checkbox " +> + <label> + <input + checked={false} + className="sdc-checkbox__input" + data-test-id={undefined} + disabled={true} + name={undefined} + onChange={[Function]} + type="checkbox" + value={undefined} + /> + <span + className="sdc-checkbox__label" + > + This is the checkbox label + </span> + </label> +</div> +`; + +exports[`Checkbox Checkbox - unchecked 1`] = ` +<div + className="sdc-checkbox " +> + <label> + <input + checked={false} + className="sdc-checkbox__input" + data-test-id={undefined} + disabled={undefined} + name={undefined} + onChange={[Function]} + type="checkbox" + value={undefined} + /> + <span + className="sdc-checkbox__label" + > + This is the checkbox label + </span> + </label> +</div> +`; diff --git a/test/react/__snapshots__/Checklist.spec.js.snap b/test/react/__snapshots__/Checklist.spec.js.snap new file mode 100644 index 0000000..707e910 --- /dev/null +++ b/test/react/__snapshots__/Checklist.spec.js.snap @@ -0,0 +1,165 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checklist Checklist - Default 1`] = ` +<div + className={undefined} +> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={true} + className="sdc-checkbox__input" + data-test-id="apple" + disabled={undefined} + name={undefined} + onChange={[Function]} + type="checkbox" + value="apple" + /> + <span + className="sdc-checkbox__label" + > + apple + </span> + </label> + </div> + </div> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={false} + className="sdc-checkbox__input" + data-test-id="banana" + disabled={undefined} + name={undefined} + onChange={[Function]} + type="checkbox" + value="banana" + /> + <span + className="sdc-checkbox__label" + > + banana + </span> + </label> + </div> + </div> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={true} + className="sdc-checkbox__input" + data-test-id="orange" + disabled={undefined} + name={undefined} + onChange={[Function]} + type="checkbox" + value="orange" + /> + <span + className="sdc-checkbox__label" + > + orange + </span> + </label> + </div> + </div> +</div> +`; + +exports[`Checklist Checklist - With disabled items 1`] = ` +<div + className={undefined} +> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={true} + className="sdc-checkbox__input" + data-test-id="apple" + disabled={true} + name={undefined} + onChange={[Function]} + type="checkbox" + value="apple" + /> + <span + className="sdc-checkbox__label" + > + apple + </span> + </label> + </div> + </div> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={false} + className="sdc-checkbox__input" + data-test-id="banana" + disabled={true} + name={undefined} + onChange={[Function]} + type="checkbox" + value="banana" + /> + <span + className="sdc-checkbox__label" + > + banana + </span> + </label> + </div> + </div> + <div + className="checkbox-item" + > + <div + className="sdc-checkbox " + > + <label> + <input + checked={false} + className="sdc-checkbox__input" + data-test-id="orange" + disabled={undefined} + name={undefined} + onChange={[Function]} + type="checkbox" + value="orange" + /> + <span + className="sdc-checkbox__label" + > + orange + </span> + </label> + </div> + </div> +</div> +`; diff --git a/test/react/__snapshots__/Input.spec.js.snap b/test/react/__snapshots__/Input.spec.js.snap new file mode 100644 index 0000000..62c3e2e --- /dev/null +++ b/test/react/__snapshots__/Input.spec.js.snap @@ -0,0 +1,179 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Input Input - default 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input " + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder={undefined} + readOnly={false} + type="text" + value={undefined} + /> +</div> +`; + +exports[`Input Input - error 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input error " + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder={undefined} + readOnly={false} + type="text" + value={undefined} + /> + <div + className="sdc-label__error" + > + <div + className="svg-icon-wrapper __negative right" + disabled={undefined} + onClick={undefined} + > + <svg /> + <span + className="svg-icon-label " + > + this is an error + </span> + </div> + </div> +</div> +`; + +exports[`Input Input - number 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input " + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder={undefined} + readOnly={false} + type="number" + value={undefined} + /> +</div> +`; + +exports[`Input Input - placeholder 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input " + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder="hint" + readOnly={false} + type="text" + value={undefined} + /> +</div> +`; + +exports[`Input Input - readonly 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label view-only " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input view-only" + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder={undefined} + readOnly={true} + type="text" + value={undefined} + /> +</div> +`; + +exports[`Input Input - required 1`] = ` +<div + className="sdc-input " +> + <label + className="sdc-input__label " + htmlFor="clickme" + > + label for input + </label> + <input + className="sdc-input__input " + data-test-id={undefined} + disabled={false} + id="clickme" + name="clickme" + onBlur={[Function]} + onChange={[Function]} + onKeyDown={[Function]} + placeholder={undefined} + readOnly={false} + type="text" + value={undefined} + /> +</div> +`; diff --git a/test/react/__snapshots__/Modal.spec.js.snap b/test/react/__snapshots__/Modal.spec.js.snap new file mode 100644 index 0000000..c22da8d --- /dev/null +++ b/test/react/__snapshots__/Modal.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Modal alert modal 1`] = `"<div><div class=\\"sdc-modal sm\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-alert\\"><div class=\\"sdc-alert__header sdc-modal__header\\"><div class=\\"svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom\\"><svg></svg><!-- react-text: 7 --><!-- /react-text --></div><div class=\\"title \\">Title</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom\\"><svg></svg><!-- react-text: 11 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary \\">Ok</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`; + +exports[`Modal custom modal 1`] = `"<div><div class=\\"sdc-modal md\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-custom\\"><div class=\\"sdc-custom__header sdc-modal__header\\"><div class=\\"title \\">Title</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom\\"><svg></svg><!-- react-text: 8 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary \\">Ok</button><button class=\\"sdc-button sdc-button__secondary \\">Close</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`; + +exports[`Modal standard modal - not displayed 1`] = `"<div></div>"`; + +exports[`Modal standard modal 1`] = `"<div><div class=\\"sdc-modal sm\\"><div class=\\"sdc-modal__wrapper sdc-modal-type-info\\"><div class=\\"sdc-info__header sdc-modal__header\\"><div class=\\"svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom\\"><svg></svg><!-- react-text: 7 --><!-- /react-text --></div><div class=\\"title \\">Standard Modal</div><div class=\\"svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom\\"><svg></svg><!-- react-text: 11 --><!-- /react-text --></div></div><div class=\\"sdc-modal__content \\">Message</div><div class=\\"sdc-modal__footer\\"><div><button class=\\"sdc-button sdc-button__primary \\">Yes</button><button class=\\"sdc-button sdc-button__secondary \\">Close</button></div></div></div></div><div class=\\"modal-background\\"></div></div>"`; diff --git a/test/react/__snapshots__/ModalBody.spec.js.snap b/test/react/__snapshots__/ModalBody.spec.js.snap new file mode 100644 index 0000000..d0fda4d --- /dev/null +++ b/test/react/__snapshots__/ModalBody.spec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalBody basic test 1`] = ` +<div + className="sdc-modal__content " +/> +`; diff --git a/test/react/__snapshots__/ModalFooter.spec.js.snap b/test/react/__snapshots__/ModalFooter.spec.js.snap new file mode 100644 index 0000000..ee98355 --- /dev/null +++ b/test/react/__snapshots__/ModalFooter.spec.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalFooter basic test 1`] = ` +<div + className="sdc-modal__footer" +> + <div> + <button + className="sdc-button sdc-button__primary " + disabled={false} + onClick={undefined} + > + Ok + </button> + </div> +</div> +`; diff --git a/test/react/__snapshots__/ModalHeader.spec.js.snap b/test/react/__snapshots__/ModalHeader.spec.js.snap new file mode 100644 index 0000000..8559925 --- /dev/null +++ b/test/react/__snapshots__/ModalHeader.spec.js.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalHeader basic test 1`] = ` +<div + className="sdc-info__header sdc-modal__header" +> + <div + className="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom" + disabled={undefined} + onClick={undefined} + > + <svg /> + + </div> + <div + className="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom" + disabled={undefined} + onClick={undefined} + > + <svg /> + + </div> +</div> +`; diff --git a/test/react/__snapshots__/ModalTitle.spec.js.snap b/test/react/__snapshots__/ModalTitle.spec.js.snap new file mode 100644 index 0000000..69a7734 --- /dev/null +++ b/test/react/__snapshots__/ModalTitle.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalTitle basic test 1`] = ` +<div + className="title " +> + Title +</div> +`; diff --git a/test/react/__snapshots__/Panel.spec.js.snap b/test/react/__snapshots__/Panel.spec.js.snap new file mode 100644 index 0000000..b31dda7 --- /dev/null +++ b/test/react/__snapshots__/Panel.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Panel Panel - Default 1`] = ` +<div + className="sdc-panel " +> + Panel +</div> +`; diff --git a/test/react/__snapshots__/PopupMenu.spec.js.snap b/test/react/__snapshots__/PopupMenu.spec.js.snap new file mode 100644 index 0000000..7a9060f --- /dev/null +++ b/test/react/__snapshots__/PopupMenu.spec.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PopupMenu check relative menu rendered 1`] = ` +<ul + className="sdc-menu-list relative" + style={ + Object { + "left": 10, + "top": 10, + } + } +/> +`; + +exports[`PopupMenu check separator rendered 1`] = ` +<li + className="separator" +/> +`; + +exports[`PopupMenu check static menu rendered 1`] = ` +<ul + className="sdc-menu-list " + style={Object {}} +/> +`; diff --git a/test/react/__snapshots__/PopupMenuItem.spec.js.snap b/test/react/__snapshots__/PopupMenuItem.spec.js.snap new file mode 100644 index 0000000..3334afb --- /dev/null +++ b/test/react/__snapshots__/PopupMenuItem.spec.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PopupMenuItem check disabled 1`] = ` +<li + className="sdc-menu-item disabled" + onClick={[Function]} +> + item 2 +</li> +`; + +exports[`PopupMenuItem check selected 1`] = ` +<li + className="sdc-menu-item selected" + onClick={[Function]} +> + item 1 +</li> +`; diff --git a/test/react/__snapshots__/Radio.spec.js.snap b/test/react/__snapshots__/Radio.spec.js.snap new file mode 100644 index 0000000..a878d3a --- /dev/null +++ b/test/react/__snapshots__/Radio.spec.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Radio Radio - disabled 1`] = ` +<div + className="sdc-radio " +> + <label> + <input + checked={false} + className="sdc-radio__input" + data-test-id={undefined} + disabled={true} + name="grp2" + onChange={[Function]} + type="radio" + value="1" + /> + <span + className="sdc-radio__label" + > + This is the radio label + </span> + </label> +</div> +`; + +exports[`Radio Radio - unchecked 1`] = ` +<div + className="sdc-radio " +> + <label> + <input + checked={false} + className="sdc-radio__input" + data-test-id={undefined} + disabled={undefined} + name="grp4" + onChange={[Function]} + type="radio" + value="1" + /> + <span + className="sdc-radio__label" + > + This is the radio label + </span> + </label> +</div> +`; diff --git a/test/react/__snapshots__/RadioGroup.spec.js.snap b/test/react/__snapshots__/RadioGroup.spec.js.snap new file mode 100644 index 0000000..caf729d --- /dev/null +++ b/test/react/__snapshots__/RadioGroup.spec.js.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RadioGroup RadioGroup - basic rendering 1`] = ` +<div + className="sdc-radio-group " + data-test-id="grp1" +> + <label + className="sdc-radio-group__legend" + > + Group A + </label> + <div + className="sdc-radio-group__radios" + > + <div + className="sdc-radio " + > + <label> + <input + checked={true} + className="sdc-radio__input" + data-test-id="grp1_1" + disabled={undefined} + name="grp1" + onChange={[Function]} + type="radio" + value="1" + /> + <span + className="sdc-radio__label" + > + option 1 + </span> + </label> + </div> + <div + className="sdc-radio " + > + <label> + <input + checked={false} + className="sdc-radio__input" + data-test-id="grp1_2" + disabled={undefined} + name="grp1" + onChange={[Function]} + type="radio" + value="2" + /> + <span + className="sdc-radio__label" + > + option 2 + </span> + </label> + </div> + </div> +</div> +`; diff --git a/test/react/__snapshots__/Tabs.spec.js.snap b/test/react/__snapshots__/Tabs.spec.js.snap new file mode 100644 index 0000000..9a4d0a1 --- /dev/null +++ b/test/react/__snapshots__/Tabs.spec.js.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tabs Tabs - basic rendering 1`] = ` +<form> + <fieldset + disabled={false} + > + <div + className="sdc-tabs sdc-tabs-menu " + > + <ul + className="sdc-tabs-list" + role="tablist" + > + <li + className="sdc-tab sdc-tab-active " + data-test-id="1" + disabled={undefined} + onClick={[Function]} + role="tab" + > + tab 1 + </li> + <li + className="sdc-tab " + data-test-id="2" + disabled={undefined} + onClick={[Function]} + role="tab" + > + tab 2 + </li> + <li + className="sdc-tab " + data-test-id="3" + disabled={undefined} + onClick={[Function]} + role="tab" + > + tab 3 + </li> + </ul> + <div + className="sdc-tab-content" + role="tabpanel" + > + Tab #1 + </div> + </div> + </fieldset> +</form> +`; diff --git a/test/react/__snapshots__/Tile.spec.js.snap b/test/react/__snapshots__/Tile.spec.js.snap new file mode 100644 index 0000000..e38ffa2 --- /dev/null +++ b/test/react/__snapshots__/Tile.spec.js.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tile Empty tile 1`] = ` +<div + className="sdc-tile " + data-test-id={undefined} + onClick={undefined} +> + <div + className="sdc-tile-header " + /> + <div + className="sdc-tile-content" + > + <div + className="sdc-tile-content-icon " + /> + </div> +</div> +`; + +exports[`Tile Tile with content info 1`] = ` +<div + className="sdc-tile " + data-test-id={undefined} + onClick={undefined} +> + <div + className="sdc-tile-header " + /> + <div + className="sdc-tile-content" + > + <div + className="sdc-tile-content-icon " + /> + <div + className="sdc-tile-content-info centered" + > + <div + className="sdc-tile-info-line title " + data-test-id={undefined} + > + Info + </div> + </div> + </div> +</div> +`; + +exports[`Tile Tile with footer 1`] = ` +<div + className="sdc-tile " + data-test-id={undefined} + onClick={undefined} +> + <div + className="sdc-tile-header " + /> + <div + className="sdc-tile-content" + > + <div + className="sdc-tile-content-icon " + /> + </div> + <div + className="sdc-tile-footer centered" + > + <span + className="sdc-tile-footer-cell " + data-test-id={undefined} + > + Footer + </span> + </div> +</div> +`; + +exports[`Tile Tile with props 1`] = ` +<div + className="sdc-tile " + data-test-id={undefined} + onClick={undefined} +> + <div + className="sdc-tile-header blue" + > + header + </div> + <div + className="sdc-tile-content" + > + <div + className="sdc-tile-content-icon blue" + > + <div + className="svg-icon-wrapper bottom" + disabled={undefined} + onClick={undefined} + > + <svg /> + + </div> + </div> + </div> +</div> +`; diff --git a/test/react/utils/htmlLoader.js b/test/react/utils/htmlLoader.js new file mode 100644 index 0000000..fbdfbd8 --- /dev/null +++ b/test/react/utils/htmlLoader.js @@ -0,0 +1,7 @@ +const htmlLoader = require('html-loader'); + +module.exports = { + process(src) { + return htmlLoader(src); + } +}; diff --git a/test/react/utils/svgMock.js b/test/react/utils/svgMock.js new file mode 100644 index 0000000..2d6ed81 --- /dev/null +++ b/test/react/utils/svgMock.js @@ -0,0 +1,3 @@ +import React from 'react'; + +module.exports = () => <svg />;
\ No newline at end of file |