Skip to content

Commit dfbda93

Browse files
annieywannieyw
committed
add harness
1 parent b648bfb commit dfbda93

File tree

10 files changed

+139
-47
lines changed

10 files changed

+139
-47
lines changed

‎src/dev-app/mdc-progress-spinner/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/material-experimental/mdc-progress-spinner",
14-
"@npm//@angular/router",
1514
"//src/material/button",
1615
"//src/material/button-toggle",
1716
"//src/material/checkbox",
1817
"@npm//@angular/forms",
18+
"@npm//@angular/router",
1919
],
2020
)
2121

‎src/material-experimental/mdc-progress-spinner/BUILD.bazel

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ ng_test_library(
6060
),
6161
deps = [
6262
":mdc-progress-spinner",
63-
"//src/cdk/platform",
64-
"//src/material/progress-spinner",
65-
"@npm//@angular/common",
66-
"@npm//@angular/platform-browser",
63+
"//src/cdk/platform",
64+
"//src/material/progress-spinner",
65+
"@npm//@angular/common",
66+
"@npm//@angular/platform-browser",
6767
],
6868
)
6969

‎src/material-experimental/mdc-progress-spinner/progress-spinner.html

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,27 @@
99
</svg>
1010
</ng-template>
1111

12-
<div class="mdc-circular-progress" role="progressbar" #spinnerRoot>
13-
<div class="mdc-circular-progress__determinate-container" #determinateSpinner>
14-
<svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
15-
xmlns="http://www.w3.org/2000/svg" focusable="false">
16-
<circle [attr.r]="_circleRadius()"
17-
[style.stroke-dasharray.px]="_strokeCircumference()"
18-
[style.stroke-dashoffset.px]="_strokeDashOffset()"
19-
[style.stroke-width.%]="_circleStrokeWidth()"
20-
class="mdc-circular-progress__determinate-circle"
21-
cx="50%" cy="50%"/>
22-
</svg>
23-
</div>
24-
<div class="mdc-circular-progress__indeterminate-container">
25-
<div class="mdc-circular-progress__spinner-layer">
26-
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
27-
<ng-container [ngTemplateOutlet]="circle"></ng-container>
28-
</div>
29-
<div class="mdc-circular-progress__gap-patch">
30-
<ng-container [ngTemplateOutlet]="circle"></ng-container>
31-
</div>
32-
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
33-
<ng-container [ngTemplateOutlet]="circle"></ng-container>
34-
</div>
12+
<div class="mdc-circular-progress__determinate-container" #determinateSpinner>
13+
<svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
14+
xmlns="http://www.w3.org/2000/svg" focusable="false">
15+
<circle [attr.r]="_circleRadius()"
16+
[style.stroke-dasharray.px]="_strokeCircumference()"
17+
[style.stroke-dashoffset.px]="_strokeDashOffset()"
18+
[style.stroke-width.%]="_circleStrokeWidth()"
19+
class="mdc-circular-progress__determinate-circle"
20+
cx="50%" cy="50%"/>
21+
</svg>
22+
</div>
23+
<div class="mdc-circular-progress__indeterminate-container">
24+
<div class="mdc-circular-progress__spinner-layer">
25+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
26+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
27+
</div>
28+
<div class="mdc-circular-progress__gap-patch">
29+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
30+
</div>
31+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
32+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
3533
</div>
3634
</div>
3735
</div>

‎src/material-experimental/mdc-progress-spinner/progress-spinner.scss

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,6 @@
44

55
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
66

