angular / angular/components

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

Open
#4,056 30 comments 41 reactions 0 assignees View on GitHub
area: material.angular.io docs feature help wanted P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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](https://github.com/angular/material2/blob/master/test/karma.conf.js#L35-L36):

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

Contributor guide

Open the contributing guide

Research direction

Read the Getting Started guide and the existing karma.conf.js, then compare the test setup with the referenced Material karma configuration and fresh CLI app steps. Run the unit tests after adding md-card and verify that the core-theme warning is gone, with the guide documenting the required test setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
documentation, testing
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.