Merge pull request #18 from GotPPay/tests-for-import-from-source

Tests for components related to 'import from source' part

web/package.json

@@ -10,7 +10,9 @@
     "react-md": "^1.2.8",
     "react-popup": "^0.9.1",
     "react-scripts": "1.0.17",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "node-sass": "^4.7.2",
+    "npm-run-all": "^4.1.2"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
@@ -24,8 +26,13 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "node-sass": "^4.7.2",
+    "babel-jest": "^22.4.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.3",
+    "jest": "^20.0.3",
+    "jest-enzyme": "^6.0.0",
     "nodemon": "^1.12.1",
-    "npm-run-all": "^4.1.2"
+    "react-test-renderer": "^16.3.0"
   }
 }

web/src/App.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});

web/src/components/Contact.js

@@ -40,8 +40,10 @@ class Contact extends Component {
   }
 
   handleEmailEdit(e){
-    if (e.length === EMAIL_MAX_LENGTH) return;
+    const isEmailValid = e.length < EMAIL_MAX_LENGTH;
-    this.setState({contactEmail: e});
+    if (isEmailValid){
+      this.setState({contactEmail: e});
+    }
   }
 }
 

web/src/components/IntentDetails.js

@@ -72,7 +72,7 @@ class IntentDetails extends Component {
                 rightIcon={
                   <SVGIcon
                     onClick={() => {
-                      this.deleteQuestion (question);
+                      this.deleteQuestion (index);
                     }}
                   >
                     {' '}
@@ -146,50 +146,57 @@ class IntentDetails extends Component {
     this.setState ({intent: newIntent});
   }
 
-  deleteQuestion (question) {
+  deleteQuestion (index) {
     if (this.state.intent.questions.length > 1) {
       let newIntent = this.state.intent;
-      let removeId = newIntent.questions.indexOf (question);
+      if (index >= 0 && index < newIntent.questions.length) newIntent.questions.splice (index, 1);
-      if (removeId !== -1) newIntent.questions.splice (removeId, 1);
-
       this.setState ({intent: newIntent});
     }
   }
 
   handleQuestionEdit (e, index) {
-    if (e.length === QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
+    const isQuestionValid = e.length < QUESTION_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isQuestionValid){
-    newIntent.questions[index] = e;
+      let newIntent = this.state.intent;
-    this.setState ({intent: newIntent});
+      newIntent.questions[index] = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
   handleIntentExplanationEdit (e, index) {
-    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
+    const isExplanationValid = e.length < INTENT_EXPLANATION_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-      return;
+    if (isExplanationValid){
-    let newIntent = this.state.intent;
+      let newIntent = this.state.intent;
-    newIntent.intentExplanation = e;
+      newIntent.intentExplanation = e;
-    this.setState ({intent: newIntent});
+      this.setState ({intent: newIntent});
+    }
   }
 
   handleAnswerEdit (e) {
-    if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
+    const isAnswerValid = e.length < ANSWER_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isAnswerValid){
-    newIntent.answer = e;
+      let newIntent = this.state.intent;
-    this.setState ({intent: newIntent});
+      newIntent.answer = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
   handleAnswerSourceEdit (e) {
-    if (e.length === ANSWER_MAX_LENGTH) return;
+    const isAnswerSourceValid = e.length < ANSWER_MAX_LENGTH; 
-    let newIntent = this.state.intent;
+    if (isAnswerSourceValid){
-    newIntent.externalAnswerSource = e;
+      let newIntent = this.state.intent;
-    this.setState ({intent: newIntent});
+      newIntent.externalAnswerSource = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
   handleIntentNameEdit (e) {
-    if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
+    const isIntentNameValid = e.length < INTENT_NAME_MAX_LENGTH && /^[a-z]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isIntentNameValid){
-    newIntent.intentName = e;
+      let newIntent = this.state.intent;
-    this.setState ({intent: newIntent});
+      newIntent.intentName = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
   handleExternalSourceSave (answerType) {

web/src/components/LaunchRequest.js

@@ -52,13 +52,17 @@ class LaunchRequest extends Component {
   }
 
   handleNameEdit(e){
-    if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/.test(e))) return; 
+    const isInvocationNameValid = e.length < INVOCATION_NAME_MAX_LENGTH && (/^[a-z,.' ]*$/.test(e));
-    this.setState({invocationName: e});
+    if (isInvocationNameValid) { 
+      this.setState({invocationName: e});
+    }
   }
 
   handleAnswerEdit(e){
-    if (e.length === INVOCATION_ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
+    const isInvocationAnswerValid = e.length < INVOCATION_ANSWER_MAX_LENGTH && (/^[a-z,.' ]*$/i.test(e));
-    this.setState({invocationAnswer: e});
+    if (isInvocationAnswerValid){
+      this.setState({invocationAnswer: e});
+    }
   }
 }
 

web/src/components/__tests__/AnswerSource.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {Button} from 'react-md';
+import {shallow, mount} from 'enzyme';
+import AnswerSource from '../AnswerSource';
+import {ANSWER_TYPE} from '../../config/constants';
+
+it ('renders without crashing', () => {
+  shallow (<AnswerSource />);
+});
+
+describe ('functional tests', () => {
+  let wrapper;
+  beforeEach (() => {
+    const onSaveAnswerTypeFunction = jest.fn ();
+    wrapper = mount (
+      <AnswerSource onSaveAnswerType={onSaveAnswerTypeFunction} />
+    );
+    wrapper.setState ({
+      isModalOpen: false,
+      answerType: 0,
+    });
+  });
+
+  it ('snapshot', ()=>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders only a button', () => {
+    expect (wrapper.first ().text ()).toEqual ('Answer type');
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (false);
+  });
+
+  it ('answer type button click opens modal form', () => {
+    expect (wrapper.find ('AnswerSourceFormA').exists ()).toEqual (false);
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    expect (wrapper.state ().isModalOpen).toEqual (true);
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (true);
+    expect (wrapper.find ('button').length).toBe (3);
+    expect (wrapper.find ('button').first ().text ()).toEqual ('Answer type');
+  });
+
+  it ('save button changes answerType value in state and closes the form ', () => {
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    const saveButton = wrapper.find ('button').at (2);
+    const optionControl = wrapper.find ('SelectionControlGroup');
+    expect (saveButton.text ()).toEqual ('Save');
+    expect (optionControl.exists ()).toEqual (true);
+    optionControl.simulate ('change', {
+      target: {value: String (ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)},
+    });
+    saveButton.simulate ('click');
+    expect (wrapper.state ().answerType).toBe (
+      ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS
+    );
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    expect (wrapper.find ('button').length).toBe (1);
+  });
+});

web/src/components/__tests__/IntentDetails.test.js

@@ -0,0 +1,318 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import IntentDetails from '../IntentDetails';
+import {
+  QUESTION_MAX_LENGTH,
+  ANSWER_MAX_LENGTH,
+  INTENT_NAME_MAX_LENGTH,
+  INTENT_EXPLANATION_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../../config/constants';
+
+it ('renders without crashing', () => {
+  const dummyIntent = {
+    questions: ['q1', 'q2'],
+  };
+  shallow (<IntentDetails selectedIntent={dummyIntent} />);
+});
+
+describe('complete testing', () => {
+
+  let wrapper;
+  let newIntent;
+  beforeEach(()=>{
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders correctly for new intent input when empty intent is sent', () => {
+    expect(wrapper.find('TextField').length).toBe(4);
+    expect(wrapper.find('Button').length).toBe(4);
+  
+    expect(wrapper.find('TextField').at(0).props().id).toEqual('intent explanation');
+    expect(wrapper.find('TextField').at(1).props().id).toEqual('intent name');
+    expect(wrapper.find('TextField').at(2).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(3).props().id).toEqual('intent answer');
+  
+    expect(wrapper.find('Button').at(0).props().children).toEqual('add');
+    expect(wrapper.find('Button').at(1).props().children).toEqual('Answer type');
+    expect(wrapper.find('Button').at(2).props().children).toEqual('Save');
+    expect(wrapper.find('Button').at(3).props().children).toEqual('Delete');
+  });
+
+  it ('receives correct props for non empty intent with predefined answer', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('receives correct props for non empty intent with external source for answer', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: 'http://sarajevotimes.com',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('adds text field when add button is clicked', () => {
+    const addButton = wrapper.find('button').at(0);
+    addButton.simulate('click');
+    expect(wrapper.find('TextField').length).toBe(5);
+    addButton.simulate('click');
+    expect(wrapper.find('TextField').length).toBe(6);
+    
+    expect(wrapper.find('TextField').at(0).props().id).toEqual('intent explanation');
+    expect(wrapper.find('TextField').at(1).props().id).toEqual('intent name');
+    expect(wrapper.find('TextField').at(2).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(3).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(4).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(5).props().id).toEqual('intent answer');
+
+    expect(wrapper.state('intent').questions.length).toBe(3);
+    
+  });
+
+  it ('removes correct text field when delete button on text field is clicked', () => {
+    const addButton = wrapper.find('button').at(0);
+    addButton.simulate('click');
+    addButton.simulate('click');
+    
+    let firstQuestionTextField = wrapper.find('TextField').at(2);
+    let secondQuestionTextField = wrapper.find('TextField').at(3);
+    let thirdQuestionTextField = wrapper.find('TextField').at(4);
+
+    firstQuestionTextField.instance().props.onChange('first question');
+    secondQuestionTextField.instance().props.onChange('second question');
+    thirdQuestionTextField.instance().props.onChange('third question');
+    
+    expect(firstQuestionTextField.instance().value).toEqual('first question');
+    expect(secondQuestionTextField.instance().value).toEqual('second question');
+    expect(thirdQuestionTextField.instance().value).toEqual('third question');
+    expect(wrapper.state('intent').questions.length).toBe(3);
+
+    const rightIcon = secondQuestionTextField.props().rightIcon;
+    rightIcon.props.onClick(secondQuestionTextField.props().key);
+    
+    expect(wrapper.state('intent').questions.length).toBe(2);
+    expect(secondQuestionTextField.instance().value).toEqual('third question');
+    expect(thirdQuestionTextField.instance()._field._field).toBeNull();
+  });
+
+  it ('does not remove text field when it is only one left', () => {
+    let firstQuestionTextField = wrapper.find('TextField').at(2);
+
+    firstQuestionTextField.instance().props.onChange('first question');
+    
+    expect(firstQuestionTextField.props().id).toEqual('intent question');
+    expect(wrapper.state('intent').questions.length).toBe(1);
+    
+    const rightIcon = firstQuestionTextField.props().rightIcon;
+    rightIcon.props.onClick(firstQuestionTextField.props().key);
+
+    expect(wrapper.state('intent').questions.length).toBe(1);
+    expect(firstQuestionTextField.instance().value).toEqual('first question');
+  });
+
+  it ('accepts text without special characters for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let validExplanationText = 'to get latest news, say ';
+    explanationTextField.instance().props.onChange(validExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual(validExplanationText);
+    expect(explanationTextField.instance().value).toEqual(validExplanationText);
+  });
+
+  it ('does not accept text with special characters for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let invalidExplanationText = '554to get latest news, say #$ ';
+    explanationTextField.instance().props.onChange(invalidExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual('');
+    expect(explanationTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let invalidExplanationText = new Array(INTENT_EXPLANATION_MAX_LENGTH + 10).join('A');
+    explanationTextField.instance().props.onChange(invalidExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual('');
+    expect(explanationTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let validIntentNameText = 'intentName';
+    intentNameTextField.instance().props.onChange(validIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual(validIntentNameText);
+    expect(intentNameTextField.instance().value).toEqual(validIntentNameText);
+  });
+
+  it ('does not accept text with speces characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = 'intentName with space';
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept text with special characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = 'intentName23!';
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = new Array(INTENT_NAME_MAX_LENGTH + 10).join('A');
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let validQuestionText = 'read me latest news'
+    questionTextField.instance().props.onChange(validQuestionText);
+    expect(wrapper.state('intent').questions).toEqual([validQuestionText]);
+    expect(questionTextField.instance().value).toEqual(validQuestionText);
+  });
+
+  it ('does not accept text with special characters for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let invalidQuestionText = 'read m3 1at35t news #'
+    questionTextField.instance().props.onChange(invalidQuestionText);
+    expect(wrapper.state('intent').questions).toEqual(['']);
+    expect(questionTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let invalidQuestionText = new Array(QUESTION_MAX_LENGTH + 10).join('A');
+    questionTextField.instance().props.onChange(invalidQuestionText);
+    expect(wrapper.state('intent').questions).toEqual(['']);
+    expect(questionTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let validAnswerText = 'this is valid answer.'
+    answerTextField.instance().props.onChange(validAnswerText);
+    expect(wrapper.state('intent').answer).toEqual(validAnswerText);
+    expect(answerTextField.instance().value).toEqual(validAnswerText);
+  });
+
+  it ('does not accept text with special characters for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = 'this is invalid answer.0123'
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = new Array(ANSWER_MAX_LENGTH + 10).join('A');
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text for external source as answer', () => {
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+
+    let answerTextField = wrapper.find('TextField').at(3);
+    let validAnswerText = 'http://sarajevotimes.com'
+    answerTextField.instance().props.onChange(validAnswerText);
+    expect(wrapper.state('intent').externalAnswerSource).toEqual(validAnswerText);
+    expect(answerTextField.instance().value).toEqual(validAnswerText);
+  });
+
+  it ('does not accept too long text for external source as answer', () => {
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = new Array(ANSWER_MAX_LENGTH + 10).join('A');
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('calls function with correct data on save button click', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'Dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+    const onSaveFunction = jest.fn();
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} onSaveIntentClick={onSaveFunction} />);
+    wrapper.find('Button').at(2).simulate('click');
+    expect(onSaveFunction).toBeCalledWith(newIntent);
+  });
+
+  it ('calls function with correct data on delete button click', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'Dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+    const onSaveFunction = jest.fn();
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} onDeleteIntentClick={onSaveFunction} />);
+    wrapper.find('Button').at(3).simulate('click');
+    expect(onSaveFunction).toBeCalledWith(newIntent);
+  });
+
+  
+});

web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functional tests snapshot 1`] = `
+<AnswerSource
+  onSaveAnswerType={[Function]}
+>
+  <div>
+    <withInk(withTooltip(Button))
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Answer type
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+  </div>
+</AnswerSource>
+`;

web/src/components/__tests__/__snapshots__/IntentDetails.test.js.snap

@@ -0,0 +1,898 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`complete testing snapshot 1`] = `
+<IntentDetails
+  selectedIntent={
+    Object {
+      "answer": "",
+      "answerType": 0,
+      "externalAnswerSource": "",
+      "intentExplanation": "",
+      "intentName": "",
+      "questions": Array [
+        "",
+      ],
+    }
+  }
+>
+  <div
+    className="RightPanelBox"
+  >
+    <div
+      className="QuestionBox"
+    >
+      <h5
+        className="PanelSubTitle"
+      >
+         
+        In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
+      </h5>
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent explanation"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={70}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        placeholder="To ask us about our services, say "
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent explanation"
+            iconOffset={false}
+            key="label"
+          />
+          <InputField
+            className=""
+            fullWidth={true}
+            id="intent explanation"
+            inlineIndicator={false}
+            key="field"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="To ask us about our services, say "
+            type="text"
+            value=""
+          >
+            <input
+              className="md-text-field md-text-field--margin md-full-width md-text"
+              id="intent explanation"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder="To ask us about our services, say "
+              type="text"
+              value=""
+            />
+          </InputField>
+          <TextFieldDivider
+            active={false}
+            error={false}
+            key="text-divider"
+            lineDirection="center"
+          >
+            <Divider
+              className="md-divider--text-field md-divider--expand-from-center"
+            >
+              <hr
+                className="md-divider md-divider--text-field md-divider--expand-from-center"
+              />
+            </Divider>
+          </TextFieldDivider>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={70}
+            rightIcon={false}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 70
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+      <br />
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent name"
+        label="Question name"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={30}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent name"
+            iconOffset={false}
+            key="label"
+            label="Question name"
+          >
+            <label
+              className="md-floating-label md-floating-label--inactive md-floating-label--inactive-sized md-text--secondary"
+              htmlFor="intent name"
+            >
+              Question name
+            </label>
+          </FloatingLabel>
+          <InputField
+            className=""
+            fullWidth={true}
+            id="intent name"
+            inlineIndicator={false}
+            key="field"
+            label="Question name"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder={null}
+            type="text"
+            value=""
+          >
+            <input
+              className="md-text-field md-text-field--floating-margin md-full-width md-text"
+              id="intent name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder={null}
+              type="text"
+              value=""
+            />
+          </InputField>
+          <TextFieldDivider
+            active={false}
+            error={false}
+            key="text-divider"
+            lineDirection="center"
+          >
+            <Divider
+              className="md-divider--text-field md-divider--expand-from-center"
+            >
+              <hr
+                className="md-divider md-divider--text-field md-divider--expand-from-center"
+              />
+            </Divider>
+          </TextFieldDivider>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={30}
+            rightIcon={false}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 30
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+    </div>
+    <h5
+      className="QuestionTitle"
+    >
+      Question variants
+    </h5>
+    <div
+      className="QuestionBox"
+      key="0"
+    >
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent question"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={150}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        placeholder="Question"
+        rightIcon={
+          <SVGIcon
+            focusable="false"
+            onClick={[Function]}
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+             
+            <path
+              d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+              fill="#000000"
+            />
+             
+          </SVGIcon>
+        }
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent question"
+            iconOffset={false}
+            key="label"
+          />
+          <div
+            className="md-text-field-icon-container"
+            key="icon-divider"
+          >
+            <div
+              className="md-text-field-divider-container md-text-field-divider-container--grow"
+              key="divider-container"
+            >
+              <InputField
+                className=""
+                fullWidth={true}
+                id="intent question"
+                inlineIndicator={false}
+                key="field"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="Question"
+                type="text"
+                value=""
+              >
+                <input
+                  className="md-text-field md-text-field--margin md-full-width md-text"
+                  id="intent question"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Question"
+                  type="text"
+                  value=""
+                />
+              </InputField>
+              <TextFieldDivider
+                active={false}
+                error={false}
+                key="text-divider"
+                lineDirection="center"
+              >
+                <Divider
+                  className="md-divider--text-field md-divider--expand-from-center"
+                >
+                  <hr
+                    className="md-divider md-divider--text-field md-divider--expand-from-center"
+                  />
+                </Divider>
+              </TextFieldDivider>
+            </div>
+            <SVGIcon
+              className="md-text-field-icon md-text-field-icon--positioned"
+              error={false}
+              focusable="false"
+              key="icon-right"
+              onClick={[Function]}
+              primary={false}
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <svg
+                aria-labelledby={null}
+                className="md-icon md-text-field-icon md-text-field-icon--positioned"
+                focusable="false"
+                onClick={[Function]}
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                 
+                <path
+                  d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+                  fill="#000000"
+                />
+                 
+              </svg>
+            </SVGIcon>
+          </div>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={150}
+            rightIcon={true}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-text-field-message-container--right-icon-offset md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 150
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+    </div>
+    <withInk(withTooltip(Button))
+      className="AddQuestionVariantButton"
+      icon={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        className="AddQuestionVariantButton"
+        icon={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          className="AddQuestionVariantButton"
+          fixedPosition="br"
+          icon={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--icon md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block AddQuestionVariantButton"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            <FontIcon
+              iconClassName="material-icons"
+              inherit={true}
+            >
+              <i
+                className="md-icon material-icons md-text--inherit"
+              >
+                add
+              </i>
+            </FontIcon>
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+    <AnswerSource
+      answerType={0}
+      className="AnswerTypeButton"
+      onSaveAnswerType={[Function]}
+    >
+      <div>
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          primary={true}
+        >
+          <withTooltip(Button)
+            flat={true}
+            ink={
+              <InkContainer
+                className={undefined}
+                disabledInteractions={undefined}
+                inkClassName={undefined}
+                inkStyle={undefined}
+                pulse={undefined}
+                style={undefined}
+                transitionEnterTimeout={450}
+                transitionLeaveTimeout={300}
+                transitionOverlap={150}
+                waitForInkTransition={undefined}
+              />
+            }
+            onClick={[Function]}
+            primary={true}
+          >
+            <Button
+              fixedPosition="br"
+              flat={true}
+              iconBefore={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              primary={true}
+              type="button"
+            >
+              <button
+                className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchStart={[Function]}
+                type="button"
+              >
+                <InkContainer
+                  key="ink-container"
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                >
+                  <TransitionGroup
+                    childFactory={[Function]}
+                    className="md-ink-container"
+                    component="div"
+                  >
+                    <div
+                      className="md-ink-container"
+                    />
+                  </TransitionGroup>
+                </InkContainer>
+                Answer type
+              </button>
+            </Button>
+          </withTooltip(Button)>
+        </withInk(withTooltip(Button))>
+      </div>
+    </AnswerSource>
+    <AnswerTextBox
+      answer=""
+      answerType={0}
+      externalAnswerSource=""
+      handleAnswerEdit={[Function]}
+      handleAnswerSourceEdit={[Function]}
+    >
+      <div
+        className="QuestionBox"
+      >
+        <TextField
+          className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+          fullWidth={true}
+          id="intent answer"
+          label="Answer"
+          leftIconStateful={true}
+          lineDirection="center"
+          maxLength={150}
+          onChange={[Function]}
+          passwordIcon={
+            <FontIcon
+              iconClassName="material-icons"
+            >
+              remove_red_eye
+            </FontIcon>
+          }
+          placeholder="Answer"
+          rightIconStateful={true}
+          type="text"
+          value=""
+        >
+          <div
+            className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onClick={[Function]}
+          >
+            <FloatingLabel
+              active={false}
+              error={false}
+              floating={false}
+              htmlFor="intent answer"
+              iconOffset={false}
+              key="label"
+              label="Answer"
+            >
+              <label
+                className="md-floating-label md-floating-label--inactive md-floating-label--inactive-sized md-text--secondary"
+                htmlFor="intent answer"
+              >
+                Answer
+              </label>
+            </FloatingLabel>
+            <InputField
+              className=""
+              fullWidth={true}
+              id="intent answer"
+              inlineIndicator={false}
+              key="field"
+              label="Answer"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder={null}
+              type="text"
+              value=""
+            >
+              <input
+                className="md-text-field md-text-field--floating-margin md-full-width md-text"
+                id="intent answer"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder={null}
+                type="text"
+                value=""
+              />
+            </InputField>
+            <TextFieldDivider
+              active={false}
+              error={false}
+              key="text-divider"
+              lineDirection="center"
+            >
+              <Divider
+                className="md-divider--text-field md-divider--expand-from-center"
+              >
+                <hr
+                  className="md-divider md-divider--text-field md-divider--expand-from-center"
+                />
+              </Divider>
+            </TextFieldDivider>
+            <TextFieldMessage
+              active={false}
+              currentLength={0}
+              error={false}
+              key="message"
+              leftIcon={false}
+              maxLength={150}
+              rightIcon={false}
+            >
+              <div
+                className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+              >
+                <Message
+                  active={false}
+                  key="message"
+                />
+                <Message
+                  active={false}
+                  className="md-text-field-message--counter"
+                  key="counter"
+                >
+                  <div
+                    aria-hidden={true}
+                    className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                  >
+                    0 / 150
+                  </div>
+                </Message>
+              </div>
+            </TextFieldMessage>
+          </div>
+        </TextField>
+      </div>
+    </AnswerTextBox>
+    <withInk(withTooltip(Button))
+      className="IntentDetailsButton-firstInRow"
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+      swapTheming={true}
+    >
+      <withTooltip(Button)
+        className="IntentDetailsButton-firstInRow"
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+        swapTheming={true}
+      >
+        <Button
+          className="IntentDetailsButton-firstInRow"
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          swapTheming={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-background--primary md-background--primary-hover md-inline-block IntentDetailsButton-firstInRow"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Save
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+    <withInk(withTooltip(Button))
+      className="IntentDetailsButton"
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        className="IntentDetailsButton"
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          className="IntentDetailsButton"
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block IntentDetailsButton"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Delete
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+  </div>
+</IntentDetails>
+`;

web/src/components/helper/__tests__/AnswerSourceForm.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import AnswerSourceForm from '../AnswerSourceForm';
+import {ANSWER_TYPE} from '../../../config/constants'
+
+it('renders without crashing', () => {
+  shallow(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
+});
+
+it ('snapshot',()=>{
+  const wrapper = mount(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
+  expect(wrapper).toMatchSnapshot();
+})
+
+it('calls onClose when cancel is pressed', () => {
+  const onClose = jest.fn();
+  const wrapper = mount(<AnswerSourceForm onClose={onClose} onSave={()=>{}} onSourceChange={()=>{}} />);
+  const cancelButton = wrapper.find('button').at(0);
+  expect(cancelButton.text()).toEqual('Cancel');
+  cancelButton.simulate('click');
+  expect(onClose).toBeCalled();
+});
+
+it('calls onSave when save is pressed', () => {
+  const onSave = jest.fn();
+  const wrapper = mount(<AnswerSourceForm onClose={()=>{}} onSave={onSave} onSourceChange={()=>{}} />);
+  const saveButton = wrapper.find('button').at(1);
+  expect(saveButton.text()).toEqual('Save');
+  saveButton.simulate('click');
+  expect(onSave).toBeCalled();
+});
+
+it('sets PREDEFINED value when Predefined answer is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.PREDEFINED)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.PREDEFINED));
+  
+});
+
+it('sets EXTERNAL_SOURCE_WP_TITLES value when WordPress titles is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES));
+  
+});
+
+it('sets EXTERNAL_SOURCE_WP_NEWS value when WordPress latest news is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS));
+  
+});

web/src/components/helper/__tests__/AnswerTextBox.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import AnswerTextBox from '../AnswerTextBox';
+import {ANSWER_TYPE} from '../../../config/constants';
+
+it ('renders without crashing', () => {
+  shallow (<AnswerTextBox />);
+});
+
+describe ('predefined answer selected', () => {
+  let wrapper;
+  let textField;
+
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.PREDEFINED}
+        answer={'Dummy answer'}
+        handleAnswerEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for normal answer', () => {
+    expect (textField.props ().label).toEqual ('Answer');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});
+
+describe ('WordPress titles selected', () => {
+  let wrapper;
+  let textField;
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES}
+        externalAnswerSource={'Dummy answer'}
+        handleAnswerSourceEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for external source input', () => {
+    expect (textField.props ().label).toEqual ('Answer source');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});
+
+describe ('WordPress latest news selected', () => {
+  let wrapper;
+  let textField;
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS}
+        externalAnswerSource={'Dummy answer'}
+        handleAnswerSourceEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for external source input', () => {
+    expect (textField.props ().label).toEqual ('Answer source');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});

web/src/components/helper/__tests__/Modal.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Modal from '../Modal';
+
+it('renders without crashing', () => {
+  shallow(<Modal />);
+});
+
+let actionButton;
+let childButton;
+let wrapper;
+
+beforeEach(()=>{
+  actionButton = <button key={0}>Dummy action button</button>;
+  childButton = <button key={1}>Child button</button>;
+  wrapper = mount(<Modal title={'Dummy title'} actions={[actionButton]}>{childButton}</Modal>);
+});
+
+it ('snapshot', () => {
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('receives props as expected', () =>{
+  expect(wrapper.props().title).toEqual('Dummy title');
+  expect(wrapper.props().actions).toEqual([actionButton]);
+  expect(wrapper.props().children).toEqual(childButton);
+});

web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap

@@ -0,0 +1,675 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<AnswerSourceForm
+  onClose={[Function]}
+  onSave={[Function]}
+  onSourceChange={[Function]}
+>
+  <Modal
+    actions={
+      Array [
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          swapTheming={true}
+      >
+          Cancel
+      </withInk(withTooltip(Button))>,
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          primary={true}
+          swapTheming={true}
+      >
+          Save
+      </withInk(withTooltip(Button))>,
+      ]
+    }
+    title="Answer type"
+  >
+    <div
+      className="modal"
+    >
+      <div
+        className="modal-content"
+      >
+        <h2
+          className="header"
+        >
+          Answer type
+        </h2>
+        <SelectionControlGroup
+          component="fieldset"
+          controls={
+            Array [
+              Object {
+                "label": "Predefined answer",
+                "value": "0",
+              },
+              Object {
+                "label": "WordPress titles",
+                "value": "1",
+              },
+              Object {
+                "label": "WordPress latest news",
+                "value": "2",
+              },
+            ]
+          }
+          defaultValue="undefined"
+          id="answer-source"
+          label="Import answer from:"
+          labelClassName="md-subheading-1"
+          labelComponent="legend"
+          name="answer-source"
+          onChange={[Function]}
+          type="radio"
+        >
+          <fieldset
+            className="md-selection-control-group"
+            onChange={[Function]}
+            onKeyDown={[Function]}
+          >
+            <legend
+              className="md-subheading-1"
+            >
+              Import answer from:
+            </legend>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source0"
+              key="control0"
+              label="Predefined answer"
+              name="answer-source"
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="0"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source0"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="0"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source0"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={0}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={0}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    Predefined answer
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source1"
+              key="control1"
+              label="WordPress titles"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="1"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source1"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="1"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source1"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress titles
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source2"
+              key="control2"
+              label="WordPress latest news"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="2"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source2"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="2"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source2"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress latest news
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+          </fieldset>
+        </SelectionControlGroup>
+        <div
+          className="actions"
+        >
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="cancel"
+            onClick={[Function]}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Cancel
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="save"
+            onClick={[Function]}
+            primary={true}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              primary={true}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                primary={true}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-background--primary md-background--primary-hover md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Save
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</AnswerSourceForm>
+`;

web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap

@@ -0,0 +1,376 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WordPress latest news selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={2}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`WordPress titles selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={1}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`predefined answer selected snapshot 1`] = `
+<AnswerTextBox
+  answer="Dummy answer"
+  answerType={0}
+  handleAnswerEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;

web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<Modal
+  actions={
+    Array [
+      <button>
+        Dummy action button
+    </button>,
+    ]
+  }
+  title="Dummy title"
+>
+  <div
+    className="modal"
+  >
+    <div
+      className="modal-content"
+    >
+      <h2
+        className="header"
+      >
+        Dummy title
+      </h2>
+      <button
+        key="1"
+      >
+        Child button
+      </button>
+      <div
+        className="actions"
+      >
+        <button
+          key="0"
+        >
+          Dummy action button
+        </button>
+      </div>
+    </div>
+  </div>
+</Modal>
+`;

web/src/setupTests.js

@@ -0,0 +1,5 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'jest-enzyme';
+
+configure({ adapter: new Adapter() });