Skip to content

Commit

Permalink
fix(material/schematics): add support for all-components-theme mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
amysorto authored and mmalerba committed Jul 15, 2022
1 parent f24a49f commit 425fd7d
Show file tree
Hide file tree
Showing 13 changed files with 486 additions and 19 deletions.
18 changes: 18 additions & 0 deletions integration/mdc-migration/golden/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,24 @@ $sample-project-theme: mat.define-light-theme((
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($sample-project-theme);
@include mat.mdc-slider-theme($sample-project-theme);
@include mat.mdc-slider-typography($sample-project-theme);
@include mat.mdc-slide-toggle-theme($sample-project-theme);
@include mat.mdc-slide-toggle-typography($sample-project-theme);
@include mat.mdc-radio-theme($sample-project-theme);
@include mat.mdc-radio-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-progress-bar-theme($sample-project-theme);
@include mat.mdc-progress-bar-typography($sample-project-theme);
@include mat.mdc-checkbox-theme($sample-project-theme);
@include mat.mdc-checkbox-typography($sample-project-theme);
@include mat.mdc-button-theme($sample-project-theme);
@include mat.mdc-button-typography($sample-project-theme);
@include mat.mdc-fab-theme($sample-project-theme);
@include mat.mdc-fab-typography($sample-project-theme);
@include mat.mdc-icon-button-theme($sample-project-theme);
@include mat.mdc-icon-button-typography($sample-project-theme);

/* You can add global styles to this file, and also import other style files */

Expand Down
3 changes: 2 additions & 1 deletion integration/mdc-migration/migration-test.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ def migration_test(name, srcs, approve):
# TODO(devversion): determine if a solution/workaround could live in the test runner.
"yarn install --cache-folder .yarn_cache_folder/",
"yarn ng generate @angular/material:mdc-migration -c all --tsconfig tsconfig.app.json",
"yarn test",
# TODO(amysorto): add back once MDC components are in @angular/material
# "yarn test",
" ".join([
"$(rootpath :verify_golden)",
"%s" % approve,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';

describe('button styles', () => {
let runner: SchematicTestRunner;
let cliAppTree: UnitTestTree;

async function runMigrationTest(oldFileContent: string, newFileContent: string) {
cliAppTree.create(THEME_FILE, oldFileContent);
const tree = await migrateComponent('button', runner, cliAppTree);
const tree = await migrateComponents(['button'], runner, cliAppTree);
expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
}

Expand Down Expand Up @@ -87,6 +87,58 @@ describe('button styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-button-theme($theme);
@include mat.mdc-button-typography($theme);
@include mat.mdc-fab-theme($theme);
@include mat.mdc-fab-typography($theme);
@include mat.mdc-icon-button-theme($theme);
@include mat.mdc-icon-button-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-button-theme($light-theme);
@include mat.mdc-button-typography($light-theme);
@include mat.mdc-fab-theme($light-theme);
@include mat.mdc-fab-typography($light-theme);
@include mat.mdc-icon-button-theme($light-theme);
@include mat.mdc-icon-button-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-button-theme($dark-theme);
@include mat.mdc-button-typography($dark-theme);
@include mat.mdc-fab-theme($dark-theme);
@include mat.mdc-fab-typography($dark-theme);
@include mat.mdc-icon-button-theme($dark-theme);
@include mat.mdc-icon-button-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';

describe('checkbox styles', () => {
let runner: SchematicTestRunner;
let cliAppTree: UnitTestTree;

async function runMigrationTest(oldFileContent: string, newFileContent: string) {
cliAppTree.create(THEME_FILE, oldFileContent);
const tree = await migrateComponent('checkbox', runner, cliAppTree);
const tree = await migrateComponents(['checkbox'], runner, cliAppTree);
expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
}

Expand Down Expand Up @@ -71,6 +71,46 @@ describe('checkbox styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-checkbox-theme($theme);
@include mat.mdc-checkbox-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-checkbox-theme($light-theme);
@include mat.mdc-checkbox-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-checkbox-theme($dark-theme);
@include mat.mdc-checkbox-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {createNewTestRunner, migrateComponents, THEME_FILE} from './test-setup-helper';

describe('multiple component styles', () => {
let runner: SchematicTestRunner;
let cliAppTree: UnitTestTree;

async function runMigrationTest(oldFileContent: string, newFileContent: string) {
cliAppTree.create(THEME_FILE, oldFileContent);
const tree = await migrateComponents(['checkbox', 'radio'], runner, cliAppTree);
expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
}

beforeEach(async () => {
runner = createNewTestRunner();
cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
});

describe('mixin migrations', () => {
it('should replace the old themes with the new ones', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.checkbox-theme($theme);
@include mat.radio-theme($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.mdc-checkbox-theme($theme);
@include mat.mdc-checkbox-typography($theme);
@include mat.mdc-radio-theme($theme);
@include mat.mdc-radio-typography($theme);
`,
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-radio-theme($theme);
@include mat.mdc-radio-typography($theme);
@include mat.mdc-checkbox-theme($theme);
@include mat.mdc-checkbox-typography($theme);
`,
);
});

it('should add correct theme with multi-line theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes((
color: $config,
typography: null,
density: null,
));
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes((
color: $config,
typography: null,
density: null,
));
@include mat.mdc-radio-theme((
color: $config,
typography: null,
density: null,
));
@include mat.mdc-radio-typography((
color: $config,
typography: null,
density: null,
));
@include mat.mdc-checkbox-theme((
color: $config,
typography: null,
density: null,
));
@include mat.mdc-checkbox-typography((
color: $config,
typography: null,
density: null,
));
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-radio-theme($light-theme);
@include mat.mdc-radio-typography($light-theme);
@include mat.mdc-checkbox-theme($light-theme);
@include mat.mdc-checkbox-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-radio-theme($dark-theme);
@include mat.mdc-radio-typography($dark-theme);
@include mat.mdc-checkbox-theme($dark-theme);
@include mat.mdc-checkbox-typography($dark-theme);
`,
);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';

describe('progress-bar styles', () => {
let runner: SchematicTestRunner;
let cliAppTree: UnitTestTree;

async function runMigrationTest(oldFileContent: string, newFileContent: string) {
cliAppTree.create(THEME_FILE, oldFileContent);
const tree = await migrateComponent('progress-bar', runner, cliAppTree);
const tree = await migrateComponents(['progress-bar'], runner, cliAppTree);
expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
}

Expand Down Expand Up @@ -71,6 +71,46 @@ describe('progress-bar styles', () => {
);
});

it('should add correct theme if all-component-themes mixin included', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.all-component-themes($theme);
@include mat.mdc-progress-bar-theme($theme);
@include mat.mdc-progress-bar-typography($theme);
`,
);
});

it('should add multiple themes for multiple all-component-themes mixins', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.all-component-themes($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.all-component-themes($light-theme);
@include mat.mdc-progress-bar-theme($light-theme);
@include mat.mdc-progress-bar-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-progress-bar-theme($dark-theme);
@include mat.mdc-progress-bar-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
Expand Down

0 comments on commit 425fd7d

Please sign in to comment.