@instructure/ui-test-utils
Version:
A UI testing library made by Instructure Inc.
358 lines (357 loc) • 15.1 kB
JavaScript
"use strict";
var _index = require("../index");
var _jsxRuntime = require("@emotion/react/jsx-runtime");
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.
*/
describe('assertions', async () => {
describe('#text', async () => {
it('matches elements by matching their text content', async () => {
const subject = await (0, _index.mount)(_div || (_div = (0, _jsxRuntime.jsxs)("div", {
"data-locator": "TestLocator",
children: [(0, _jsxRuntime.jsx)("span", {
children: "Currently showing: "
}), (0, _jsxRuntime.jsx)("span", {
children: `Step
1
of 4`
})]
})));
(0, _index.expect)((0, _index.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 (0, _index.mount)(_div2 || (_div2 = (0, _jsxRuntime.jsx)("div", {})));
subject.getDOMNode().appendChild(div);
(0, _index.expect)((0, _index.within)(subject.getDOMNode())).to.have.text('£24.99');
});
it('matches text content correctly when nodes are nested', async () => {
const subject = await (0, _index.mount)(_div3 || (_div3 = (0, _jsxRuntime.jsx)("div", {
children: (0, _jsxRuntime.jsx)("span", {
children: "Hello World"
})
})));
(0, _index.expect)((0, _index.within)(subject.getDOMNode())).to.have.text('Hello World');
});
});
describe('#contain', async () => {
it('matches an element that contains another element', async () => {
await (0, _index.mount)(_div4 || (_div4 = (0, _jsxRuntime.jsx)("div", {
id: "foo",
children: (0, _jsxRuntime.jsx)("div", {
id: "bar",
children: "Hello"
})
})));
const foo = await (0, _index.find)('#foo');
const bar = await (0, _index.find)('#bar');
(0, _index.expect)(foo).to.contain(bar);
(0, _index.expect)(foo).to.not.contain(document.body);
});
});
describe('#className', async () => {
it('matches an element that has a class', async () => {
await (0, _index.mount)(_div5 || (_div5 = (0, _jsxRuntime.jsx)("div", {
className: "foo bar",
id: "foo",
children: (0, _jsxRuntime.jsx)("div", {
className: "bar",
id: "bar",
children: "Hello"
})
})));
const foo = await (0, _index.find)('#foo');
const bar = await (0, _index.find)('#bar');
(0, _index.expect)(foo).to.have.className('foo');
(0, _index.expect)(bar).to.not.have.className('foo');
(0, _index.expect)(bar).to.have.className('bar');
});
});
describe('#label', async () => {
it('matches an input with an aria-labelledby attribute', async () => {
await (0, _index.mount)(_div6 || (_div6 = (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("label", {
id: "name-label",
children: "Name"
}), (0, _jsxRuntime.jsx)("input", {
"aria-labelledby": "name-label",
id: "name-id"
})]
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('Name');
});
it('matches an input with a complex aria-labelledby attribute', async () => {
await (0, _index.mount)(_div7 || (_div7 = (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("label", {
id: "name-label-one",
children: "Name"
}), (0, _jsxRuntime.jsx)("span", {
id: "name-label-two",
children: "(Last, First)"
}), (0, _jsxRuntime.jsx)("input", {
"aria-labelledby": "name-label-one name-label-two",
id: "name-id"
})]
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('Name (Last, First)');
});
it('matches an input with an id via the `for` attribute', async () => {
await (0, _index.mount)(_div8 || (_div8 = (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("label", {
htmlFor: "first",
children: "First name"
}), (0, _jsxRuntime.jsx)("input", {
id: "first"
})]
}), (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("label", {
htmlFor: "last",
children: (0, _jsxRuntime.jsx)("span", {
children: "Last name"
})
}), (0, _jsxRuntime.jsx)("input", {
id: "last"
})]
})]
})));
(0, _index.expect)(await (0, _index.find)('#first')).to.have.label('First name');
(0, _index.expect)(await (0, _index.find)('#last')).to.have.label('Last name');
});
it('matches an input with an id via a for attribute', async () => {
await (0, _index.mount)(_div9 || (_div9 = (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("label", {
htmlFor: "name-id",
children: "Name"
}), (0, _jsxRuntime.jsx)("input", {
id: "name-id"
})]
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('Name');
});
it('matches an input nested in a label', async () => {
await (0, _index.mount)(_label || (_label = (0, _jsxRuntime.jsxs)("label", {
children: ["Name", (0, _jsxRuntime.jsx)("input", {})]
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('Name');
});
it('matches an input with an aria-label', async () => {
await (0, _index.mount)(_input || (_input = (0, _jsxRuntime.jsx)("input", {
"aria-label": "Name"
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('Name');
});
it('matches a button by its text content', async () => {
await (0, _index.mount)(_button || (_button = (0, _jsxRuntime.jsx)("button", {
children: "Submit"
})));
(0, _index.expect)(await (0, _index.find)('button')).to.have.label('Submit');
});
it('matches a fieldset by its legend', async () => {
await (0, _index.mount)(_fieldset || (_fieldset = (0, _jsxRuntime.jsxs)("fieldset", {
children: [(0, _jsxRuntime.jsx)("legend", {
children: "Full name"
}), (0, _jsxRuntime.jsxs)("label", {
children: ["First name ", (0, _jsxRuntime.jsx)("input", {
type: "text"
})]
})]
})));
(0, _index.expect)(await (0, _index.find)('fieldset')).to.have.label('Full name');
(0, _index.expect)(await (0, _index.find)('input')).to.have.label('First name');
});
});
describe('#title', async () => {
it('matches an element by its title', async () => {
await (0, _index.mount)(_div0 || (_div0 = (0, _jsxRuntime.jsxs)("div", {
children: [(0, _jsxRuntime.jsx)("span", {
title: "Ignore this",
children: "foo"
}), (0, _jsxRuntime.jsx)("button", {
title: "Delete",
children: "bar"
}), (0, _jsxRuntime.jsx)("span", {
title: "Ignore this as well",
children: "baz"
})]
})));
(0, _index.expect)(await (0, _index.find)('button')).to.have.title('Delete');
});
it('matches an SVG element by its title element content', async () => {
await (0, _index.mount)(_svg || (_svg = (0, _jsxRuntime.jsxs)("svg", {
children: [(0, _jsxRuntime.jsx)("title", {
children: "Close"
}), (0, _jsxRuntime.jsx)("g", {
children: (0, _jsxRuntime.jsx)("path", {})
})]
})));
(0, _index.expect)(await (0, _index.find)('svg')).to.have.title('Close');
});
});
describe('#value', async () => {
it('matches an element by its value', async () => {
await (0, _index.mount)(_input2 || (_input2 = (0, _jsxRuntime.jsx)("input", {
type: "text",
defaultValue: "Norris"
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.value('Norris');
});
});
describe('#attribute', async () => {
it('matches an element by attribute', async () => {
await (0, _index.mount)(_input3 || (_input3 = (0, _jsxRuntime.jsx)("input", {
type: "text"
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.attribute('type');
});
it('can find an element by attribute name and value', async () => {
await (0, _index.mount)(_input4 || (_input4 = (0, _jsxRuntime.jsx)("input", {
type: "text"
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.attribute('type', 'text');
});
});
describe('#ancestors', async () => {
it('matches an input with a matching parent element', async () => {
await (0, _index.mount)(_form || (_form = (0, _jsxRuntime.jsx)("form", {
children: (0, _jsxRuntime.jsx)("input", {
type: "text"
})
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.exactly(1).ancestors('form');
});
it('does not include the element itself', async () => {
await (0, _index.mount)(_form2 || (_form2 = (0, _jsxRuntime.jsx)("form", {
children: (0, _jsxRuntime.jsx)("input", {
type: "text"
})
})));
(0, _index.expect)(await (0, _index.find)('input')).to.not.have.ancestors('input');
});
});
describe('#parents', async () => {
it('matches an input with a matching parent element', async () => {
await (0, _index.mount)(_form3 || (_form3 = (0, _jsxRuntime.jsx)("form", {
children: (0, _jsxRuntime.jsx)("input", {
type: "text"
})
})));
(0, _index.expect)(await (0, _index.find)('input')).to.have.exactly(1).parents('form');
});
it('does not include the element itself', async () => {
await (0, _index.mount)(_form4 || (_form4 = (0, _jsxRuntime.jsx)("form", {
children: (0, _jsxRuntime.jsx)("input", {
type: "text"
})
})));
(0, _index.expect)(await (0, _index.find)('input')).to.not.have.parents('input');
});
});
describe('#descendants', async () => {
it('matches an element with matching children', async () => {
await (0, _index.mount)(_form5 || (_form5 = (0, _jsxRuntime.jsxs)("form", {
children: [(0, _jsxRuntime.jsx)("input", {
type: "text"
}), (0, _jsxRuntime.jsx)("input", {
type: "text"
}), (0, _jsxRuntime.jsx)("input", {
type: "text"
})]
})));
(0, _index.expect)(await (0, _index.find)('form')).to.have.exactly(3).descendants('input');
});
it('does not include the element itself', async () => {
await (0, _index.mount)(_table || (_table = (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: "I am so nested!"
})
})
})
})
})
})
})
})
})
})
})
})));
(0, _index.expect)(await (0, _index.find)('table')).to.have.exactly(2).descendants('table');
});
});
describe('#children', async () => {
it('matches an element with matching children', async () => {
await (0, _index.mount)(_form6 || (_form6 = (0, _jsxRuntime.jsxs)("form", {
children: [(0, _jsxRuntime.jsx)("input", {
type: "text"
}), (0, _jsxRuntime.jsx)("input", {
type: "text"
}), (0, _jsxRuntime.jsx)("input", {
type: "text"
})]
})));
(0, _index.expect)(await (0, _index.find)('form')).to.have.exactly(3).children('input');
});
it('does not include the element itself', async () => {
await (0, _index.mount)(_table2 || (_table2 = (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: (0, _jsxRuntime.jsx)("table", {
children: (0, _jsxRuntime.jsx)("tbody", {
children: (0, _jsxRuntime.jsx)("tr", {
children: (0, _jsxRuntime.jsx)("td", {
children: "I am so nested!"
})
})
})
})
})
})
})
})
})
})
})
})));
(0, _index.expect)(await (0, _index.find)('table')).to.have.exactly(2).children('table');
});
});
});