nicojs / angular-stryker-example Goto Github PK

The Angular Handbook link goes to "Page Not Found"

Hello,

I just tried to use the angular-stryker-example on a freshly generated angular application with the latest release of @angular/cli

ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.0
Node: 8.11.1
OS: linux x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

But the changes in the @angular/cli break the stryker.conf.js and webpack-stryker.conf.js files.

It looks like some code has moved from @angular/cli to @angular-devkit/build-angular/src/angular-cli-files.

I think I managed to fix the stryker.conf.js file:

module.exports = function (config) {
  config.set({
    mutate: [
      'src/app/*.component.ts'
    ],
    testRunner: 'karma',
    mutator: 'typescript',
    transpilers: ['webpack'],
    reporter: ['html', 'clear-text', 'progress'],
    testFramework: 'jasmine',
    coverageAnalysis: 'off',
    karmaConfig: {
      frameworks: ['jasmine'],
      customContextFile: require.resolve('@angular-devkit/build-angular/src/angular-cli-files/plugins/karma-context.html'),
      customDebugFile: require.resolve('@angular-devkit/build-angular/src/angular-cli-files/plugins/karma-debug.html'),
      plugins: [
        require.resolve('karma-jasmine'),
        require.resolve('karma-chrome-launcher'),
      ],
      proxies: {
        "/_karma_webpack_/": "/base/dist/"
      },
      files: [
        { pattern: './dist/*.js', included: false }
      ],
      browsers: ['ChromeHeadless']
    },
    tsconfigFile: 'tsconfig.json',
    webpack: {
      configFile: 'webpack-stryker.conf.js'
    },
    logLevel: 'info',
    timeoutMs: 10000
  });
};

But the webpack-stryker.conf.js is harder to fix since some @angular/cli concepts and sources have changed.

I'm trying to base an Angular 6 project on this one and after copying over both the stryker.conf and webpack.conf files over and installing the npm packages I receive the following error which is proving extremely difficult to overcome.

[ERROR] StrykerCli - an error occurred Error: Could not transpile input files: Execute webpack: Error:
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\project_dir'

**at InitialTestExecutor.<anonymous> (C:\project_dir\node_modules\stryker\src\process\InitialTestExecutor.js:54:31)**

My folder structure is like your standard Angular 6 app...

/project_dir
   ../node_modules
   ../e2e
   ../src
      ../app

I took my package.json and through it into a JSON parser just to confirm that the file wasn't corrupted and it seems to be in working order.

Here are the versions of stryker/webpack I am working with...

"webpack": "4.12.0",
"webpack-cli": "3.0.3",
"stryker": "^0.18.1",
"stryker-api": "^0.12.0",
"stryker-html-reporter": "^0.11.5",
"stryker-karma-runner": "^0.12.0",
"stryker-typescript": "^0.8.3",
"stryker-webpack-transpiler": "^0.1.1",

I have typescript files in my folder I want to test these scripts with stryker, so where I have to keep this scripts to test or where I have to add a path of the scripts to test

