@instructure/ui-react-utils
Version:
A React utility library made by Instructure Inc.
110 lines (109 loc) • 5.26 kB
JavaScript
;
var _react = require("react");
var _react2 = require("@testing-library/react");
require("@testing-library/jest-dom");
var _DeterministicIdContext = require("../DeterministicIdContext");
var _jsxRuntime = require("@emotion/react/jsx-runtime");
var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
/*
* 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.
*/
let TestComponent = (_dec = (0, _DeterministicIdContext.withDeterministicId)(), _dec(_class = (_TestComponent = class TestComponent extends _react.Component {
render() {
return (0, _jsxRuntime.jsx)("div", {
"data-testid": "test-component",
id: this.props.deterministicId(),
children: this.props.children
});
}
}, _TestComponent.displayName = "TestComponent", _TestComponent)) || _class);
class WrapperComponent extends _react.Component {
render() {
return _div || (_div = (0, _jsxRuntime.jsx)("div", {
children: (0, _jsxRuntime.jsx)(TestComponent, {})
}));
}
}
WrapperComponent.displayName = "WrapperComponent";
const uniqueIds = el => {
const idList = Array.from(el.children).map(child => child.id);
return new Set(idList).size === idList.length;
};
describe('DeterministicIdContext', () => {
it('can be found and tested with ReactTestUtils', () => {
(0, _react2.render)(_WrapperComponent2 || (_WrapperComponent2 = (0, _jsxRuntime.jsx)(WrapperComponent, {})));
const testComponent = _react2.screen.getByTestId('test-component');
expect(testComponent).toBeInTheDocument();
expect(testComponent.id).toBeDefined();
});
it('should generate unique ids without Provider wrapper', () => {
(0, _react2.render)(_div2 || (_div2 = (0, _jsxRuntime.jsxs)("div", {
"data-testid": "test-components",
children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
})));
const el = _react2.screen.getByTestId('test-components');
expect(uniqueIds(el)).toBe(true);
});
it('should generate unique ids when components are rendered both out and inside of provider', () => {
(0, _react2.render)(_div3 || (_div3 = (0, _jsxRuntime.jsxs)("div", {
"data-testid": "test-components",
children: [(0, _jsxRuntime.jsxs)(_DeterministicIdContext.DeterministicIdContextProvider, {
children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
})));
const el = _react2.screen.getByTestId('test-components');
expect(uniqueIds(el)).toBe(true);
});
it('should generate unique ids with provider only', () => {
const Wrapper = ({
children
}) => {
return (0, _jsxRuntime.jsx)(_DeterministicIdContext.DeterministicIdContextProvider, {
children: (0, _jsxRuntime.jsx)("div", {
"data-testid": "wrapper",
children: children
})
});
};
const children = [];
for (let i = 0; i < 10; i++) {
children.push((0, _jsxRuntime.jsx)(TestComponent, {}, i));
}
(0, _react2.render)((0, _jsxRuntime.jsx)(Wrapper, {
children: children
}));
const el = _react2.screen.getByTestId('wrapper');
expect(uniqueIds(el)).toBe(true);
});
it('should use a global object for ID counter', () => {
const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
const counterValue = 345;
globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
(0, _react2.render)(_div4 || (_div4 = (0, _jsxRuntime.jsxs)("div", {
"data-testid": "test-components",
children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
})));
const instanceCounter = globalThis[instUIInstanceCounter];
expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
});
});