created tests for IntentDetails component ; improved input validators
This commit is contained in:
GotPPay
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
shallow(<App />);
|
||||
});
|
||||
@@ -157,14 +157,14 @@ class IntentDetails extends Component {
|
||||
}
|
||||
|
||||
handleQuestionEdit (e, index) {
|
||||
if (e.length === QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
|
||||
if (e.length >= QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
|
||||
let newIntent = this.state.intent;
|
||||
newIntent.questions[index] = e;
|
||||
this.setState ({intent: newIntent});
|
||||
}
|
||||
|
||||
handleIntentExplanationEdit (e, index) {
|
||||
if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
|
||||
if (e.length >= INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
|
||||
return;
|
||||
let newIntent = this.state.intent;
|
||||
newIntent.intentExplanation = e;
|
||||
@@ -172,21 +172,21 @@ class IntentDetails extends Component {
|
||||
}
|
||||
|
||||
handleAnswerEdit (e) {
|
||||
if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
|
||||
if (e.length >= ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
|
||||
let newIntent = this.state.intent;
|
||||
newIntent.answer = e;
|
||||
this.setState ({intent: newIntent});
|
||||
}
|
||||
|
||||
handleAnswerSourceEdit (e) {
|
||||
if (e.length === ANSWER_MAX_LENGTH) return;
|
||||
if (e.length >= ANSWER_MAX_LENGTH) return;
|
||||
let newIntent = this.state.intent;
|
||||
newIntent.externalAnswerSource = e;
|
||||
this.setState ({intent: newIntent});
|
||||
}
|
||||
|
||||
handleIntentNameEdit (e) {
|
||||
if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
|
||||
if (e.length >= INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
|
||||
let newIntent = this.state.intent;
|
||||
newIntent.intentName = e;
|
||||
this.setState ({intent: newIntent});
|
||||
|
||||
@@ -1,10 +1,290 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
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', () => {
|
||||
let dummyIntent = {
|
||||
questions:['q1','q2']
|
||||
}
|
||||
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);
|
||||
|
||||
});
|
||||
|
||||
xit ('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');
|
||||
const firstQuestionTextField = wrapper.find('TextField').at(2);
|
||||
const secondQuestionTextField = wrapper.find('TextField').at(3);
|
||||
const thirdQuestionTextField = wrapper.find('TextField').at(4);
|
||||
expect(firstQuestionTextField.props().id).toEqual('intent question');
|
||||
expect(secondQuestionTextField.props().id).toEqual('intent question');
|
||||
expect(thirdQuestionTextField.props().id).toEqual('intent question');
|
||||
//TODO: simulate click on delete icon inside text field and check if text field is removed
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
Reference in New Issue
Block a user