Angular-cli: ng test uses the wrong environment

[pain0486]

This might not be in bug, perhaps I just don't have the correct setup. Prior to version 6 I could set the environment in the karma.config file to use a different environment variable (to pull from environment.test.ts over environment.ts). After the update all variables are being pulled from environment.ts which is causing 300+ tests to fail. I have kept the setting in the Karma.config

angularCli: {
   environment: 'test'
},

i also tried adding it the the test -> options section

...
"test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
        "main": "src/test.ts",
        "watch": true,
        "environment": "test",
        "karmaConfig": "./karma.conf.js",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "scripts": ["node_modules/jquery/dist/jquery.min.js",
        "node_modules/hammerjs/hammer.js",
        "node_modules/materialize-css/dist/js/materialize.js",
        "node_modules/materialize_theme/dist/js/vh-material-theme.js",
        "node_modules/moment/moment.js",
        "node_modules/signalr/jquery.signalR.js",
        "node_modules/datatables.net/js/jquery.dataTables.js"],
        "styles": ["node_modules/materialize_theme/dist/css/vh-material-theme.css",
        "src/datatables-materialize.css",
        "src/styles.css",
        "src/ng-completer-override.css",
        "src/gly-spin.css"],
        "assets": ["src/assets",
        "src/favicon.ico"]
    }
},
...```
### Versions

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, 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
```

Repro steps

• Create an environment for testing
• set the environment in test options on angular.json (also tried in karma.config)
• run ng test

Observed behavior

environment variables are being pulled from environment.ts

Desired behavior

environment variables to be pulled from environment.test.ts

Mention any other details that might be useful (optional)

[pain0486]

I added a configuration to the test and ran ng test --configuration=test and that worked well. Then when defining the reporters I noticed I could use fileReplacements in the options of the test. and what worked!
updated test section in angular.json:
```json
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"watch": true,
"environment": "test",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/hammerjs/hammer.js",
"node_modules/materialize-css/dist/js/materialize.js",
"node_modules/materialize_theme/dist/js/vh-material-theme.js",
"node_modules/moment/moment.js",
"node_modules/signalr/jquery.signalR.js",
"node_modules/datatables.net/js/jquery.dataTables.js"],
"styles": ["node_modules/materialize_theme/dist/css/vh-material-theme.css",
"src/datatables-materialize.css",
"src/styles.css",
"src/ng-completer-override.css",
"src/gly-spin.css"],
"assets": ["src/assets",
"src/favicon.ico"]
}
},
'''

[rmorrise]

If you found @pain0486 's post useful, please like this feature:
https://github.com/angular/angular-cli/issues/13418

[jkyoutsey]

I'm using ng 7 and have a fileReplacements in my test configuration. But it doesn't work.

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "codeCoverageExclude": [
              "**/*.mock.ts",
              "**/*.module.ts"
            ],
            "fileReplacements": [{
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.test.ts"
            }]
          }
        }

And I have the environment.test.ts file right next to my environment.ts file. But when I run my tests with ng test I get the wrong values from environment.PROD.ts (???) rather than the ones from environment.test.ts.

[pain0486]

Have you tried running ng test --configuration=test

[jkyoutsey]

There isn't a test configuration by default in the angular 7 .angular.json.
Result is Configuration 'test' could not be found in project 'mms'.

Even if I add the test configuration and run it that way, it's still using my environments.prod.ts???

[pain0486]

You will need a test environment and add your options there

[jkyoutsey]

I did that. I did it in build, I did it in test. EVERY time I get the .prod instead of the .test. I would assume I would get the environment.ts, but it's not even doing that?!

Heck, I put it EVERYWHERE:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mms",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "test": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
              }]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/index.prod.html"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mms:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "mms:build:production"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "codeCoverageExclude": [
              "**/*.mock.ts",
              "**/*.module.ts"
            ],
            "fileReplacements": [{
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.test.ts"
            }]
          },
          "configurations": {
            "test": {
              "fileReplacements": [{
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }]
            },
            "production": {
              "karmaConfig": "src/karma.conf.prod.js"
            }
          }
        }
      }
    }

I can't get it to work with or without --configuration=test

[jkyoutsey]

Visual Studio Code auto imported my prod file in the component! This works fine with the fileReplacements in architect.test.options.

[Local9]

Visual Studio Code auto imported my prod file in the component! This works fine with the fileReplacements in architect.test.options.

ARGH!!!! I forgot it does this! I wrote a bunch of stuff around this! ARGH!!!!! You damn life saver!

[Naikno]

@jkyoutsey how did you fix this? i have the same problem

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>