angular/components

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

Open

#4056 opened on Apr 12, 2017

View on GitHub
 (30 comments) (41 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: material.angular.iodocsfeaturehelp wanted

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:

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

Contributor guide

Tech stack
typescriptjavascripthtmlcss
Domain
testingfrontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular basicsKarma configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue is clear: add a guide in the Angular Components documentation showing how to include a Material theme in the test suite (karma.conf.js) to suppress the warning. The solution is already provided in the issue: modify karma.conf.js to include the prebuilt theme CSS file, similar to the Material2 karma config. The guide should be added to the 'Getting Started' section. Files to modify would be the documentation markdown files, e.g., 'guides/getting started.md'. The linked PR or commit reference can be taken from the Material2 karma config at https://github.com/angular/material2/blob/master/test/karma.conf.js. No need to solve the issue; just document the steps.