Skip to content

Commit

Permalink
fix(Demo app): Updated dom query functions to target bottom image com…
Browse files Browse the repository at this point in the history 
…p. Added tests for top image co
  • Loading branch information
@jackhkmatthews
jackhkmatthews committed Jan 3, 2018
1 parent 5f03694 commit d3e06d1
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 43 deletions.
86 changes: 52 additions & 34 deletions e2e/app.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,57 @@ describe('ImageLoader Lib E2E Tests', function () {
beforeEach(() => page.setWindowSize(300, 580));

it('should load placeholder image', () => {
expect(page.getImageElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
});

it('should update placeholder loaded boolean on init', () => {
expect(page.getplaceholderBooleanElement().getText()).toEqual('true');
expect(page.getBottomPlaceholderBooleanElement().getText()).toEqual('true');
});
});

describe('inviewport image on load', () => {
beforeEach(() => page.setWindowSize(300, 580));

it('should load full res image if image is in viewport on page load', () => {

page.setWindowSize(300, 580);
browser.wait(() => page.getLoadedImageTopElement());

const imageLoaderCompClass = page.getImageTopLoaderComp().getAttribute('class');
const imgSrc = page.getImageTopElement().getAttribute('srcset');
expect(imageLoaderCompClass).toContain('sn-image-loaded');
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');


});

});

describe('lazy load image', () => {
beforeEach(() => page.setWindowSize(300, 580));

it('should load image on when in viewport', () => {
let imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
let imgSrc = page.getImageElement().getAttribute('src');
it('should load image when scrolled into viewport', () => {
let imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
let imgSrc = page.getImageBottomElement().getAttribute('src');
expect(imageLoaderCompClass).toContain('sn-image-not-loaded');
expect(imgSrc).toEqual('http://via.placeholder.com/35x15?text=placeholder');

page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
page.scrollTo(0, 580 * 2);
browser.wait(() => page.getLoadedImageBottomElement());

imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
imgSrc = page.getImageElement().getAttribute('srcset');
imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
imgSrc = page.getImageBottomElement().getAttribute('srcset');
expect(imageLoaderCompClass).toContain('sn-image-loaded');
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');

});

it('should update full res image event count on when in viewport', () => {
expect(page.getFullResCountElement().getText()).toEqual('0');
it('should update full res image event count scroll into viewport', () => {
expect(page.getBottomFullResCountElement().getText()).toEqual('0');

page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
expect(page.getFullResCountElement().getText()).toEqual('1');
page.scrollTo(0, 580 * 2);
browser.wait(() => page.getLoadedImageBottomElement());
expect(page.getBottomFullResCountElement().getText()).toEqual('1');
});

});
Expand All @@ -63,49 +81,49 @@ describe('ImageLoader Lib E2E Tests', function () {

it('should load correct image for "xs" device size', () => {
page.setWindowSize(300, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
const imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
const imgSrc = page.getImageElement().getAttribute('srcset');
page.scrollTo(0, 580 * 2);
browser.wait(() => page.getLoadedImageBottomElement());
const imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
expect(imageLoaderCompClass).toContain('sn-image-loaded');
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
});

it('should load correct image for "md" device size', () => {
page.setWindowSize(768, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
page.scrollTo(0, 580 * 2.5);
browser.wait(() => page.getLoadedImageBottomElement());

const imgSrc = page.getImageElement().getAttribute('srcset');
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
expect(imgSrc).toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
});

it('should load correct image for "lg" device size', () => {
page.setWindowSize(1024, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
page.scrollTo(0, 580 * 2);
browser.wait(() => page.getLoadedImageBottomElement());

const imgSrc = page.getImageElement().getAttribute('srcset');
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
expect(imgSrc).toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x');
});

it('should update image loaded event count on window resize when image in viewport', () => {
expect(page.getFullResCountElement().getText()).toEqual('0');
expect(page.getBottomFullResCountElement().getText()).toEqual('0');

page.setWindowSize(320, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
expect(page.getFullResCountElement().getText()).toEqual('1');
page.scrollTo(0, 580 * 3);
browser.wait(() => page.getLoadedImageBottomElement());
expect(page.getBottomFullResCountElement().getText()).toEqual('1');

page.setWindowSize(768, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
expect(page.getFullResCountElement().getText()).toEqual('2');
page.scrollTo(0, 580 * 3);
browser.wait(() => page.getLoadedImageBottomElement());
expect(page.getBottomFullResCountElement().getText()).toEqual('2');

page.setWindowSize(1024, 580);
page.scrollTo(0, 580 * 1.5);
browser.wait(() => page.getLoadedImageElement());
expect(page.getFullResCountElement().getText()).toEqual('3');
page.scrollTo(0, 580 * 3);
browser.wait(() => page.getLoadedImageBottomElement());
expect(page.getBottomFullResCountElement().getText()).toEqual('3');
});

});
Expand Down
30 changes: 21 additions & 9 deletions e2e/app.po.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,39 @@ export class AppPage {
return browser.driver.manage().window().setSize(x, y);
}

getImageLoaderComp() {
return element(by.css('sn-image-loader'));
getImageTopLoaderComp() {
return element(by.css('.sn-image-loader--top'));
}

getImageElement() {
return element(by.css('sn-image-loader .foo'));
getImageBottomLoaderComp() {
return element(by.css('.sn-image-loader--bottom'));
}

getLoadedImageElement() {
return element(by.css('.sn-image-loaded')).isPresent();
getImageTopElement() {
return element(by.css('.sn-image-loader--top .img'));
}

getImageBottomElement() {
return element(by.css('.sn-image-loader--bottom .img'));
}

getLoadedImageBottomElement() {
return element(by.css('.sn-image-loader--bottom.sn-image-loaded')).isPresent();
}

getLoadedImageTopElement() {
return element(by.css('.sn-image-loader--top.sn-image-loaded')).isPresent();
}

getLoadedImageElementBySrcSet(srcSet) {
return element(by.css(`img[srcSet="${srcSet}"]`)).isPresent();
return element(by.css(`.img--bottom[srcSet="${srcSet}"]`)).isPresent();
}

getplaceholderBooleanElement() {
getBottomPlaceholderBooleanElement() {
return element(by.css('.placeholder-boolean'));
}

getFullResCountElement() {
getBottomFullResCountElement() {
return element(by.css('.full-res-count'));
}
}

0 comments on commit d3e06d1

Please sign in to comment.