lundi 24 septembre 2018

Testing in an AngularJS/Angular Hybrid App

We have a hybrid Angular 1.5 and Angular 6 app running side by side. No CLI. We use Webpack 4 to compile the app. Our team is very small and we just need to get some basic testing going before we build more features.

I've tried installing the pieces that Angular uses for testing individually. Protractor, Karma, and Jasmine. Protractor runs ok, but what I'm really interested is in unit testing. The problem is that karma doesn't want to a test anything Angular (component, service). It can't understand that I wanna test Angular and doesn't find any tests, and returns a 0 of 0 tests executed with an error (I assume it's because there were no tests).

I've been trying to do something similar to this. The result so far:

karma.conf.js

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [{ pattern: 'src/test.ts', watched: false }],
        exclude: [],
        preprocessors: {
            'src/test.ts': ['webpack', 'sourcemap']
        },
        webpack: require('./webpack-dev.config'),
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        singleRun: true,
        concurrency: Infinity,
        browsers: ['Chrome_Headless'],
        customLaunchers: {
            Chrome_Headless: {
                base: 'Chrome',
                flags: [
                    '--headless',
                    '--disable-gpu',
                    '--remote-debugging-port=9222'
                ]
            },
            Chrome_without_security: {
                base: 'Chrome',
                flags: [
                    '--headless',
                    '--disable-gpu',
                    '--remote-debugging-port=9222',
                    '--disable-web-security'
                ]
            }
        },
        // workaround for typescript and chrome/headless
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        }
    });
};

tests.ts

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

basic test

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ManageProgramComponent } from './manage-program.component';

describe('ManageProgramComponent', () => {
    let component: ManageProgramComponent;
    let fixture: ComponentFixture<ManageProgramComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ManageProgramComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ManageProgramComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

npm scripts:

"start": "webpack-dev-server --config webpack-dev.config.js",
"e2e": "protractor protractor.conf.js",
"test": "karma start karma.conf.js"

This is the result when I run npm test:

enter image description here

QUESTION: How can I get karma test this angular component ?

Aucun commentaire:

Enregistrer un commentaire