A "Testing with Material Components" guide to demonstrate including core theme in test suite

[willshowell]

Bug, feature request, or proposal:

Bug or missing docs

What is the expected behavior?

Tests shouldn't log warnings after following the Getting Started guide on a fresh cli generated app.

Current behavior / steps to reproduce

1. Fresh cli app
2. Follow the getting started guide
3. Add an md-card component to AppComponent
4. Run unit tests
5. Resulting warning:

WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming'
Chrome 57.0.2987 (Mac OS X 10.12.4): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chrome 57.0.2987 (Mac OS X 10.12.4): Executed 3 of 3 SUCCESS (0.226 secs / 0.199 secs)

Is there anything else we should know?

Modifying karma.conf.js to include a theme silenced the warning. This approach was borrowed from Material's karma config:

files: [
  { pattern: './src/test.ts', watched: false },
  { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css' }
],

[ChenReuven]

@willshowell i have the same issue, i am with angular 4 and the newset beta 3 of angular material with a custom theme

[kuncevic]

I am using the custom theme with ng v4, material beta.3 and all good.
Got my custom theme in file assets/theme.scss:

@import '~@angular/material/_theming';
@import './my-palette.scss';
@include mat-core();
$primary: mat-palette($mat-saphire, 500);
$accent:  mat-palette($mat-saphire, A100);
$warn:    mat-palette($mat-orange, A200);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

Importing that in file styles.scss: (if you using rebuild just import that instead)

@import '/assets/theme';

As I am using Angular CLI then in .angular-cli.json just doing so:

 "styles": [
        "styles.scss"
      ], 

And I am on Windows 7 x64, running node 7.8.0, karma 1.4.1 if it is making any difference.

From package.json:

    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.1.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-istanbul": "0.2.2", 

[ChenReuven]

I have this configuration:

app-theme.scss
@include mat-core();
$app-primary: mat-palette($mat-blue);
$app-accent: mat-palette($mat-amber);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);

angular-cli.json
"styles": [
"styles.css",
"app-theme.scss"
],

style.css
i have all fonts application configuration

[kuncevic]

you are missing @import '~@angular/material/_theming'; in your app-theme.scss it is where mat-core(), and .mat-theme-loaded-marker, etc. is coming from

// Marker that is used to determine whether the user has added a theme to their page.
  .mat-theme-loaded-marker {
    display: none;
  }

[ChenReuven]

@kuncevic oops :), i just forgot to wrote it here in comment but it exist in code:
@import '~@angular/material/theming'; on the top of the app-theme.scss

BTW i am not use the '_theming' but the 'theming'

Thanks 4 your help :)

[kuncevic]

actually I just run ng t and I notice same warning, whoops...

[willshowell]

From what I understand, karma does not inject any css into your tests by default, but including a material component without a theme will trigger the warning.

In my original comment I showed how to inject one of the prebuilt themes into the test suite. What I don't know is if this is the ideal solution. I figure there should either be something in the docs about it, or the warning should stay silent during unit tests that import material modules.

Maybe @devversion or @crisbeto can weigh in?

[LilSebastian5000]

Another issue with receiving warnings- I've also noticed that the ".css.map" files seem to be missing in beta.3, so I keep getting thrown the following in Chrome:

DevTools failed to parse SourceMap: https://localhost:3000/@angular/material/indigo-pink.css.map

Is this the case, or am I just unable to find it? The ".css.map" files do not exist in the "/prebuilt-themes" directory.

[jelbourn]

I think the real solution here is that there should be guide specifically for testing w/ the Material components.

[KostyaTretyak]

Now in docs we have:

Angular Material comes prepackaged with several pre-built theme css files. These theme files also include all of the styles for core (styles common to all components), so you only have to include a single css file for Angular Material in your app.

I use:

• @angular/core v4.0.0
• @angular/angular-cli v1.0.0
• @angular/material2 v2.0.0-beta.3
• @angular/animations v4.0.2

When I import css-file in src/app/app.component.css:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

and run project via ng serve, I have same warn in console:

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

When I do

@import '~@angular/material/theming'
/* or @import '~@angular/material/_theming'*/

I have error "file not found".

When I include the style in src/index.html or in src/style.css all works without warn.