office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
78 lines (76 loc) • 3.83 kB
JavaScript
;
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ReactDOM = require("react-dom");
var ReactTestUtils = require("react-addons-test-utils");
var expect = chai.expect;
var Image_1 = require("./Image");
var Image_Props_1 = require("./Image.Props");
/* tslint:disable:no-unused-variable */
var testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
var testImage1x2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWP4////fyYGBgYGAB32A/+PRyXoAAAAAElFTkSuQmCC';
var testImage2x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQImWP8////fwYGBgYAGfgD/hEzDhoAAAAASUVORK5CYII=';
/* tslint:enable:no-unused-variable */
describe('Image', function () {
it('renders an image', function (done) {
ReactTestUtils.renderIntoDocument(React.createElement(Image_1.Image, { src: testImage1x1, onLoad: function () {
done();
} }));
});
it('can cover a portrait (tall) frame with a square image', function (done) {
var root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(React.createElement(Image_1.Image, { src: testImage1x1, width: 1, height: 3, imageFit: Image_Props_1.ImageFit.cover, className: 'is-portraitFrame' }), root);
var image = document.querySelector('.ms-Image.is-portraitFrame .ms-Image-image');
try {
expect(image.className).to.contain('ms-Image-image--landscape');
}
catch (e) {
done(e);
}
done();
});
it('can cover a landscape (wide) frame with a square image', function (done) {
var root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(React.createElement(Image_1.Image, { src: testImage1x1, width: 3, height: 1, imageFit: Image_Props_1.ImageFit.cover, className: 'is-landscapeFrame' }), root);
var image = document.querySelector('.ms-Image.is-landscapeFrame .ms-Image-image');
try {
expect(image.className).to.contain('ms-Image-image--portrait');
}
catch (e) {
done(e);
}
done();
});
it('can cover a landscape (wide) parent element with a square image', function (done) {
var root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(React.createElement("div", { style: { width: '20px', height: '10px' } },
React.createElement(Image_1.Image, { className: 'is-frameMaximizedPortrait', imageFit: Image_Props_1.ImageFit.cover, maximizeFrame: true, src: testImage1x1 })), root);
var image = document.querySelector('.ms-Image.is-frameMaximizedPortrait .ms-Image-image');
try {
expect(image.className).to.contain('ms-Image-image--portrait');
}
catch (e) {
done(e);
}
done();
});
it('can cover a portrait (tall) parent element with a square image', function (done) {
var root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(React.createElement("div", { style: { width: '10px', height: '20px' } },
React.createElement(Image_1.Image, { src: testImage1x1, imageFit: Image_Props_1.ImageFit.cover, className: 'is-frameMaximizedLandscape', maximizeFrame: true })), root);
var image = document.querySelector('.ms-Image.is-frameMaximizedLandscape .ms-Image-image');
try {
expect(image.className).to.contain('ms-Image-image--landscape');
}
catch (e) {
done(e);
}
done();
});
});
//# sourceMappingURL=Image.test.js.map