build: add radio example to mdc-migration integration test

Author: amysorto

integration/mdc-migration/golden/src/app/app.component.html

@@ -9,4 +9,5 @@
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
 <progress-spinner-example></progress-spinner-example>
+<radio-example></radio-example>
 <select-example></select-example>

integration/mdc-migration/golden/src/app/app.module.ts

@@ -16,6 +16,7 @@ import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
 import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
 import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {CardComponent} from './components/card/card.component';
@@ -27,6 +28,7 @@ import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
 import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
+import {RadioComponent} from './components/radio/radio.component';
 import {SelectComponent} from './components/select/select.component';
 import {ButtonComponent} from './components/button/button.component';
 
@@ -44,6 +46,7 @@ import {ButtonComponent} from './components/button/button.component';
     PaginatorComponent,
     ProgressBarComponent,
     ProgressSpinnerComponent,
+    RadioComponent,
     SelectComponent,
   ],
   imports: [
@@ -61,6 +64,7 @@ import {ButtonComponent} from './components/button/button.component';
     MatPaginatorModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
+    MatRadioModule,
     MatSelectModule,
     ReactiveFormsModule,
   ],

integration/mdc-migration/golden/src/app/components/radio/radio.component.html

@@ -0,0 +1,5 @@
+<h2>Radio example</h2>
+<mat-radio-group>
+  <mat-radio-button value="1">Dog</mat-radio-button>
+  <mat-radio-button value="2">Cat</mat-radio-button>
+</mat-radio-group>

integration/mdc-migration/golden/src/app/components/radio/radio.component.scss

@@ -0,0 +1,12 @@
+.mat-mdc-radio-button { padding: 16px; }
+
+/* TODO: The following rule targets internal classes of radio that may no longer apply for the MDC version. */
+
+.mat-radio-container {
+  padding: 16px;
+}
+
+
+.mat-mdc-radio-group {
+  display: block;
+}

integration/mdc-migration/golden/src/app/components/radio/radio.component.spec.ts

@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatRadioModule} from '@angular/material/radio';
+import {RadioComponent} from './radio.component';
+
+describe('RadioComponent', () => {
+  let component: RadioComponent;
+  let fixture: ComponentFixture<RadioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatRadioModule],
+      declarations: [RadioComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RadioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration/mdc-migration/golden/src/app/components/radio/radio.component.ts

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'radio-example',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.scss'],
+})
+export class RadioComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

integration/mdc-migration/golden/src/styles.scss

@@ -54,6 +54,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-progress-bar-typography($sample-project-theme);
 @include mat.mdc-progress-spinner-theme($sample-project-theme);
 @include mat.mdc-progress-spinner-typography($sample-project-theme);
+@include mat.mdc-radio-theme($sample-project-theme);
+@include mat.mdc-radio-typography($sample-project-theme);
 @include mat.mdc-select-theme($sample-project-theme);
 @include mat.mdc-select-typography($sample-project-theme);
 @include mat.mdc-core-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.component.html

@@ -9,4 +9,5 @@
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
 <progress-spinner-example></progress-spinner-example>
+<radio-example></radio-example>
 <select-example></select-example>

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -16,6 +16,7 @@ import {MatMenuModule} from '@angular/material/menu';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {CardComponent} from './components/card/card.component';
@@ -27,6 +28,7 @@ import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
 import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
+import {RadioComponent} from './components/radio/radio.component';
 import {SelectComponent} from './components/select/select.component';
 import {ButtonComponent} from './components/button/button.component';
 
@@ -44,6 +46,7 @@ import {ButtonComponent} from './components/button/button.component';
     PaginatorComponent,
     ProgressBarComponent,
     ProgressSpinnerComponent,
+    RadioComponent,
     SelectComponent,
   ],
   imports: [
@@ -61,6 +64,7 @@ import {ButtonComponent} from './components/button/button.component';
     MatPaginatorModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
+    MatRadioModule,
     MatSelectModule,
     ReactiveFormsModule,
   ],

integration/mdc-migration/sample-project/src/app/components/radio/radio.component.html

@@ -0,0 +1,5 @@
+<h2>Radio example</h2>
+<mat-radio-group>
+  <mat-radio-button value="1">Dog</mat-radio-button>
+  <mat-radio-button value="2">Cat</mat-radio-button>
+</mat-radio-group>