office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
73 lines (71 loc) • 4.02 kB
JavaScript
define(["require", "exports", "react", "react-dom", "react-addons-test-utils", "./Image", "./Image.Props"], function (require, exports, React, ReactDOM, ReactTestUtils, Image_1, Image_Props_1) {
"use strict";
var expect = chai.expect;
/* 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