@wix/design-system
Version:
@wix/design-system
313 lines (312 loc) • 11.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require("."));
var _Badge = require("./Badge.constants");
var _unit = require("../utils/test-utils/unit");
var _BadgeUni = require("./Badge.uni.driver");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Badge/Badge.spec.tsx",
_this = void 0;
describe('Badge', () => {
var render = (0, _unit.createRendererWithUniDriver)(_BadgeUni.badgeUniDriverFactory);
var createDriver = jsx => render(jsx).driver;
afterEach(() => (0, _unit.cleanup)());
describe('type prop', () => {
it('should be solid by default', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.getType()).toBe(_Badge.TYPE.solid);
}));
Object.keys(_Badge.TYPE).forEach(type => {
it("should be ".concat(type), /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
type: type,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}
}, "Hello"));
expect(yield driver.getType()).toBe(type);
}));
});
it('should use default value when value is provided as undefined', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
type: undefined,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.getType()).toBe(_Badge.TYPE.solid);
}));
});
describe('skin prop', () => {
it('should be general by default', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.getSkin()).toBe(_Badge.SKIN.general);
}));
Object.keys(_Badge.SKIN).forEach(skin => {
it("should be ".concat(skin), /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
skin: skin,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 11
}
}, "Hello"));
expect(yield driver.getSkin()).toBe(skin);
}));
});
});
describe('uppercase prop', () => {
it('should be uppercase by default', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.isUppercase()).toBe(true);
}));
it('should be free-case when value is false', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
uppercase: false,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.isUppercase()).toBe(false);
}));
});
describe('size prop', () => {
it('should be medium by default', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.getSize()).toBe(_Badge.SIZE.medium);
}));
Object.keys(_Badge.SIZE).forEach(size => {
it("should be ".concat(size), /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
size: size,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}
}, "Hello"));
expect(yield driver.getSize()).toBe(size);
}));
});
});
describe('onClick prop', () => {
it('cursor should be default when no onClick', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.hasClickCursor()).toBe(false);
}));
it('cursor should be pointer when onClick set', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: e => e,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.hasClickCursor()).toBe(true);
}));
it('should call event handler on badge click', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var handler = vi.fn();
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: () => handler(),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 9
}
}, "Hello"));
yield driver.click();
expect(handler).toHaveBeenCalled();
}));
it('should have tabIndex=0 if onClick passed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: () => {},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.base.attr('tabindex')).toBe('0');
}));
it('should not have tabIndex if onClick is not passed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.base.attr('tabindex')).toBeNull();
}));
it('should have role="button" if onClick passed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: () => {},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.base.attr('role')).toBe('button');
}));
it('should not have role if onClick is not passed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.base.attr('role')).toBeNull();
}));
it('should call onClick when Enter key is pressed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var onClick = vi.fn();
var {
container
} = render(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: onClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 36
}
}, "Hello"));
_unit.fireEvent.keyDown(container.firstElementChild, {
key: 'Enter'
});
expect(onClick).toHaveBeenCalledTimes(1);
}));
it('should call onClick when Space key is pressed', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var onClick = vi.fn();
var {
container
} = render(/*#__PURE__*/_react.default.createElement(_.default, {
onClick: onClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 36
}
}, "Hello"));
_unit.fireEvent.keyDown(container.firstElementChild, {
key: ' '
});
expect(onClick).toHaveBeenCalledTimes(1);
}));
});
describe('children prop', () => {
it('should render the text given as a children prop', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 35
}
}, "Hello"));
expect(yield driver.text()).toBe('Hello');
}));
});
describe('customContent prop', () => {
it('should render customContent instead of the children text', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var driver = createDriver(/*#__PURE__*/_react.default.createElement(_.default, {
customContent: /*#__PURE__*/_react.default.createElement("svg", {
"data-hook": "custom-icon",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 31
}
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 9
}
}, "Hello"));
expect(yield driver.text()).toBe('');
}));
it('should render the customContent node', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var {
container
} = render(/*#__PURE__*/_react.default.createElement(_.default, {
customContent: /*#__PURE__*/_react.default.createElement("svg", {
"data-hook": "custom-icon",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 31
}
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 9
}
}, "Hello"));
expect(container.querySelector('[data-hook="custom-icon"]')).not.toBeNull();
}));
});
});
//# sourceMappingURL=Badge.spec.js.map