Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

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