Hi, I've tried to use angular stryker in my project https://github.com/andryfailli/remindme-frontend/tree/feature/stryker following https://github.com/nicojs/angular-stryker-example#enable-mutation-testing-in-your-angular-project but I'm stuck with the following "Module not found" error about firebase (I'm using AngularFire2 & Firebase Auth).

Do you have an idea about what's wrong with my configuration?

Thank you

[2018-01-29 11:48:53.576] [INFO] ConfigReader - Using stryker.conf.js in the current working directory.
[2018-01-29 11:49:50.795] [INFO] TypescriptConfigEditor - Loading tsconfig file C:\Users\Andrea\git\remindme-frontend\tsconfig.json
[2018-01-29 11:50:29.654] [INFO] InputFileResolver - Found 31 of 69 file(s) to be mutated.
[2018-01-29 11:50:29.682] [INFO] InitialTestExecutor - Starting initial test run. This may take a while.
[2018-01-29 11:55:03.060] [ERROR] StrykerCli - an error occurred Error: Could not transpile input files: Execute webpack: Error:
ERROR in ./node_modules/angularfire2/firebase.app.module.js
Module not found: Error: Can't resolve 'firebase/app' in 'C:\Users\Andrea\git\remindme-frontend\node_modules\angularfire2'
@ ./node_modules/angularfire2/firebase.app.module.js 2:0-41
@ ./node_modules/angularfire2/index.js
@ ./node_modules/angularfire2/auth/auth.module.js
@ ./node_modules/angularfire2/auth/public_api.js
@ ./node_modules/angularfire2/auth/index.js
@ ./src/app/auth-service/auth.service.ts
@ ./src/app/auth-guard/auth.guard.spec.ts
@ ./src .spec.ts$
@ ./src/test.ts

ERROR in ./src/app/auth-service/auth.service.ts
Module not found: Error: Can't resolve 'firebase/app' in 'C:\Users\Andrea\git\remindme-frontend\src\app\auth-service'
@ ./src/app/auth-service/auth.service.ts 14:15-38
@ ./src/app/auth-guard/auth.guard.spec.ts
@ ./src .spec.ts$
@ ./src/test.ts

ERROR in ./src/app/auth-service/auth.service.spec.ts
Module not found: Error: Can't resolve 'firebase/app' in 'C:\Users\Andrea\git\remindme-frontend\src\app\auth-service'
@ ./src/app/auth-service/auth.service.spec.ts 10:15-38
@ ./src .spec.ts$
@ ./src/test.ts

ERROR in ./node_modules/angularfire2/auth/auth.js
Module not found: Error: Can't resolve 'firebase/auth' in 'C:\Users\Andrea\git\remindme-frontend\node_modules\angularfire2\auth'
@ ./node_modules/angularfire2/auth/auth.js 1:0-23
@ ./node_modules/angularfire2/auth/public_api.js
@ ./node_modules/angularfire2/auth/index.js
@ ./src/app/auth-service/auth.service.ts
@ ./src/app/auth-guard/auth.guard.spec.ts
@ ./src .spec.ts$
@ ./src/test.ts

ERROR in ./node_modules/angularfire2/auth/auth.module.js
Module not found: Error: Can't resolve 'firebase/auth' in 'C:\Users\Andrea\git\remindme-frontend\node_modules\angularfire2\auth'
@ ./node_modules/angularfire2/auth/auth.module.js 2:0-23
@ ./node_modules/angularfire2/auth/public_api.js
@ ./node_modules/angularfire2/auth/index.js
@ ./src/app/auth-service/auth.service.ts
@ ./src/app/auth-guard/auth.guard.spec.ts
@ ./src .spec.ts$
@ ./src/test.ts

ERROR in ./src/app/auth-service/auth.service.ts
Module not found: Error: Can't resolve 'firebase/messaging' in 'C:\Users\Andrea\git\remindme-frontend\src\app\auth-service'
@ ./src/app/auth-service/auth.service.ts 15:0-29
@ ./src/app/auth-guard/auth.guard.spec.ts
@ ./src .spec.ts$
@ ./src/test.ts
at InitialTestExecutor. (C:\Users\Andrea\git\remindme-frontend\node_modules\stryker\src\process\InitialTestExecutor.js:54:31)
at step (C:\Users\Andrea\git\remindme-frontend\node_modules\tslib\tslib.js:131:27)
at Object.next (C:\Users\Andrea\git\remindme-frontend\node_modules\tslib\tslib.js:112:57)
at fulfilled (C:\Users\Andrea\git\remindme-frontend\node_modules\tslib\tslib.js:102:62)
at process._tickCallback (internal/process/next_tick.js:109:7)

Hello @nicojs ,

First of all, thank you for sharing this example repository.

for app.component.ts and app.component.spec.ts:

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'portal-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Portal';
}

// app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'Portal'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Portal');
  }));
  it('should render title in a .title tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('Portal');
  }));
});

Do you think it is possible to prevent stryker to mutate the angular component metadata?

Mutant survived!
/usr/src/app/src/app/app.component.ts:3:12
Mutator: StringLiteral
-     selector: 'portal-root',
+     selector: "",

Ran all tests for this mutant.
Mutant survived!
/usr/src/app/src/app/app.component.ts:5:13
Mutator: ArrayLiteral
-     styleUrls: ['./app.component.scss']
+     styleUrls: []

It doesn't seems relevant.