summaryrefslogtreecommitdiffstats
path: root/test/react
diff options
context:
space:
mode:
Diffstat (limited to 'test/react')
-rw-r--r--test/react/Accordion.spec.js11
-rw-r--r--test/react/Button.spec.js77
-rw-r--r--test/react/Checkbox.spec.js60
-rw-r--r--test/react/Checklist.spec.js64
-rw-r--r--test/react/Input.spec.js69
-rw-r--r--test/react/Modal.spec.js68
-rw-r--r--test/react/ModalBody.spec.js11
-rw-r--r--test/react/ModalFooter.spec.js11
-rw-r--r--test/react/ModalHeader.spec.js11
-rw-r--r--test/react/ModalTitle.spec.js11
-rw-r--r--test/react/Panel.spec.js11
-rw-r--r--test/react/PopupMenu.spec.js62
-rw-r--r--test/react/PopupMenuItem.spec.js56
-rw-r--r--test/react/Portal.spec.js10
-rw-r--r--test/react/Radio.spec.js60
-rw-r--r--test/react/RadioGroup.spec.js69
-rw-r--r--test/react/Tabs.spec.js55
-rw-r--r--test/react/Tile.spec.js30
-rw-r--r--test/react/__snapshots__/Accordion.spec.js.snap32
-rw-r--r--test/react/__snapshots__/Button.spec.js.snap163
-rw-r--r--test/react/__snapshots__/Checkbox.spec.js.snap49
-rw-r--r--test/react/__snapshots__/Checklist.spec.js.snap165
-rw-r--r--test/react/__snapshots__/Input.spec.js.snap179
-rw-r--r--test/react/__snapshots__/Modal.spec.js.snap9
-rw-r--r--test/react/__snapshots__/ModalBody.spec.js.snap7
-rw-r--r--test/react/__snapshots__/ModalFooter.spec.js.snap17
-rw-r--r--test/react/__snapshots__/ModalHeader.spec.js.snap24
-rw-r--r--test/react/__snapshots__/ModalTitle.spec.js.snap9
-rw-r--r--test/react/__snapshots__/Panel.spec.js.snap9
-rw-r--r--test/react/__snapshots__/PopupMenu.spec.js.snap26
-rw-r--r--test/react/__snapshots__/PopupMenuItem.spec.js.snap19
-rw-r--r--test/react/__snapshots__/Radio.spec.js.snap49
-rw-r--r--test/react/__snapshots__/RadioGroup.spec.js.snap60
-rw-r--r--test/react/__snapshots__/Tabs.spec.js.snap52
-rw-r--r--test/react/__snapshots__/Tile.spec.js.snap108
-rw-r--r--test/react/utils/htmlLoader.js7
-rw-r--r--test/react/utils/svgMock.js3
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