@instructure/ui-test-utils
Version:
A UI testing library made by Instructure Inc.
357 lines (356 loc) • 12.7 kB
JavaScript
var _div, _div2, _div3, _div4, _div5, _div6, _div7, _div8, _div9, _label, _input, _button, _fieldset, _div0, _svg, _input2, _input3, _input4, _form, _form2, _form3, _form4, _form5, _table, _form6, _table2;
/*
* The MIT License (MIT)
*
* Copyright (c) 2015 - present Instructure, Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { mount, expect, find, within } from '../index';
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
describe('assertions', async () => {
describe('#text', async () => {
it('matches elements by matching their text content', async () => {
const subject = await mount(_div || (_div = _jsxs("div", {
"data-locator": "TestLocator",
children: [_jsx("span", {
children: "Currently showing: "
}), _jsx("span", {
children: `Step
1
of 4`
})]
})));
expect(within(subject.getDOMNode())).to.have.text('Currently showing: Step 1 of 4');
});
it('matches elements by matching their text across adjacent text nodes', async () => {
const div = document.createElement('div');
const textNodeContent = ['£', '24', '.', '99'];
textNodeContent.map(text => document.createTextNode(text)).forEach(textNode => div.appendChild(textNode));
const subject = await mount(_div2 || (_div2 = _jsx("div", {})));
subject.getDOMNode().appendChild(div);
expect(within(subject.getDOMNode())).to.have.text('£24.99');
});
it('matches text content correctly when nodes are nested', async () => {
const subject = await mount(_div3 || (_div3 = _jsx("div", {
children: _jsx("span", {
children: "Hello World"
})
})));
expect(within(subject.getDOMNode())).to.have.text('Hello World');
});
});
describe('#contain', async () => {
it('matches an element that contains another element', async () => {
await mount(_div4 || (_div4 = _jsx("div", {
id: "foo",
children: _jsx("div", {
id: "bar",
children: "Hello"
})
})));
const foo = await find('#foo');
const bar = await find('#bar');
expect(foo).to.contain(bar);
expect(foo).to.not.contain(document.body);
});
});
describe('#className', async () => {
it('matches an element that has a class', async () => {
await mount(_div5 || (_div5 = _jsx("div", {
className: "foo bar",
id: "foo",
children: _jsx("div", {
className: "bar",
id: "bar",
children: "Hello"
})
})));
const foo = await find('#foo');
const bar = await find('#bar');
expect(foo).to.have.className('foo');
expect(bar).to.not.have.className('foo');
expect(bar).to.have.className('bar');
});
});
describe('#label', async () => {
it('matches an input with an aria-labelledby attribute', async () => {
await mount(_div6 || (_div6 = _jsxs("div", {
children: [_jsx("label", {
id: "name-label",
children: "Name"
}), _jsx("input", {
"aria-labelledby": "name-label",
id: "name-id"
})]
})));
expect(await find('input')).to.have.label('Name');
});
it('matches an input with a complex aria-labelledby attribute', async () => {
await mount(_div7 || (_div7 = _jsxs("div", {
children: [_jsx("label", {
id: "name-label-one",
children: "Name"
}), _jsx("span", {
id: "name-label-two",
children: "(Last, First)"
}), _jsx("input", {
"aria-labelledby": "name-label-one name-label-two",
id: "name-id"
})]
})));
expect(await find('input')).to.have.label('Name (Last, First)');
});
it('matches an input with an id via the `for` attribute', async () => {
await mount(_div8 || (_div8 = _jsxs("div", {
children: [_jsxs("div", {
children: [_jsx("label", {
htmlFor: "first",
children: "First name"
}), _jsx("input", {
id: "first"
})]
}), _jsxs("div", {
children: [_jsx("label", {
htmlFor: "last",
children: _jsx("span", {
children: "Last name"
})
}), _jsx("input", {
id: "last"
})]
})]
})));
expect(await find('#first')).to.have.label('First name');
expect(await find('#last')).to.have.label('Last name');
});
it('matches an input with an id via a for attribute', async () => {
await mount(_div9 || (_div9 = _jsxs("div", {
children: [_jsx("label", {
htmlFor: "name-id",
children: "Name"
}), _jsx("input", {
id: "name-id"
})]
})));
expect(await find('input')).to.have.label('Name');
});
it('matches an input nested in a label', async () => {
await mount(_label || (_label = _jsxs("label", {
children: ["Name", _jsx("input", {})]
})));
expect(await find('input')).to.have.label('Name');
});
it('matches an input with an aria-label', async () => {
await mount(_input || (_input = _jsx("input", {
"aria-label": "Name"
})));
expect(await find('input')).to.have.label('Name');
});
it('matches a button by its text content', async () => {
await mount(_button || (_button = _jsx("button", {
children: "Submit"
})));
expect(await find('button')).to.have.label('Submit');
});
it('matches a fieldset by its legend', async () => {
await mount(_fieldset || (_fieldset = _jsxs("fieldset", {
children: [_jsx("legend", {
children: "Full name"
}), _jsxs("label", {
children: ["First name ", _jsx("input", {
type: "text"
})]
})]
})));
expect(await find('fieldset')).to.have.label('Full name');
expect(await find('input')).to.have.label('First name');
});
});
describe('#title', async () => {
it('matches an element by its title', async () => {
await mount(_div0 || (_div0 = _jsxs("div", {
children: [_jsx("span", {
title: "Ignore this",
children: "foo"
}), _jsx("button", {
title: "Delete",
children: "bar"
}), _jsx("span", {
title: "Ignore this as well",
children: "baz"
})]
})));
expect(await find('button')).to.have.title('Delete');
});
it('matches an SVG element by its title element content', async () => {
await mount(_svg || (_svg = _jsxs("svg", {
children: [_jsx("title", {
children: "Close"
}), _jsx("g", {
children: _jsx("path", {})
})]
})));
expect(await find('svg')).to.have.title('Close');
});
});
describe('#value', async () => {
it('matches an element by its value', async () => {
await mount(_input2 || (_input2 = _jsx("input", {
type: "text",
defaultValue: "Norris"
})));
expect(await find('input')).to.have.value('Norris');
});
});
describe('#attribute', async () => {
it('matches an element by attribute', async () => {
await mount(_input3 || (_input3 = _jsx("input", {
type: "text"
})));
expect(await find('input')).to.have.attribute('type');
});
it('can find an element by attribute name and value', async () => {
await mount(_input4 || (_input4 = _jsx("input", {
type: "text"
})));
expect(await find('input')).to.have.attribute('type', 'text');
});
});
describe('#ancestors', async () => {
it('matches an input with a matching parent element', async () => {
await mount(_form || (_form = _jsx("form", {
children: _jsx("input", {
type: "text"
})
})));
expect(await find('input')).to.have.exactly(1).ancestors('form');
});
it('does not include the element itself', async () => {
await mount(_form2 || (_form2 = _jsx("form", {
children: _jsx("input", {
type: "text"
})
})));
expect(await find('input')).to.not.have.ancestors('input');
});
});
describe('#parents', async () => {
it('matches an input with a matching parent element', async () => {
await mount(_form3 || (_form3 = _jsx("form", {
children: _jsx("input", {
type: "text"
})
})));
expect(await find('input')).to.have.exactly(1).parents('form');
});
it('does not include the element itself', async () => {
await mount(_form4 || (_form4 = _jsx("form", {
children: _jsx("input", {
type: "text"
})
})));
expect(await find('input')).to.not.have.parents('input');
});
});
describe('#descendants', async () => {
it('matches an element with matching children', async () => {
await mount(_form5 || (_form5 = _jsxs("form", {
children: [_jsx("input", {
type: "text"
}), _jsx("input", {
type: "text"
}), _jsx("input", {
type: "text"
})]
})));
expect(await find('form')).to.have.exactly(3).descendants('input');
});
it('does not include the element itself', async () => {
await mount(_table || (_table = _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: "I am so nested!"
})
})
})
})
})
})
})
})
})
})
})
})));
expect(await find('table')).to.have.exactly(2).descendants('table');
});
});
describe('#children', async () => {
it('matches an element with matching children', async () => {
await mount(_form6 || (_form6 = _jsxs("form", {
children: [_jsx("input", {
type: "text"
}), _jsx("input", {
type: "text"
}), _jsx("input", {
type: "text"
})]
})));
expect(await find('form')).to.have.exactly(3).children('input');
});
it('does not include the element itself', async () => {
await mount(_table2 || (_table2 = _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: _jsx("table", {
children: _jsx("tbody", {
children: _jsx("tr", {
children: _jsx("td", {
children: "I am so nested!"
})
})
})
})
})
})
})
})
})
})
})
})));
expect(await find('table')).to.have.exactly(2).children('table');
});
});
});