ci(circle): run tests on circle instead of travis

Author: edoparearyee

.circleci/config.yml

@@ -0,0 +1,42 @@
+#
+# CircleCI configuration for @thisissoon/angular-image-loader
+#
+
+version: 2
+
+jobs:
+  setup:
+    working_directory: ~/@thisissoon/angular-image-loader
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: ~/@thisissoon/angular-image-loader-{{ .Branch }}-{{ checksum "package.json" }}
+      - run: yarn --silent
+      - save_cache:
+          key: ~/@thisissoon/angular-image-loader-{{ .Branch }}-{{ checksum "package.json" }}
+          paths:
+            - 'node_modules'
+
+  test:
+    working_directory: ~/@thisissoon/angular-image-loader
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: ~/@thisissoon/angular-image-loader-{{ .Branch }}-{{ checksum "package.json" }}
+      - run: yarn lint
+      - run: yarn test --configuration ci
+      - run: yarn e2e
+      - run: yarn coverage
+
+workflows:
+  version: 2
+  setup_and_test:
+    jobs:
+      - setup
+      - test:
+          requires:
+            - setup

.gitignore

@@ -35,10 +35,6 @@ npm-debug.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db

.travis.yml

@@ -37,6 +37,9 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "no-progress": {
+              "progress": false
             }
           }
         },
@@ -48,6 +51,9 @@
           "configurations": {
             "production": {
               "browserTarget": "angular-image-loader:build:production"
+            },
+            "no-progress": {
+              "browserTarget": "angular-image-loader:build:no-progress"
             }
           }
         },
@@ -61,12 +67,20 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
+            "karmaConfig": "./src/karma.conf.js",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": ["src/styles.scss"],
             "assets": ["src/assets", "src/favicon.ico"]
+          },
+          "configurations": {
+            "ci": {
+              "browsers": "ChromeHeadless",
+              "codeCoverage": true,
+              "progress": false,
+              "watch": false
+            }
           }
         },
         "lint": {
@@ -86,8 +100,8 @@
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "angular-image-loader:serve"
+            "protractorConfig": "./e2e/protractor.conf.js",
+            "devServerTarget": "angular-image-loader:serve:no-progress"
           }
         },
         "lint": {

angular.json

@@ -5,24 +5,24 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: ['./e2e/**/*.e2e-spec.ts'],
+  specs: ['./src/**/*.e2e-spec.ts'],
   capabilities: {
     browserName: 'chrome',
     chromeOptions: {
-      args: ['--no-sandbox', '--window-size=1024,768']
+      args: ['--headless', '--no-sandbox', '--window-size=1024,768']
     }
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 10000,
+    defaultTimeoutInterval: 30000,
     print: function() {}
   },
   onPrepare() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
     });
     jasmine
       .getEnv()

protractor.conf.js e2e/protractor.conf.jsprotractor.conf.js renamed to e2e/protractor.conf.js

