it('should not update the selected date if the date input manually it has something wrong', () => {
var data = getOnInputKeyDownStuff()
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowDown'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Backspace'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Enter'))
expect(data.callback.calledOnce).to.be.false
})
it('when open and the key "tab" is pressed the menu is closed and focus is progress to the next focusable element', done => {
const instance = ReactDOM.render(
<Grid>
{simpleDropdown}
<input type="text" id="next-focusable" />
</Grid>, focusableContainer);
// Need to use Grid instead of div above to make instance a composite
// element, to make this call legal.
const node = ReactTestUtils.findRenderedComponentWithType(instance, Dropdown);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(node, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
buttonNode.getAttribute('aria-expanded').should.equal('true');
ReactTestUtils.Simulate.keyDown(buttonNode, { key: keycode('tab'), keyCode: keycode('tab') });
setTimeout(() => {
buttonNode.getAttribute('aria-expanded').should.equal('false');
done();
});
// simulating a tab event doesn't actually shift focus.
// at least that seems to be the case according to SO.
// hence no assert on the input having focus.
});
it('supports placeholder property', function() {
let instance = ReactUtils.renderIntoDocument(
<Select placeholder="Placeholder">
<Option label="Option 1" value="option1" />
<Option label="Option 2" value="option2" />
</Select>
);
let selectEl = instance.controlEl;
// check additional option
assert.equal(selectEl.children.length, 3);
let optionEl = selectEl.children[0];
assert.equal(optionEl.innerHTML, 'Placeholder');
assert.equal(optionEl.value, '');
// check classes
assert.equal(selectEl.className, 'mui--text-placeholder');
assert.equal(optionEl.className, 'mui--text-placeholder');
// select different option and check class again
selectEl.value = 'option2';
ReactUtils.Simulate.change(selectEl);
assert.equal(selectEl.className, '');
// re-select placeholder and check class again
selectEl.value = '';
ReactUtils.Simulate.change(selectEl);
assert.equal(selectEl.className, 'mui--text-placeholder');
});
it( 'should manage the selected suggestion based on both keyboard and mouse events', function() {
setText( 'th' );
expect( getSuggestionsText() ).toEqual( fixtures.matchingSuggestions.th );
expect( getSelectedSuggestion() ).toBe( null );
sendKeyDown( keyCodes.downArrow ); // 'the'
expect( getSelectedSuggestion() ).toEqual( [ 'th', 'e' ] );
sendKeyDown( keyCodes.downArrow ); // 'that'
expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
const hoverSuggestion = wrapperElement()
.querySelectorAll( '.components-form-token-field__suggestion' )[ 3 ]; // 'with'
expect( getSuggestionNodeText( hoverSuggestion ) ).toEqual( [ 'wi', 'th' ] );
// before sending a hover event, we need to wait for
// SuggestionList#_scrollingIntoView to become false
jest.runTimersToTime( 100 );
TestUtils.Simulate.mouseEnter( hoverSuggestion );
expect( getSelectedSuggestion() ).toEqual( [ 'wi', 'th' ] );
sendKeyDown( keyCodes.upArrow );
expect( getSelectedSuggestion() ).toEqual( [ 'th', 'is' ] );
sendKeyDown( keyCodes.upArrow );
expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
TestUtils.Simulate.click( hoverSuggestion );
expect( getSelectedSuggestion() ).toBe( null );
expect( getTokensHTML() ).toEqual( [ 'foo', 'bar', 'with' ] );
} );
it('calls the callbacks', () => {
ReactTestUtils.Simulate.focus(launcher);
expect(onFocusSpy).toHaveBeenCalled();
ReactTestUtils.Simulate.blur(launcher);
expect(onBlurSpy).toHaveBeenCalled();
});
it('passes open, event, and source correctly when child selected', () => {
const spy = sinon.spy();
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown id="test-id" onToggle={spy}>
<Dropdown.Toggle key="toggle">
Child Title
</Dropdown.Toggle>
<Dropdown.Menu key="menu">
<MenuItem eventKey={1}>Item 1</MenuItem>
</Dropdown.Menu>
</Dropdown>
);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
const childNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
expect(spy).to.not.have.been.called;
ReactTestUtils.Simulate.click(buttonNode);
expect(spy).to.have.been.calledOnce;
ReactTestUtils.Simulate.click(childNode);
expect(spy).to.have.been.calledTwice;
expect(spy.getCall(1).args.length).to.equal(3);
expect(spy.getCall(1).args[0]).to.equal(false);
expect(spy.getCall(1).args[1]).to.be.an('object');
assert.deepEqual(spy.getCall(1).args[2], { source: 'select' });
});
it('calls the callbacks', () => {
ReactTestUtils.Simulate.mouseOver(launcher);
expect(onMouseOverSpy).toHaveBeenCalled();
ReactTestUtils.Simulate.mouseOut(launcher);
expect(onMouseOutSpy).toHaveBeenCalled();
});
it('does not call the callbacks when not changing', () => {
ReactTestUtils.Simulate.click(launcher);
onEnteredSpy.calls.reset();
ReactTestUtils.Simulate.focus(launcher);
expect(onEnteredSpy).not.toHaveBeenCalled();
});
it('should not hide the calendar when selecting a day in the calendar with Enter press, and shouldCloseOnSelect prop is false', () => {
var data = getOnInputKeyDownStuff({shouldCloseOnSelect: false})
var dateInput = data.datePicker.input
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowUp'))
TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), getKey('Enter'))
expect(data.datePicker.state.open).to.be.true
})
it('should not select dates excluded from filterDate', () => {
var data = getOnInputKeyDownStuff({
filterDate: date => utils.getDay(date) !== utils.getDay(utils.subtractDays(utils.newDate(), 1))
})
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowLeft'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Enter'))
expect(data.callback.calledOnce).to.be.false
})
it('should hide the calendar when the pressing escape in the date input', () => {
var datePicker = TestUtils.renderIntoDocument(
<DatePicker />
)
var dateInput = datePicker.input
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), getKey('Escape'))
expect(datePicker.calendar).to.not.exist
})
it('should update the preSelection state when a day is selected with Enter press', () => {
var data = getOnInputKeyDownStuff({shouldCloseOnSelect: false})
var dateInput = data.datePicker.input
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowDown'))
TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), getKey('Enter'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowDown'))
utils.addWeeks(data.copyM, 2)
expect(utils.formatDate(data.datePicker.state.preSelection, data.testFormat)).to.equal(utils.formatDate(data.copyM, data.testFormat))
})
it('should keep the calendar shown when clicking the calendar', () => {
var datePicker = TestUtils.renderIntoDocument(
<DatePicker />
)
var dateInput = datePicker.input
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
TestUtils.Simulate.click(ReactDOM.findDOMNode(datePicker.calendar))
expect(datePicker.calendar).to.exist
})
it('should update the selected date on manual input', () => {
var data = getOnInputKeyDownStuff()
TestUtils.Simulate.change(data.nodeInput, {target: {value: '02/02/2017'}})
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Enter'))
data.copyM = utils.newDate('02/02/2017')
expect(
utils.formatDate(data.callback.args[0][0], data.testFormat)
).to.equal(utils.formatDate(data.copyM, data.testFormat))
})
test('can go back from isEditing to initial view with button click', function() {
this.renderForm()
Simulate.click(this.form.refs.renameBtn)
ok(this.form.state.isEditing)
ok(this.form.refs.newName)
Simulate.click(this.form.refs.backBtn)
ok(!this.form.state.isEditing)
ok(this.form.refs.replaceBtn)
})
it('should not hide the calendar when clicking a day on the calendar and shouldCloseOnSelect prop is false', () => {
var datePicker = TestUtils.renderIntoDocument(
<DatePicker shouldCloseOnSelect={false}/>
)
var dateInput = datePicker.input
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
var day = TestUtils.scryRenderedComponentsWithType(datePicker.calendar, Day)[0]
TestUtils.Simulate.click(ReactDOM.findDOMNode(day))
expect(datePicker.state.open).to.be.true
})
it('should hide the calendar when clicking a day on the calendar', () => {
var datePicker = TestUtils.renderIntoDocument(
<DatePicker />
)
var dateInput = datePicker.input
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
var day = TestUtils.scryRenderedComponentsWithType(datePicker.calendar, Day)[0]
TestUtils.Simulate.click(ReactDOM.findDOMNode(day))
expect(datePicker.calendar).to.not.exist
})
it('should not select excludeDates', () => {
var data = getOnInputKeyDownStuff({
excludeDates: [
utils.subtractDays(utils.newDate(), 1)
]
})
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowLeft'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Enter'))
expect(data.callback.calledOnce).to.be.false
})
it('triggers on focus', () => {
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(subject, 'tether-enabled')).toHaveLength(0);
ReactTestUtils.Simulate.focus(launcher);
expect(ReactTestUtils.findRenderedDOMComponentWithClass(subject, 'tether-enabled')).toBeDefined();
ReactTestUtils.Simulate.blur(launcher);
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(subject, 'tether-enabled')).toHaveLength(0);
});
it('when focused and open does not toggle closed when the key "down" is pressed', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
ReactTestUtils.Simulate.keyDown(buttonNode, { keyCode: keycode('down') });
node.className.should.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('true');
});
it('should update the selected date', () => {
var data = getOnInputKeyDownStuff()
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowLeft'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('Enter'))
utils.subtractDays(data.copyM, 1)
expect(data.callback.calledOnce).to.be.true
var result = data.callback.args[0][0]
expect(
utils.formatDate(result, data.testFormat)
).to.equal(utils.formatDate(data.copyM, data.testFormat))
})
test('calls passed in props method to resolve conflict', function() {
expect(2)
this.renderForm({
fileOptions: {file: {name: 'file_name.md'}},
onNameConflictResolved(options) {
ok(options.name)
}
})
Simulate.click(this.form.refs.renameBtn)
ok(this.form.state.isEditing)
Simulate.click(this.form.refs.commitChangeBtn)
})
it('can change the service name for ghost services', function() {
var option1 = { key: 'option1key', type: 'string' };
var option2 = { key: 'option2key', type: 'boolean' };
var charm = {
get: sinon.stub().returns({ option1: option1, option2: option2 })
};
var option1key = 'string body value';
var option2key = true;
var serviceGet = sinon.stub();
serviceGet.withArgs('id').returns('abc123$');
serviceGet.withArgs('name').returns('servicename');
serviceGet.withArgs('config').returns(
{ option1: option1key, option2: option2key });
var service = {
get: serviceGet,
set: sinon.stub()
};
var updateUnit = sinon.stub();
var getServiceByName = sinon.stub().returns(null);
var component = testUtils.renderIntoDocument(
<Configuration
acl={acl}
addNotification={sinon.stub()}
changeState={sinon.stub()}
charm={charm}
getServiceByName={getServiceByName}
getYAMLConfig={sinon.stub()}
linkify={sinon.stub()}
service={service}
serviceRelations={[]}
setConfig={sinon.stub()}
unplaceServiceUnits={sinon.stub()}
updateServiceUnitsDisplayname={updateUnit}/>);
assert.equal(component.refs.ServiceName.props.config, 'servicename');
var domNode = ReactDOM.findDOMNode(component);
var name = domNode.querySelector('.string-config-input');
name.innerText = 'newservicename';
testUtils.Simulate.input(name);
var save = domNode.querySelector('.button-row--count-2 .button--neutral');
testUtils.Simulate.click(save);
assert.equal(service.set.callCount, 1);
assert.deepEqual(service.set.args[0], ['name', 'newservicename']);
// Calls to update then unit names.
assert.equal(updateUnit.callCount, 1);
assert.equal(updateUnit.args[0][0], 'abc123$');
// Calls to check to see if a service exists.
assert.equal(getServiceByName.callCount, 1);
assert.equal(getServiceByName.args[0][0], 'newservicename');
});
it('should hide the calendar when tabbing from the date input', () => {
var onBlurSpy = sandbox.spy()
var datePicker = TestUtils.renderIntoDocument(
<DatePicker onBlur={onBlurSpy} />
)
var dateInput = datePicker.input
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), getKey('Tab'))
TestUtils.Simulate.blur(ReactDOM.findDOMNode(dateInput))
expect(datePicker.calendar).to.not.exist
assert(onBlurSpy.calledOnce, 'should call onBlur')
})
it('stops setting changes if service name already exists', function() {
var option1 = { key: 'option1key', type: 'string' };
var option2 = { key: 'option2key', type: 'boolean' };
var charm = {
get: sinon.stub().returns({ option1: option1, option2: option2 })
};
var option1key = 'string body value';
var option2key = true;
var serviceGet = sinon.stub();
serviceGet.withArgs('id').returns('abc123$');
serviceGet.withArgs('name').returns('servicename');
serviceGet.withArgs('config').returns(
{ option1: option1key, option2: option2key });
var service = {
get: serviceGet,
set: sinon.stub()
};
var updateUnit = sinon.stub();
var getServiceByName = sinon.stub().returns(true);
var addNotification = sinon.stub();
var component = testUtils.renderIntoDocument(
<Configuration
acl={acl}
addNotification={addNotification}
changeState={sinon.stub()}
charm={charm}
getServiceByName={getServiceByName}
getYAMLConfig={sinon.stub()}
linkify={sinon.stub()}
service={service}
serviceRelations={[]}
setConfig={sinon.stub()}
unplaceServiceUnits={sinon.stub()}
updateServiceUnitsDisplayname={updateUnit}/>);
var domNode = ReactDOM.findDOMNode(component);
var name = domNode.querySelector('.string-config-input');
name.innerText = 'newservicename';
testUtils.Simulate.input(name);
var save = domNode.querySelector('.button-row--count-2 .button--neutral');
testUtils.Simulate.click(save);
// Make sure it emits a notification if the name exists.
assert.equal(addNotification.callCount, 1);
// Make sure the service name and config wasn't updated.
assert.equal(service.set.callCount, 0);
// Make sure that the unit names weren't updated.
assert.equal(updateUnit.callCount, 0);
});
test('onNameConflictResolved preserves expandZip option when renaming', function() {
expect(2)
this.renderForm({
fileOptions: {
file: {name: 'file_name.md'},
expandZip: 'true'
},
onNameConflictResolved(options) {
equal(options.expandZip, 'true')
}
})
Simulate.click(this.form.refs.renameBtn)
ok(this.form.state.isEditing)
Simulate.click(this.form.refs.commitChangeBtn)
})
it('closes when child MenuItem is selected', () => {
const instance = ReactTestUtils.renderIntoDocument(
simpleDropdown
);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
const menuItem = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A')[0];
ReactTestUtils.Simulate.click(menuItem);
node.className.should.not.match(/\bopen\b/);
});
it('should keep the calendar shown when blurring the date input', (done) => {
var datePicker = TestUtils.renderIntoDocument(
<DatePicker />
)
var dateInput = datePicker.input
var focusSpy = sandbox.spy(dateInput, 'focus')
TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
TestUtils.Simulate.blur(ReactDOM.findDOMNode(dateInput))
defer(() => {
expect(datePicker.calendar).to.exist
assert(focusSpy.calledOnce, 'should refocus the date input')
done()
})
})
xit('should update the preSelection state when a day is selected with mouse click', () => {
// Note: We need monthsShown=2 so that today can still be clicked when
// ArrowLeft selects the previous month. (On the 1st 2 days of the month.)
var data = getOnInputKeyDownStuff({shouldCloseOnSelect: false, monthsShown: 2})
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowLeft'))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowLeft'))
var day = TestUtils.findRenderedDOMComponentWithClass(data.datePicker.calendar, 'react-datepicker__day--today')
TestUtils.Simulate.click(ReactDOM.findDOMNode(day))
TestUtils.Simulate.keyDown(data.nodeInput, getKey('ArrowDown'))
utils.addWeeks(data.copyM, 1)
expect(utils.formatDate(data.datePicker.state.preSelection, data.testFormat)).to.equal(utils.formatDate(data.copyM, data.testFormat))
})
it('Should call onClick callback', done => {
const doneOp = data => {
done();
};
const instance = getDOMNode(<Radio onClick={doneOp}>Title</Radio>);
ReactTestUtils.Simulate.click(instance.querySelector('label'));
});