• 14-Jul-16

    Angular unit testing and how to implement coding standard in angular web application

    In this blog, we are explain that method which is used to create unit tests for your Angular application with unit testing.

    The Basic Unit Testing Code

    When you are starting first that app with a new unit testing file there isn’t much that is necessary to get going. So, just to set the starting point this is what your index_spec.ts file should look like as angular schematics generator spit out.
     

    import { Tree } from '@angular-devkit/schematics'; import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; import * as path from 'path'; const collectionPath = path.join(__dirname, '../collection.json'); describe('simple-schematic', () => { it('works', () => { const runner = new SchematicTestRunner('schematics', collectionPath); const tree = runner.runSchematic('simple-schematic', {}, Tree.empty()); expect(tree.files).toEqual([]); }); });


    Right now it doesn’t do anything except for run the schematic in a silo and asserts that the output is an empty file tree. We will need to go further to accurately test your code.

    Mimicking The Application Environment

    The basic unit test provided by the generator that is just basic level. We are extend our unit test to more reflectly to the actual environment that this code will run. This means that you need to run some of the Angular schematics to build up the Angular project workspace.

    You have to add a little bit of code to unit test. First, you need to set the options for our Angular schematics to run with.

    import {Schema as WorkspaceOptions} from '@schematics/angular/workspace/schema'; import {Schema as ApplicationOptions} from '@schematics/angular/application/schema'; ... const workspaceOptions: WorkspaceOptions = { name: 'workspace', newProjectRoot: 'projects', version: '6.0.0', }; const appOptions: ApplicationOptions = { name: 'bar', inlineStyle: false, inlineTemplate: false, routing: false, style: 'css', skipTests: false, skipPackageJson: false, };


    Now you can create application file in tree way before we run any of tests. This uses the newer runExternalSchematic to access the Angular schematic used to generate a workspace and application tree.,

    let appTree: UnitTestTree; beforeEach(() => { appTree = testRunner.runExternalSchematic( '@schematics/angular', 'workspace', workspaceOptions); appTree = testRunner.runExternalSchematic( '@schematics/angular', 'application', appOptions, appTree); });


    Now clarify before every test, you need to run this code to create the Angular project workspace.

    Adding Tests

    With this testing environment setup, you just need to start creating a few tests. Below mentioned three different tests.

    The first, what happens if you run this Schematic without an Angular project tree setup. In this example, We are just testing that ANY error was thrown. This is a nice start to your tests, but in the next example, You will see how can go further with more detailed tests.

    it('fails with missing tree', () => { expect(() => testRunner.runSchematic( 'simple-schematic', {name: "test"}, Tree.empty())).toThrow(); });


    The second, what happens if you run this Schematic without the required angular test parameters. In this example, We went further and showed how we can test for a specific Error Type and message.
     

    it('fails with missing params', () => { expect(() => testRunner.runSchematic( 'simple-schematic', {}, appTree)).toThrowError(InvalidInputOptions, 'Schematic input does not validate against the Schema: {"spec":true,"flat":false}\n'+ 'Errors:\n\n'+ ' Data path "" should have required property \'name\'.'); });


    And finally, See below code once everything is setup properly.

    it('works', () => { const tree = testRunner.runSchematic('simple-schematic', { name: "test" }, appTree); //[see assertions below] });


    Or you can just check to see if the generated files are in the tree.files array. So you don’t have to match the _exact_ content.

    expect(tree.files).toContain("/projects/bar/src/app/test/test.spec.ts"); expect(tree.files).toContain("/projects/bar/src/app/test/test.ts");


    Either you have option that is good for depending on your all needs. But what if you specifically need to look at the content of your output and ensure. This is asserting on the content created.,
     

    Asserting on content created


    If you need to ensure that the resulting content meets a specification of testing then you can also read the content on a file by file basis and assert the content to be or contains the necessary text. This is simple to do as demonstrated in the following code segment.
     

    expect(tree.readContent("/projects/bar/src/app/test/test.ts")) .toContain( "export class Test {\n" + "\n" + "}" );


    Easy! We have now ensured that a file outputs EXACTLY as We intend.
     

    Are looking for help in angular web application development and testing? - Contact us now
     

    Axis Technolabs providing angular web application development, Web application using angular, Hire Angular developer for front-end development service in UK, Belgium, Ireland, Switzerland, Sweden, France, Netherlands, UK, Germany, Spain, USA, Australia, Dubai, Malaysia, Singapore and many more countries.

    Connect us on skype: raj.axistechnolabs or post your requirement to our email at business@axistechnolabs.com

    Tags : front-end based applications with angular, angular.js application development, angular js based web application, web application with Angular and React native application, angular based web application, Deployment for Angular web application, asp.net and angular js development company