Skip to content

Commit

Permalink
fix(material-experimental/mdc-progress-spinner): fix noop animation (a…
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewseguin authored and annieyw committed Dec 22, 2020
1 parent 6d36942 commit b34e0df
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 1 deletion.
6 changes: 6 additions & 0 deletions src/components-examples/material/progress-bar/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,17 @@ ng_module(
]),
module_name = "@angular/components-examples/material/progress-bar",
deps = [
"//src/cdk/testing",
"//src/cdk/testing/testbed",
"//src/material/card",
"//src/material/progress-bar",
"//src/material/progress-bar/testing",
"//src/material/radio",
"//src/material/slider",
"@npm//@angular/forms",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
],
)

Expand Down
3 changes: 3 additions & 0 deletions src/components-examples/material/progress-bar/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ import {
ProgressBarIndeterminateExample
} from './progress-bar-indeterminate/progress-bar-indeterminate-example';
import {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-example';
import {ProgressBarHarnessExample} from './progress-bar-harness/progress-bar-harness-example';

export {
ProgressBarBufferExample,
ProgressBarConfigurableExample,
ProgressBarDeterminateExample,
ProgressBarHarnessExample,
ProgressBarIndeterminateExample,
ProgressBarQueryExample,
};
Expand All @@ -29,6 +31,7 @@ const EXAMPLES = [
ProgressBarBufferExample,
ProgressBarConfigurableExample,
ProgressBarDeterminateExample,
ProgressBarHarnessExample,
ProgressBarIndeterminateExample,
ProgressBarQueryExample,
];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<mat-progress-bar mode="determinate" [value]="value"></mat-progress-bar>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MatProgressBarHarness} from '@angular/material/progress-bar/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
from '@angular/platform-browser-dynamic/testing';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {ProgressBarHarnessExample} from './progress-bar-harness-example';

describe('ProgressBarHarnessExample', () => {
let fixture: ComponentFixture<ProgressBarHarnessExample>;
let loader: HarnessLoader;

beforeAll(() => {
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
});

beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
imports: [MatProgressBarModule],
declarations: [ProgressBarHarnessExample]
}).compileComponents();
fixture = TestBed.createComponent(ProgressBarHarnessExample);
fixture.detectChanges();
loader = TestbedHarnessEnvironment.loader(fixture);
})
);

it('should load all progress bar harnesses', async () => {
const progressBars = await loader.getAllHarnesses(MatProgressBarHarness);
expect(progressBars.length).toBe(2);
});

it('should get the value', async () => {
fixture.componentInstance.value = 50;
const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
expect(await determinate.getValue()).toBe(50);
expect(await indeterminate.getValue()).toBe(null);
});

it('should get the mode', async () => {
const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
expect(await determinate.getMode()).toBe('determinate');
expect(await indeterminate.getMode()).toBe('indeterminate');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {Component} from '@angular/core';

/**
* @title Testing with MatProgressBarHarness
*/
@Component({
selector: 'progress-bar-harness-example',
templateUrl: 'progress-bar-harness-example.html'
})
export class ProgressBarHarnessExample {
value: number;
}

Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
overflow: hidden;
}

:not(._mat-animation-noopable) {
.mat-mdc-progress-spinner:not(._mat-animation-noopable) {
@include mdc-circular-progress-core-styles($query: animation);
}

// Render the indeterminate spinner as a complete circle when animations are off
._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle {
stroke-dasharray: 0 !important;
}

0 comments on commit b34e0df

Please sign in to comment.