7-
.mat-mdc-progress-spinner {
8-
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
9-
display: block;
10-
11-
.mdc-circular-progress {
12-
// MDC circular spinner sets width and height to 48px by default.
13-
width: 100%;
14-
height: 100%;
15-
}
16-
17-
&:not(._mat-animation-noopable) {
7+
:not(._mat-animation-noopable) {
188
@include mdc-circular-progress-core-styles($query: animation);
19-
}
209
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const BASE_STROKE_WIDTH = 10;
5757
exportAs: 'matProgressSpinner',
5858
host: {
5959
'role': 'progressbar',
60-
'class': 'mat-mdc-progress-spinner',
60+
'class': 'mat-mdc-progress-spinner mdc-circular-progress',
6161
'[class._mat-animation-noopable]': `_noopAnimations`,
6262
'[style.width.px]': 'diameter',
6363
'[style.height.px]': 'diameter',
@@ -82,20 +82,20 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
8282
_foundation: MDCCircularProgressFoundation;
8383

8484
/** Root element of MDCCircularProgress. */
85-
@ViewChild('spinnerRoot') _rootElement: ElementRef<HTMLElement>;
85+
// @ViewChild('spinnerRoot') _elementRef: ElementRef<HTMLElement>;
8686

8787
/** The element of the determinate spinner. */
8888
@ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
8989

9090
/** Adapter used by MDC to interact with the DOM. */
9191
// TODO: switch to class when MDC removes object spread in foundation
9292
private _adapter: MDCCircularProgressAdapter = {
93-
addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
94-
hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),
95-
removeClass: (className: string) => this._rootElement.nativeElement.classList.remove(className),
96-
removeAttribute: (name: string) => this._rootElement.nativeElement.removeAttribute(name),
93+
addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
94+
hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
95+
removeClass: (className: string) => this._elementRef.nativeElement.classList.remove(className),
96+
removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
9797
setAttribute: (name: string, value: string) =>
98-
this._rootElement.nativeElement.setAttribute(name, value),
98+
this._elementRef.nativeElement.setAttribute(name, value),
9999
getDeterminateCircleAttribute: (attributeName: string) =>
100100
this._determinateCircle.nativeElement.getAttribute(attributeName),
101101
setDeterminateCircleAttribute: (attributeName: string, value: string) =>

‎src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "testing",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
module_name = "@angular/material-experimental/mdc-progress-spinner/testing",
12+
deps = [
13+
"//src/cdk/coercion",
14+
"//src/cdk/testing",
15+
"//src/material/progress-spinner/testing",
16+
],
17+
)
18+
19+
ng_test_library(
20+
name = "unit_tests_lib",
21+
srcs = glob(["**/*.spec.ts"]),
22+
deps = [
23+
":testing",
24+
"//src/material-experimental/mdc-progress-spinner",
25+
"//src/material/progress-spinner/testing:harness_tests_lib",
26+
],
27+
)
28+
29+
ng_web_test_suite(
30+
name = "unit_tests",
31+
static_files = [
32+
"@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
33+
],
34+
deps = [
35+
":unit_tests_lib",
36+
"//src/material-experimental:mdc_require_config.js",
37+
],
38+
)

‎src/material-experimental/mdc-progress-spinner/testing/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './public-api';

‎src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.spec.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {runHarnessTests} from '@angular/material/progress-spinner/testing/shared.spec';
2+
import {MatProgressSpinnerHarness} from './progress-spinner-harness';
3+
import {MatProgressSpinnerModule} from '../index';
4+
5+
describe('MDC-based MatProgressSpinnerHarness', () => {
6+
runHarnessTests(MatProgressSpinnerModule, MatProgressSpinnerHarness);
7+
});

‎src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {coerceNumberProperty} from '@angular/cdk/coercion';
10+
import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
11+
import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
12+
import {ProgressSpinnerHarnessFilters} from '@angular/material/progress-spinner/testing';
13+
14+
/** Harness for interacting with a MDC based mat-progress-spinner in tests. */
15+
export class MatProgressSpinnerHarness extends ComponentHarness {
16+
/** The selector for the host element of a `MatProgressSpinner` instance. */
17+
static hostSelector = 'mat-progress-spinner,mat-spinner';
18+
19+
/**
20+
* Gets a `HarnessPredicate` that can be used to search for a `MatProgressSpinnerHarness` that
21+
* meets certain criteria.
22+
* @param options Options for filtering which progress spinner instances are considered a match.
23+
* @return a `HarnessPredicate` configured with the given options.
24+
*/
25+
static with(options: ProgressSpinnerHarnessFilters = {}):
26+
HarnessPredicate<MatProgressSpinnerHarness> {
27+
return new HarnessPredicate(MatProgressSpinnerHarness, options);
28+
}
29+
30+
/** Gets the progress spinner's value. */
31+
async getValue(): Promise<number|null> {
32+
const host = await this.host();
33+
const ariaValue = await host.getAttribute('aria-valuenow');
34+
return ariaValue ? coerceNumberProperty(ariaValue) : null;
35+
}
36+
37+
/** Gets the progress spinner's mode. */
38+
async getMode(): Promise<ProgressSpinnerMode> {
39+
const modeAttr = (await this.host()).getAttribute('mode');
40+
return await modeAttr as ProgressSpinnerMode;
41+
}
42+
}

‎src/material-experimental/mdc-progress-spinner/testing/public-api.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './progress-spinner-harness';

0 commit comments

Comments
 (0)