wix-style-react
Version:
wix-style-react
309 lines (262 loc) • 10.3 kB
JavaScript
;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _ImageViewer = require('./ImageViewer');
var _ImageViewer2 = _interopRequireDefault(_ImageViewer);
var _ImageViewer3 = require('./ImageViewer.driver');
var _ImageViewer4 = _interopRequireDefault(_ImageViewer3);
var _react3 = require('../../test/utils/react');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
describe('ImageViewer', function () {
var render = (0, _react3.createRendererWithDriver)(_ImageViewer4.default);
var createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
afterEach(function () {
return (0, _react3.cleanup)();
});
var IMAGE_URL = 'some-image-url.png';
var addImage = jest.fn();
var updateImage = jest.fn();
var removeImage = jest.fn();
describe('when default scenario', function () {
var props = void 0,
driver = void 0;
beforeEach(function () {
props = {
imageUrl: IMAGE_URL,
onAddImage: addImage,
onUpdateImage: updateImage,
onRemoveImage: removeImage
};
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
});
it('should display image url', function () {
expect(driver.getImageUrl()).toBe(IMAGE_URL);
});
it('should trigger update image', function () {
driver.clickUpdate();
expect(updateImage).toBeCalled();
});
it('should trigger remove image', function () {
driver.clickRemove();
expect(removeImage).toBeCalled();
});
it('should trigger add image', function () {
props = {
imageUrl: '',
onAddImage: addImage
};
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
driver.clickAdd();
expect(addImage).toBeCalled();
});
});
it('should not display image if not exists', function () {
var props = {
imageUrl: ''
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.isImageVisible()).toBeFalsy();
});
describe('height and width', function () {
it('should be added to style attribute when image is not present', function () {
var props = {
imageUrl: '',
width: 300,
height: 300
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.getContainerStyles()).toEqual('width: 300px; height: 300px;');
});
it('should be added to style attribute when image is present', function () {
var props = {
imageUrl: IMAGE_URL,
width: 300,
height: 300
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.getContainerStyles()).toEqual('width: 300px; height: 300px;');
});
it('should not add style attribute when width and height props are not passed', function () {
var props = {
imageUrl: IMAGE_URL
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.getContainerStyles()).toEqual(null);
});
});
describe('hide or show add image', function () {
it('should not display AddItem component if image exists', function () {
var props = {
imageUrl: IMAGE_URL
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.isAddItemVisible()).toBeFalsy();
});
it('should display AddItem component if image dosnt exists', function () {
var props = {
imageUrl: ''
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.isAddItemVisible()).toBeTruthy();
});
});
describe('tooltips', function () {
var tooltipProps = {
relative: true,
showImmediately: true
};
describe('add image', function () {
var props = {
imageUrl: '',
tooltipProps: tooltipProps,
addImageInfo: 'add image info'
};
it('should display provided tooltip content', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var driver;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
_context.t0 = expect;
_context.next = 4;
return driver.getAddTooltipContent();
case 4:
_context.t1 = _context.sent;
_context.t2 = props.addImageInfo;
(0, _context.t0)(_context.t1).toEqual(_context.t2);
case 7:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
})));
});
describe('update image', function () {
var props = {
imageUrl: IMAGE_URL,
tooltipProps: tooltipProps,
updateImageInfo: 'update image info'
};
it('should display provided tooltip content', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var driver;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
_context2.t0 = expect;
_context2.next = 4;
return driver.getUpdateTooltipContent();
case 4:
_context2.t1 = _context2.sent;
_context2.t2 = props.updateImageInfo;
(0, _context2.t0)(_context2.t1).toEqual(_context2.t2);
case 7:
case 'end':
return _context2.stop();
}
}
}, _callee2, undefined);
})));
});
describe('remove image', function () {
var props = {
imageUrl: IMAGE_URL,
tooltipProps: tooltipProps,
removeImageInfo: 'remove image info'
};
it('should display provided tooltip content', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var driver;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
_context3.t0 = expect;
_context3.next = 4;
return driver.getRemoveTooltipContent();
case 4:
_context3.t1 = _context3.sent;
_context3.t2 = props.removeImageInfo;
(0, _context3.t0)(_context3.t1).toEqual(_context3.t2);
case 7:
case 'end':
return _context3.stop();
}
}
}, _callee3, undefined);
})));
});
describe('update button disabled', function () {
var props = {
imageUrl: IMAGE_URL,
showUpdateButton: false
};
it('should hide update button', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var driver;
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
_context4.t0 = expect;
_context4.next = 4;
return driver.updateExists();
case 4:
_context4.t1 = _context4.sent;
(0, _context4.t0)(_context4.t1).toEqual(false);
case 6:
case 'end':
return _context4.stop();
}
}
}, _callee4, undefined);
})));
});
describe('error state', function () {
it('should not display error icon by defualt', function () {
var props = {
imageUrl: '',
width: 300,
height: 300
};
var driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
expect(driver.isErrorVisible()).toBeFalsy();
});
it('should display error icon on error with the correct message', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var props, driver;
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
props = {
imageUrl: '',
width: 300,
height: 300,
error: true,
errorMessage: 'error message',
tooltipProps: tooltipProps
};
driver = createDriver(_react2.default.createElement(_ImageViewer2.default, props));
_context5.t0 = expect;
_context5.next = 5;
return driver.getErrorTooltipContent();
case 5:
_context5.t1 = _context5.sent;
_context5.t2 = props.errorMessage;
(0, _context5.t0)(_context5.t1).toEqual(_context5.t2);
case 8:
case 'end':
return _context5.stop();
}
}
}, _callee5, undefined);
})));
});
});
});