Skip to content

Angular Framework

Notes

  • When updating core, have to use --to to get it to work. ng update @angular/core --to 6.0.6

Resources

Proxy api calls in angular - access API calls from local server.

{
  "/children": {
    "target": "http://localhost:5000",
    "secure": false
  }
}

Material Design

Angular rxjs

Testing

I finally got the everything configured to test an API call from my Angular application. Because everything is local on my machine, I'm using a proxy on the Angular side to access my API without having to worry about CORS. Trying to Unit Test an API service took a little work because ng test does not read the proxy.conf.json file. So, here is the test.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      // require('karma-electron'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    // preprocessors: {
    //   '**/*.js': ['chrome']
    // },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    proxies: {
      '/kinder': {
        'target': 'http://localhost:5000/kinder',
        'changeOrigin': true
      }
      // '/kinder': 'http://localhost:5000/kinder/'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};
  • UtilService contains the call I want to test
  • GetdataService actually makes the call.

Here is my karma.conf.js file.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      // require('karma-electron'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    // preprocessors: {
    //   '**/*.js': ['chrome']
    // },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    proxies: {
      // '/kinder': {
      //   'target': 'http://localhost:5000',
      //   'changeOrigin': true
      // },
      '/kinder': 'http://localhost:5000/kinder/'
    },
    // proxies: {
    //   '/kinder': 'http://localhost:5000/'
    // },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

Key was the proxies configuration.

Test Angular async validator with Jasmine

  it('Check age right', (done) => {
    formControl = new FormControl('');
    formControl.setAsyncValidators(
      AgeValidator(1.5, 6, utilService)
    );
    formControl.setValue('2014-01-03');
    setTimeout(function() {
      expect(formControl.status === 'VALID').toBe(true);
      done();
    }, 2000);
  });