@@ -8,12 +8,14 @@ export class AppPage {
   scrollTo(x: number = 0, y: number = 0) {
     browser.executeScript(`return window.scrollTo(${x}, ${y});`);
     return browser.wait(() =>
-      this.getScrollYPosition()
-        .then((posY) => posY === y));
+      this.getScrollYPosition().then(posY => posY === y)
+    );
   }
 
   scrollIntoView(selector: string) {
-    return browser.executeScript(`return document.querySelector('${selector}').scrollIntoView()`);
+    return browser.executeScript(
+      `return document.querySelector('${selector}').scrollIntoView()`
+    );
   }
 
   scrollToImageTopElement() {
@@ -32,14 +34,21 @@ export class AppPage {
   }
 
   setWindowSize(x: number, y: number) {
-    browser.driver.manage().window().setSize(x, y);
+    browser.driver
+      .manage()
+      .window()
+      .setSize(x, y);
     return browser.wait(() =>
-      this.getWindowSize()
-        .then((size: any) => size.height === y && size.width === x));
+      this.getWindowSize().then(
+        (size: any) => size.height === y && size.width === x
+      )
+    );
   }
 
   getWindowSize() {
-    return browser.executeScript(`return { height: window.outerHeight, width: window.outerWidth };`);
+    return browser.executeScript(
+      `return { height: window.outerHeight, width: window.outerWidth };`
+    );
   }
 
   getScrollYPosition() {
@@ -54,7 +63,6 @@ export class AppPage {
     return element(by.css('.sn-image-loader--bottom'));
   }
 
-
   getImageTopLoaderCompClass() {
     return this.getImageTopLoaderComp().getAttribute('class');
   }
@@ -116,18 +124,21 @@ export class AppPage {
   }
 
   isImageTopLoaded() {
-    return this.getImageTopLoaderCompClass()
-      .then((result: string) => result.includes('sn-image-loaded'));
+    return this.getImageTopLoaderCompClass().then((result: string) =>
+      result.includes('sn-image-loaded')
+    );
   }
 
   isImageBottomLoaded() {
-    return this.getImageBottomLoaderCompClass()
-      .then((result: string) => result.includes('sn-image-loaded'));
+    return this.getImageBottomLoaderCompClass().then((result: string) =>
+      result.includes('sn-image-loaded')
+    );
   }
 
   isVideoLoaded() {
-    return this.getVideoElementClass()
-      .then((result: string) => result.includes('sn-video-loaded'));
+    return this.getVideoElementClass().then((result: string) =>
+      result.includes('sn-video-loaded')
+    );
   }
 
   waitForImageTopElementLoaded() {

e2e/app.po.ts e2e/src/app.po.tse2e/app.po.ts renamed to e2e/src/app.po.ts

@@ -1,8 +1,9 @@
-import { AppPage } from './app.po';
 import { browser } from 'protractor';
-import { image } from '../src/app/app-data';
 
-describe('ImageLoader Lib E2E Tests', function () {
+import { AppPage } from './app.po';
+import { image } from '../../src/app/app-data';
+
+describe('ImageLoader Lib E2E Tests', function() {
   let page: AppPage;
 
   beforeEach(() => {
@@ -13,10 +14,11 @@ describe('ImageLoader Lib E2E Tests', function () {
 
   afterEach(() => {
     // ensure no errors appear in console
-    browser.manage()
+    browser
+      .manage()
       .logs()
       .get('browser')
-      .then((browserLog) => {
+      .then(browserLog => {
         expect(browserLog).toEqual([]);
       });
   });
@@ -45,11 +47,12 @@ describe('ImageLoader Lib E2E Tests', function () {
 
       const resultLoaded = page.isImageTopLoaded();
       const resultSrcset = page.getImageTopElementSrcSet();
-      const expectedSrcset = `${image.images[0].x1} 1x, ${image.images[0].x2} 2x`;
+      const expectedSrcset = `${image.images[0].x1} 1x, ${
+        image.images[0].x2
+      } 2x`;
       expect(resultLoaded).toBeTruthy();
       expect(resultSrcset).toEqual(expectedSrcset);
     });
-
   });
 
   describe('lazy load image', () => {
@@ -71,27 +74,26 @@ describe('ImageLoader Lib E2E Tests', function () {
       expectedSrc = image.images[0].x1;
       expect(resultLoaded).toEqual(expectedLoaded);
       expect(resultSrc).toEqual(expectedSrc);
-
     });
 
     it('should update image loaded count element when image scrolled into viewport', () => {
       expect(page.getImageBottomLoadedCountElementText()).toEqual('0');
       page.scrollToImageBottomElement();
       expect(page.getImageBottomLoadedCountElementText()).toEqual('1');
     });
-
   });
 
   describe('responsive image', () => {
-
     it('should load correct image for "xs" device size', () => {
       page.setWindowSize(400, 580);
       page.scrollToImageBottomElement();
 
       const resultLoaded = page.isImageBottomLoaded();
       const expectedLoaded = true;
       const resultSrcset = page.getImageBottomElementSrcSet();
-      const expectedSrcset = `${image.images[0].x1} 1x, ${image.images[0].x2} 2x`;
+      const expectedSrcset = `${image.images[0].x1} 1x, ${
+        image.images[0].x2
+      } 2x`;
 
       expect(resultLoaded).toEqual(expectedLoaded);
       expect(resultSrcset).toEqual(expectedSrcset);
@@ -104,7 +106,9 @@ describe('ImageLoader Lib E2E Tests', function () {
       const resultLoaded = page.isImageBottomLoaded();
       const expectedLoaded = true;
       const resultSrcset = page.getImageBottomElementSrcSet();
-      const expectedSrcset = `${image.images[1].x1} 1x, ${image.images[1].x2} 2x`;
+      const expectedSrcset = `${image.images[1].x1} 1x, ${
+        image.images[1].x2
+      } 2x`;
 
       expect(resultLoaded).toEqual(expectedLoaded);
       expect(resultSrcset).toEqual(expectedSrcset);
@@ -117,7 +121,9 @@ describe('ImageLoader Lib E2E Tests', function () {
       const resultLoaded = page.isImageBottomLoaded();
       const expectedLoaded = true;
       const resultSrcset = page.getImageBottomElementSrcSet();
-      const expectedSrcset = `${image.images[2].x1} 1x, ${image.images[2].x2} 2x`;
+      const expectedSrcset = `${image.images[2].x1} 1x, ${
+        image.images[2].x2
+      } 2x`;
 
       expect(resultLoaded).toEqual(expectedLoaded);
       expect(resultSrcset).toEqual(expectedSrcset);
@@ -146,8 +152,5 @@ describe('ImageLoader Lib E2E Tests', function () {
       expected = '3';
       expect(result).toEqual(expected);
     });
-
   });
-
 });
-