Skip to content

Commit 8c182ac

Browse files
edoparearyeeedoparearyee
committed
test(ImageLoader): adding e2e tests
1 parent 96b3f0c commit 8c182ac

File tree

9 files changed

+102
-63
lines changed

9 files changed

+102
-63
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
[![Build Status][travis-badge]][travis-badge-url]
33
[![Coverage Status][coveralls-badge]][coveralls-badge-url]
44

5-
A simple progressive/responsive/lazy loading image library for [Angular (2/4+)][angular] with no other dependencies that detects browser size and loads the appropriate image on when the element is in view
5+
A simple progressive/responsive/lazy loading image library for [Angular (2/4+)][angular] that detects browser size and loads the appropriate image only when the element is in view. This package requires [angular-inviewport][angular-inviewport]
66

77
This is a simple library for [Angular][angular], implemented in the [Angular Package Format v4.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
88

99

1010
## Install
1111

12-
`npm i @thisissoon/angular-image-loader --save`
12+
`npm i @thisissoon/{angular-image-loader,angular-inviewport} --save`
1313

1414
`app.module.ts`
1515
```ts
@@ -77,3 +77,4 @@ export class AppComponent {
7777
[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-image-loader/badge.svg?branch=master
7878
[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-image-loader?branch=master
7979
[angular]: https://angular.io/
80+
[angular-inviewport]: https://github.com/thisissoon/angular-inviewport

‎integration/e2e/app.e2e-spec.ts‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,50 @@ describe('ImageLoader Lib E2E Tests', function () {
1212
});
1313
});
1414

15-
// describe('lazy load image', () => {
16-
// it('should load image on when in viewport', () => {
15+
describe('lazy load image', () => {
16+
beforeEach(() => browser.driver.manage().window().setSize(300, 580));
1717

18-
// });
19-
// });
18+
it('should load image on when in viewport', () => {
19+
expect(element(by.css('sn-image-loader.sn-image-not-loaded')).isPresent()).toBeTruthy();
20+
expect
21+
(element(by.css('sn-image-loader.sn-image-not-loaded .foo'))
22+
.getAttribute('src'))
23+
.toEqual('http://via.placeholder.com/35x15?text=placeholder');
24+
browser.executeScript('window.scrollTo(0, window.innerHeight * 1.5)');
25+
browser.sleep(1000);
26+
expect(element(by.css('sn-image-loader.sn-image-loaded')).isPresent()).toBeTruthy();
27+
expect
28+
(element(by.css('sn-image-loader.sn-image-loaded .foo'))
29+
.getAttribute('srcset'))
30+
.toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
31+
});
32+
});
33+
34+
describe('responsive image', () => {
35+
beforeEach(() => browser.driver.manage().window().setSize(300, 580));
36+
37+
it('should load correct image for device size', () => {
38+
browser.executeScript('window.scrollTo(0, window.innerHeight * 1.5)');
39+
browser.sleep(1000);
40+
expect(element(by.css('sn-image-loader.sn-image-loaded')).isPresent()).toBeTruthy();
41+
expect
42+
(element(by.css('sn-image-loader.sn-image-loaded .foo'))
43+
.getAttribute('srcset'))
44+
.toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
45+
46+
browser.driver.manage().window().setSize(768, 580);
47+
browser.sleep(1000);
48+
expect
49+
(element(by.css('sn-image-loader.sn-image-loaded .foo'))
50+
.getAttribute('srcset'))
51+
.toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
52+
53+
browser.driver.manage().window().setSize(1024, 580);
54+
browser.sleep(1000);
55+
expect
56+
(element(by.css('sn-image-loader.sn-image-loaded .foo'))
57+
.getAttribute('srcset'))
58+
.toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x');
59+
});
60+
});
2061
});

‎integration/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎integration/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@angular/platform-browser": "^4.3.4",
3333
"@angular/platform-browser-dynamic": "^4.3.4",
3434
"@thisissoon/angular-image-loader": "../dist/",
35+
"@thisissoon/angular-inviewport": "^1.0.1",
3536
"core-js": "^2.4.1",
3637
"rxjs": "5.4.3",
3738
"systemjs": "0.19.40",

‎integration/src/app/app.component.css‎

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,27 @@
11
:host {
22
display: block;
33
font-family: Roboto, sans-serif;
4-
padding-top: 100px;
54
}
65

7-
.foo {
8-
align-items: center;
9-
background-color: #563d7c;
10-
color: #ffffff;
11-
display: flex;
12-
height: 100px;
13-
justify-content: center;
14-
left: 0;
15-
position: fixed;
16-
right: 0;
17-
text-align: center;
18-
top: 0;
19-
transition: all .35s ease-in-out;
20-
}
21-
22-
.foo .down,
23-
.foo .up {
24-
display: none;
25-
}
26-
27-
.foo.sn-scrolling-down .down,
28-
.foo.sn-scrolling-up .up {
29-
display: block;
6+
.spacer {
7+
min-height: 150vh;
308
}
319

32-
.foo.sn-minimise {
33-
background-color: #007bff;
34-
height: 50px;
10+
:host /deep/ .foo {
11+
transition: all .35s ease-in-out;
12+
width: 150px;
3513
}
3614

37-
.bar {
38-
align-items: center;
39-
background-color: #d4edda;
40-
color: #ffffff;
41-
display: flex;
42-
height: 100px;
43-
justify-content: center;
44-
text-align: center;
45-
transition: all .35s ease-in-out;
15+
@media (min-width: 768px) {
16+
:host /deep/ .foo {
17+
width: 500px;
18+
}
4619
}
4720

48-
.bar.sn-affix {
49-
left: 0;
50-
position: fixed;
51-
right: 0;
52-
top: 0;
53-
z-index: 9999;
21+
:host /deep/ .sn-image-not-loaded .foo {
22+
filter: blur(20px);
5423
}
5524

56-
.spacer {
57-
height: 150vh;
25+
:host /deep/ .sn-image-loaded .foo {
26+
filter: blur(0px);
5827
}

‎integration/src/app/app.component.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<h1>Scroll down ↓</h1>
2-
<nav class="foo" imageLoader [debounce]="0">
3-
My nav&nbsp;
4-
<span class="down">Going down</span>
5-
<span class="up">Going up</span>
6-
</nav>
72
<div class="spacer"></div>
8-
<div class="bar" imageLoader [debounce]="0">
9-
Sticky when scrolled passed
10-
</div>
3+
<sn-image-loader
4+
[image]="image"
5+
[sizes]="sizes"
6+
imgClass="foo"
7+
></sn-image-loader>
118
<div class="spacer"></div>

‎integration/src/app/app.component.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,32 @@
11
import { Component } from '@angular/core';
2+
import { ResponsiveImage, Breakpoint, Size } from '@thisissoon/angular-image-loader';
23

34
@Component({
45
selector: 'integration-app',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.css']
78
})
8-
export class AppComponent { }
9+
export class AppComponent {
10+
sizes: Breakpoint[] = [
11+
{ size: 'xs', width: 0},
12+
{ size: 'md', width: 768},
13+
{ size: 'lg', width: 992},
14+
];
15+
16+
image: ResponsiveImage = {
17+
placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
18+
fallback: 'http://via.placeholder.com/350x150?text=fallback',
19+
xs: {
20+
'@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
21+
'@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
22+
},
23+
md: {
24+
'@1x': 'http://via.placeholder.com/350x250?text=md+1x',
25+
'@2x': 'http://via.placeholder.com/700x500?text=md+2x'
26+
},
27+
lg: {
28+
'@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
29+
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
30+
}
31+
};
32+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@thisissoon/angular-image-loader",
33
"version": "0.0.0",
4-
"description": "A simple progressive/responsive/lazy loading image library for Angular 2/4+ with no other dependencies that detects browser size and loads the appropriate image on when the element is in view",
4+
"description": "A simple progressive/responsive/lazy loading image library for Angular (2/4+) that detects browser size and loads the appropriate image only when the element is in view. This package requires angular-inviewport",
55
"keywords": [
66
"angular",
77
"angular 2",

‎src/lib/src/module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { InViewportModule } from '@thisissoon/angular-inviewport';
55
import { ImageLoaderComponent } from './image-loader.component';
66

77
/**
8-
* A simple progressive/responsive/lazy loading image library
9-
* for Angular 2/4+ with no other dependencies that detects browser size and
10-
* loads the appropriate image on when the element is in view.
8+
* A simple progressive/responsive/lazy loading image library for
9+
* Angular (2/4+) that detects browser size and loads the appropriate
10+
* image only when the element is in view.
11+
* This package requires angular-inviewport
1112
*
1213
* @export
1314
* @class ImageLoaderModule

0 commit comments

Comments
 (0)