feat(material-experimental/mdc-card): add DI token for configuring ap…

…pearance (#23302)

Adds a new DI token to the MDC-based card that allows consumers to set the default appearance.

Also sets up unit tests for the card.

Fixes #23298.

src/material-experimental/mdc-card/BUILD.bazel

@@ -1,5 +1,13 @@
 load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
-load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "sass_binary", "sass_library")
+load(
+    "//tools:defaults.bzl",
+    "ng_e2e_test_library",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
 
 package(default_visibility = ["//visibility:public"])
 
@@ -52,3 +60,19 @@ e2e_test_suite(
         "//src/cdk/testing/private/e2e",
     ],
 )
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":mdc-card",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/material-experimental/mdc-card/card.spec.ts

@@ -0,0 +1,55 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, Provider, Type, ViewChild} from '@angular/core';
+import {MatCardModule} from './module';
+import {MatCard, MAT_CARD_CONFIG} from './card';
+
+
+describe('MDC-based MatCard', () => {
+  function createComponent<T>(component: Type<T>, providers: Provider[] = []): ComponentFixture<T> {
+    TestBed.configureTestingModule({
+      imports: [MatCardModule],
+      declarations: [component],
+      providers
+    }).compileComponents();
+
+    return TestBed.createComponent<T>(component);
+  }
+
+  it('should default the card to the `raised` appearance', () => {
+    const fixture = createComponent(BasicCard);
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('.mat-mdc-card');
+    expect(card.classList).not.toContain('mdc-card--outlined');
+  });
+
+  it('should be able to change the card appearance', () => {
+    const fixture = createComponent(BasicCard);
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('.mat-mdc-card');
+
+    expect(card.classList).not.toContain('mdc-card--outlined');
+
+    fixture.componentInstance.card.appearance = 'outlined';
+    fixture.detectChanges();
+
+    expect(card.classList).toContain('mdc-card--outlined');
+  });
+
+  it('should be able to change the default card appearance using DI', () => {
+    const fixture = createComponent(BasicCard, [{
+      provide: MAT_CARD_CONFIG,
+      useValue: {appearance: 'outlined'}
+    }]);
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('.mat-mdc-card');
+    expect(card.classList).toContain('mdc-card--outlined');
+  });
+
+});
+
+@Component({
+  template: '<mat-card></mat-card>'
+})
+class BasicCard {
+  @ViewChild(MatCard) card: MatCard;
+}

src/material-experimental/mdc-card/card.ts

@@ -10,12 +10,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   Directive,
+  Inject,
+  InjectionToken,
   Input,
+  Optional,
   ViewEncapsulation,
 } from '@angular/core';
 
 export type MatCardAppearance = 'outlined' | 'raised';
 
+/** Object that can be used to configure the default options for the card module. */
+export interface MatCardConfig {
+  /** Default appearance for cards. */
+  appearance?: MatCardAppearance;
+}
+
+/** Injection token that can be used to provide the default options the card module. */
+export const MAT_CARD_CONFIG = new InjectionToken<MatCardConfig>('MAT_CARD_CONFIG');
+
 /**
  * Material Design card component. Cards contain content and actions about a single subject.
  * See https://material.io/design/components/cards.html
@@ -35,8 +47,11 @@ export type MatCardAppearance = 'outlined' | 'raised';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCard {
-  @Input() appearance: MatCardAppearance = 'raised';
+  @Input() appearance: MatCardAppearance;
 
+  constructor(@Inject(MAT_CARD_CONFIG) @Optional() config?: MatCardConfig) {
+    this.appearance = config?.appearance || 'raised';
+  }
 }
 
 // TODO(jelbourn): add `MatActionCard`, which is a card that acts like a button (and has a ripple).