react-ions
Version:
An open source set of React components that implement Ambassador's Design and UX patterns.
156 lines (127 loc) • 7.56 kB
JavaScript
;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Avatar = require('../Avatar');
var _Avatar2 = _interopRequireDefault(_Avatar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var wrapper = void 0,
inst = void 0;
var data = {
src: 'https://ambassador-api.s3.amazonaws.com/uploads/avatars/1088_2016_05_04_12_16_49.jpg',
alt: 'Cat',
size: '100',
letterBackgroundColor: '#8b0000',
letters: 'cf',
fadeIn: true,
optClass: 'test'
};
describe('Image-based Avatar', function () {
it('should shallow render with image-related props', function () {
var avatar = shallow(_react2.default.createElement(_Avatar2.default, {
src: data.src,
alt: data.alt,
size: data.size,
fadeIn: data.fadeIn,
optClass: data.optClass
}));
expect(avatar).toMatchSnapshot();
});
});
describe('Letter-based avatar', function () {
it('should shallow render with letter-related properties', function () {
var avatar = shallow(_react2.default.createElement(_Avatar2.default, {
letterBackgroundColor: data.letterBackgroundColor,
letters: data.letters,
size: data.size,
fadeIn: data.fadeIn,
optClass: data.optClass
}));
expect(avatar).toMatchSnapshot();
});
});
describe('sCU', function () {
it('should only update under certain circumstances', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { size: '100', src: 'test', letters: 'aa' }));
inst = wrapper.instance();
var nextProps = {
size: '100',
src: 'test',
letters: 'aa',
fadeIn: true
};
var nextState = {
loaded: false
};
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(false);
nextProps.size = '90';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(true);
nextProps.size = '100';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(false);
nextProps.letters = 'ab';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(true);
nextProps.letters = 'aa';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(false);
nextProps.src = 'test2';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(true);
nextProps.src = 'test';
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(false);
nextState.loaded = true;
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(true);
nextProps.fadeIn = false;
expect(inst.shouldComponentUpdate(nextProps, nextState)).toBe(true);
});
});
describe('Background color based on letters logic', function () {
it('should return a proper background color based on the first character of the letter', function () {
var colorCases = [{ character: undefined, color: '#F93943' }, { character: 'k', color: '#F93943' }, { character: 'u', color: '#F93943' }, { character: 'b', color: '#796DE8' }, { character: 'l', color: '#796DE8' }, { character: 'v', color: '#796DE8' }, { character: 'c', color: '#6E3FAF' }, { character: 'm', color: '#6E3FAF' }, { character: 'w', color: '#6E3FAF' }, { character: 'd', color: '#28D397' }, { character: 'n', color: '#28D397' }, { character: 'x', color: '#28D397' }, { character: 'e', color: '#ED7C5A' }, { character: 'o', color: '#ED7C5A' }, { character: 'y', color: '#ED7C5A' }, { character: 'f', color: '#F93983' }, { character: 'p', color: '#F93983' }, { character: 'z', color: '#F93983' }, { character: 'g', color: '#F9B339' }, { character: 'q', color: '#F9B339' }, { character: 'h', color: '#6BE2F9' }, { character: 'r', color: '#6BE2F9' }, { character: 'i', color: '#AAE667' }, { character: 's', color: '#AAE667' }, { character: 'j', color: '#ED7BE9' }, { character: 't', color: '#ED7BE9' }, { character: 'K', color: '#F93943' }, { character: 'U', color: '#F93943' }, { character: 'B', color: '#796DE8' }, { character: 'L', color: '#796DE8' }, { character: 'V', color: '#796DE8' }, { character: 'C', color: '#6E3FAF' }, { character: 'M', color: '#6E3FAF' }, { character: 'W', color: '#6E3FAF' }, { character: 'D', color: '#28D397' }, { character: 'N', color: '#28D397' }, { character: 'X', color: '#28D397' }, { character: 'E', color: '#ED7C5A' }, { character: 'O', color: '#ED7C5A' }, { character: 'Y', color: '#ED7C5A' }, { character: 'F', color: '#F93983' }, { character: 'P', color: '#F93983' }, { character: 'Z', color: '#F93983' }, { character: 'G', color: '#F9B339' }, { character: 'Q', color: '#F9B339' }, { character: 'H', color: '#6BE2F9' }, { character: 'R', color: '#6BE2F9' }, { character: 'I', color: '#AAE667' }, { character: 'S', color: '#AAE667' }, { character: 'J', color: '#ED7BE9' }, { character: 'T', color: '#ED7BE9' }, { character: '0', color: '#F93943' }, { character: '1', color: '#F93943' }, { character: '2', color: '#F93943' }, { character: '3', color: '#F93943' }, { character: '4', color: '#F93943' }, { character: '5', color: '#F93943' }, { character: '6', color: '#F93943' }, { character: '7', color: '#F93943' }, { character: '8', color: '#F93943' }, { character: '9', color: '#F93943' }];
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { letters: 'ab' }));
inst = wrapper.instance();
expect(inst.getBackgroundColor()).toBe('#F93943');
for (var i = colorCases.length - 1; i >= 0; i--) {
wrapper.setProps({ letters: colorCases[i].character });
wrapper.update();
expect(inst.getBackgroundColor()).toBe(colorCases[i].color);
}
});
describe('transparent background color', function () {
it('should set the background color to transparent when there are no letters', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { src: 'test' }));
inst = wrapper.instance();
expect(inst.getBackgroundColor()).toBe('transparent');
});
});
describe('style object for text', function () {
it('should return a style object for the text', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { size: '100' }));
inst = wrapper.instance();
var style = inst.getTextStyle();
expect(style.fontSize).toBe('60px');
});
});
describe('style object for wrapper', function () {
it('should return a style object for the wrapper', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { size: '100', letterBackgroundColor: '#ffffff' }));
inst = wrapper.instance();
var style = inst.getWrapperStyle();
expect(style.width).toBe('100px');
expect(style.height).toBe('100px');
expect(style.backgroundColor).toBe('#ffffff');
});
});
describe('fallback avatar with no more than two letters', function () {
it('should shallow render a fallback avatar with no more than two letters', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { letters: 'cfffff' }));
expect(wrapper.find('span').first().text()).toBe('cf');
});
});
describe('fallback avatar', function () {
it('should shallow render a fallback avatar', function () {
wrapper = shallow(_react2.default.createElement(_Avatar2.default, { letters: 'cf' }));
expect(wrapper.find('img').length).toBe(0);
expect(wrapper.find('div').length).toBe(2);
expect(wrapper.find('span').length).toBe(1);
expect(wrapper.find('span').first().text()).toBe('cf');
expect(wrapper.state().loaded).toBe.true;
});
});
});