it('renders no form-group-* class when standalone', function () {
let instance = ReactTestUtils.renderIntoDocument(
<FormGroup standalone bsSize="large" />
);
assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group').length, 0);
assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group-lg').length, 0);
});
it('header columns and cells stay in line', () => {
let gridRunner = new GridRunner({renderIntoBody: true})
.selectCell({cellIdx: 14, rowIdx: 0});
let firstRowCells = TestUtils.scryRenderedDOMComponentsWithClass(gridRunner.grid, 'react-grid-Cell');
let headerCells = TestUtils.scryRenderedDOMComponentsWithClass(gridRunner.grid, 'react-grid-HeaderCell');
headerCells.forEach((hCell, i) => {
expect(hCell.props.style.left).toEqual(firstRowCells[i].props.style.left);
});
});
it('Should not show the prev button on the first image if wrap is false', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Carousel activeIndex={0} controls={true} wrap={false}>
<Carousel.Item ref="item1">Item 1 content</Carousel.Item>
<Carousel.Item ref="item2">Item 2 content</Carousel.Item>
</Carousel>
);
let backButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'left');
let nextButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'right');
assert.equal(backButtons.length, 0);
assert.equal(nextButtons.length, 1);
});
it('renders no form-group class', function() {
let instance = ReactTestUtils.renderIntoDocument(
<Input standalone />
);
assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group').length, 0);
});
it('should enable a check', async function (done) {
try {
const {root, store} = renderRootWithInitialState({
auth: {isAuthenticated: true}
})
await waitForStoreUpdate(store, store => Object.keys(getIn(store.getState(), ['repos', 'items'], {})).length > 0, done)
const items = TestUtils.scryRenderedDOMComponentsWithClass(root, 'zpr-repository-list-item')
TestUtils.Simulate.click(items[0], {button: 0})
function findToggle(type) {
return TestUtils.findAllInRenderedTree(root, function (element) {
try {
return element.props.check.type === type
} catch (e) {
return false
}
})[0]
}
let repoCheck = findToggle('approval')
const toggle = TestUtils.findRenderedDOMComponentWithClass(repoCheck, 'toggle')
TestUtils.Simulate.click(toggle, {button: 0})
expect(repoCheck.props.check.isUpdating).to.be.true
await waitForStoreUpdate(store, store => getIn(store.getState(), ['repos', 'items', 'mfellner/angular-react', 'checks'], []).length > 0, done)
expect(repoCheck.props.check.isEnabled).to.be.true
done()
} catch (e) {
console.log(e.stack)
done(e)
}
})
drag({from, to, col, beforeDragEnter = null, beforeDragEnd = null}) {
this.selectCell({cellIdx: col, rowIdx: from});
const rows = TestUtils.scryRenderedDOMComponentsWithClass(this.grid, 'react-grid-Row');
let over = [];
over.push(this.row);
let fromIterator = from;
for (let i = fromIterator++; i < to; i++) {
over.push(this.getCells(rows[i])[col]);
}
const toCell = this.getCells(rows[to])[col];
over.push(toCell);
// Act
// do the drag
// Important: we need dragStart / dragEnter / dragEnd
TestUtils.Simulate.dragStart(ReactDOM.findDOMNode(this.row));
if (beforeDragEnter) {beforeDragEnter();}
over.forEach((r) => {
TestUtils.Simulate.dragEnter(ReactDOM.findDOMNode(r));
});
if (beforeDragEnd) {beforeDragEnd();}
TestUtils.Simulate.dragEnd(ReactDOM.findDOMNode(toCell));
return this;
}
function getAddButton() {
var buttons = ReactTestUtils.scryRenderedDOMComponentsWithClass(
component,
'rf-RepeatingFieldset__add'
);
return buttons[0];
}
it('renders no hint if no hint is provided via schema or props', () => {
var form = ReactTestUtils.renderIntoDocument(Form({
field: Field()
}));
var hints = ReactTestUtils.scryRenderedDOMComponentsWithClass(form, 'react-forms-hint');
assert.strictEqual(hints.length, 0);
});
function assertMessages(values) {
var messages = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rf-Message');
assert.equal(messages.length, values.length);
values.forEach((value, idx) => {
var node = messages[idx].getDOMNode();
assert.strictEqual((node.textContent || node.innerText).trim(), value);
});
}
hasSelected({rowIdx, cellIdx, expectedClass = '.selected'}) {
// and should move to the appropriate cell/row
const selectedRow = TestUtils.scryRenderedDOMComponentsWithClass(this.grid, 'react-grid-Row')[rowIdx];
const selected = selectedRow.querySelector(expectedClass);
expect(selected.props.rowIdx).toEqual(rowIdx);
expect(selected.props.idx).toEqual(cellIdx);
return this;
}
it('Should allow user to specify a previous and next icon', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Carousel activeIndex={1} controls={true} wrap={false}
prevIcon={<span className='ficon ficon-left'/>}
nextIcon={<span className='ficon ficon-right'/>}>
<Carousel.Item ref="item1">Item 1 content</Carousel.Item>
<Carousel.Item ref="item2">Item 2 content</Carousel.Item>
<Carousel.Item ref="item3">Item 3 content</Carousel.Item>
</Carousel>
);
let backButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'ficon-left');
let nextButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'ficon-right');
assert.equal(backButtons.length, 1);
assert.equal(nextButtons.length, 1);
});
it('does not render toggle button caret', () => {
const instance = ReactTestUtils.renderIntoDocument(
<DropdownToggle open={false} title='no caret' noCaret />
);
const caretNode = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'caret');
caretNode.length.should.equal(0);
});
}).then(() =>{
var component = ReactTestUtils.renderIntoDocument(
createElementWithContext(context)
);
var elements = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'container');
assert(2 == elements.length);
done();
})
it('should derive bsClass from parent', () => {
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown bsClass="my-dropdown" id="test-id">
<Dropdown.Toggle bsClass="my-toggle">
Child Title
</Dropdown.Toggle>
<Dropdown.Menu bsClass="my-menu">
<MenuItem>Item 1</MenuItem>
</Dropdown.Menu>
</Dropdown>
);
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-dropdown-toggle'));
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-dropdown-menu'));
assert.lengthOf(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'my-toggle'), 0);
assert.lengthOf(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'my-menu'), 0);
});
it('renders a dirty className if value is valid or invalid and dirtied', () => {
renderComponent({
value: 'some'
});
markDirty();
var validDirtied = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rf-Field--dirty');
assert.strictEqual(validDirtied.length, 1);
renderComponent({
value: 'some',
schema: Scalar({validate: (value) => new Error('error')})
});
markDirty();
var dirtied = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rf-Field--dirty');
assert.strictEqual(dirtied.length, 1);
});
it('should render 5 days ago', function (){
var nowStamp = Math.floor(Date.now() / 1000);
let comments = [
{'author': 'Santiago', 'msg': 'Msg 1', id: 1, 'timestamp': nowStamp-432000}
];
component = TestUtils.renderIntoDocument(<CommentList data={comments}/>);
var result = TestUtils.scryRenderedDOMComponentsWithClass(component, 'timestamp');
expect(result[0].props.children).toBe('5 days ago');
});
function testRenderedOutput(result){
let dom = TestUtils.renderIntoDocument(result);
let columns = TestUtils.scryRenderedDOMComponentsWithClass(dom, 'col-md-6');
let page = TestUtils.findRenderedDOMComponentWithTag(dom, 'article');
let title = TestUtils.findRenderedDOMComponentWithTag(page, 'h2');
expect(page).toBeDefined();
expect(columns.length).toEqual(2);
expect(title.getDOMNode().innerHTML).toEqual(fixture.config.title);
}
it(`does not render ${testCase.className} class`, function() {
let instance = ReactTestUtils.renderIntoDocument(
<FormGroup>
<span />
</FormGroup>
);
assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, testCase.className).length, 0);
});
it('re-renders form if schema changes', function() {
var cityOptions = [
{value: 'LAX', name: 'Los Angeles'},
{value: 'LON', name: 'London'},
{value: 'N/A', name: 'Other'}
];
var cityOptions2 = [
{value: 'LAX', name: 'Los Angeles'},
{value: 'LON', name: 'London'},
{value: 'NYC', name: 'New York'},
{value: 'PAR', name: 'Paris'},
{value: 'N/A', name: 'Other'}
];
function getMapping(options) {
return Mapping({
cities: Scalar({
name: 'cities',
input: <RadioButtonGroup options={options} />,
required: true
})
});
}
var schema = getMapping(cityOptions);
var schema2 = getMapping(cityOptions2);
var form = TestUtils.renderIntoDocument(<Form schema={schema} />);
assert.equal(
TestUtils.scryRenderedDOMComponentsWithClass(form, 'rf-RadioButtonGroup__button').length,
3
);
form.setProps({schema: schema2});
assert.equal(
TestUtils.scryRenderedDOMComponentsWithClass(form, 'rf-RadioButtonGroup__button').length,
5
);
});
it('does not render toggle button caret', () => {
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown.Toggle noCaret>
Child Text
</Dropdown.Toggle>
);
const caretNode = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'caret');
caretNode.length.should.equal(0);
});
it('render datagrid with data', ()=>{
//given
let data = [
{ id: 0, index: 1, firstName: 'John', city: 'London', email: '*****@*****.**'},
{ id: 1, index: 1, firstName: 'John', city: 'London', email: '*****@*****.**'},
{ id: 2, index: 1, firstName: 'John', city: 'London', email: '*****@*****.**'},
{ id: 3, index: 1, firstName: 'John', city: 'London', email: '*****@*****.**'}
];
//when
var datagrid = TestUtils.renderIntoDocument( <TableDatagrid renderData={data} />)
var headers = TestUtils.scryRenderedDOMComponentsWithClass(datagrid, 'z-column-header');
var rows = TestUtils.scryRenderedDOMComponentsWithClass(datagrid, 'z-row');
//then
expect( headers.length ).toEqual(5);
expect( rows.length ).toEqual(4);
});
it('Should not pass className to Nav', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Tabs bsStyle="pills" defaultActiveKey={1} animation={false}>
<Tab title="Tab 1" eventKey={1} className="my-tab-class">Tab 1 content</Tab>
<Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
</Tabs>
);
let myTabClass = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-tab-class');
let myNavItem = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'nav-pills')[0];
assert.notDeepEqual(myTabClass, myNavItem);
});
it('should not show error if Email is Valid', function() {
var validEmail = '*****@*****.**';
TestUtils.Simulate.change(emailInput, {
target: {
value: validEmail
}
});
expect(login.email).toBe(validEmail);
TestUtils.Simulate.blur(emailInput);
var error = TestUtils.scryRenderedDOMComponentsWithClass(email, 'mui-text-field-error');
expect(error.length).toBe(0);
});
it('Should add only one element with navbar-brand class using NavBrand Component', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Navbar brand="Brand">
<NavBrand>Brand</NavBrand>
</Navbar>
);
let brands = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'navbar-brand');
assert.equal(brands.length, 1);
assert.equal(React.findDOMNode(brands[0]).nodeName, 'SPAN');
assert.equal(React.findDOMNode(brands[0]).innerText, 'Brand');
});
it('should not transition on click', () => {
const component = ReactTestUtils.findRenderedComponentWithType(
router, Component
);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component),
{button: 0}
);
const target = ReactTestUtils.scryRenderedDOMComponentsWithClass(
router, 'target'
);
expect(target).to.be.empty;
});
function findFieldsInputs() {
fields = []
inputs = []
removeButtons = TestUtils.scryRenderedDOMComponentsWithClass(
form,
'rf-RepeatingFieldset__remove'
);
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
fields.push(field);
inputs.push(TestUtils.findRenderedDOMComponentWithTag(field, 'input'));
});
}
}).then(() =>{
var component = ReactTestUtils.renderIntoDocument(
createElementWithContext(context)
);
var elements = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'breadcrumbs');
assert(0 == elements.length);
// if (component && component.isMounted()) {
// // Only components with a parent will be unmounted
// ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
// }
done();
})
it('remains one after click', function() {
var stub = sinon.stub(_, "sample");
stub.onCall(0).returns(1);
stub.onCall(1).returns(2);
var game = TestUtils.renderIntoDocument(<Game cells={3} />);
var winnerEl = TestUtils.findRenderedDOMComponentWithClass(game, 'winner');
TestUtils.Simulate.click(winnerEl);
var winners = TestUtils.scryRenderedDOMComponentsWithClass(game, 'winner');
expect(winners.length).to.eq(1);
_.sample.restore();
});
it('does not change when clicking on a non-winning square', function() {
var stub = sinon.stub(_, "sample");
stub.onCall(0).returns(1);
stub.onCall(1).returns(2);
var game = TestUtils.renderIntoDocument(<Game cells={3} />);
var squares = TestUtils.scryRenderedDOMComponentsWithClass(game, 'square');
var notWinner = _.find(squares, (el) => ! el.getDOMNode().classList.contains('winner'));
TestUtils.Simulate.click(notWinner);
expect(game.state.winner).to.eq(1);
_.sample.restore();
});
hasDragged({from, to, col, cellKey}) {
// check onCellDrag called with correct data
expect(this.handleCellDragSpy).toHaveBeenCalled();
// Note - fake date is random, so need to test vs the assigned value as it WILL change (and bust the test)
let expected = this.cell.props.value;
// chek our event returns the right data
expect(this.handleCellDragSpy.argsForCall[0][0]).toEqual({cellKey: cellKey, fromRow: from, toRow: to, value: expected});
// Test all rows to check that value has copied correctly
const rows = TestUtils.scryRenderedDOMComponentsWithClass(this.grid, 'react-grid-Row');
for (let i = from, end = to; i <= end; i++) {
const toCell = this.getCells(rows[i])[col];
// First the component
expect(toCell.props.value).toEqual(expected);
// and finally the rendered data
// (use trim as we are reading from the dom so get some whitespace at the end)
expect(ReactDOM.findDOMNode(toCell.querySelector('.react-grid-Cell__value')).textContent.trim()).toEqual(expected.trim());
}
}