build: better sharing of material test utilities (#13885)

* The slide toggle tests no longer import the test gesture config from `../slider/`
* The datepicker month constants from `@angular/material/core` have been moved to `lib/testing`. The old export from `core` will be kept for backwards compatibility until V8

.github/CODEOWNERS

@@ -33,6 +33,7 @@
 /src/lib/stepper/**                                @mmalerba
 /src/lib/table/**                                  @andrewseguin
 /src/lib/tabs/**                                   @andrewseguin
+/src/lib/testing/**                                @jelbourn
 /src/lib/toolbar/**                                @devversion
 /src/lib/tooltip/**                                @andrewseguin
 /src/lib/tree/**                                   @jelbourn @andrewseguin
@@ -52,7 +53,6 @@
 /src/lib/core/selection/**                         @jelbourn
 /src/lib/core/selection/pseudo*/**                 @crisbeto @jelbourn
 /src/lib/core/style/**                             @jelbourn
-/src/lib/core/testing/**                           @jelbourn
 /src/lib/core/theming/**                           @jelbourn
 /src/lib/core/typography/**                        @crisbeto
 /src/lib/core/util/**                              @jelbourn

src/lib/core/BUILD.bazel

@@ -102,10 +102,11 @@ ng_test_library(
   deps = [
     "@angular//packages/platform-browser",
     "@angular//packages/platform-browser/animations",
+    "//src/cdk/keycodes",
     "//src/cdk/platform",
     "//src/cdk/testing",
-    "//src/cdk/keycodes",
-    "//src/lib/core",
+    "//src/lib/testing",
+    ":core",
   ]
 )
 

src/lib/core/datetime/native-date-adapter.spec.ts

@@ -1,7 +1,7 @@
 import {Platform} from '@angular/cdk/platform';
 import {LOCALE_ID} from '@angular/core';
 import {async, inject, TestBed} from '@angular/core/testing';
-import {DEC, FEB, JAN, MAR} from '../testing/month-constants';
+import {DEC, FEB, JAN, MAR} from '@angular/material/testing';
 import {DateAdapter, MAT_DATE_LOCALE, NativeDateAdapter, NativeDateModule} from './index';
 
 const SUPPORTS_INTL = typeof Intl != 'undefined';

src/lib/core/month-constants.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * When constructing a Date, the month is zero-based. This can be confusing, since people are
+ * used to seeing them one-based. So we create these aliases to make writing the tests easier.
+ * @docs-private
+ * @breaking-change 8.0.0 Remove this with V8 since it was only targeted for testing.
+ */
+export const JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SEP = 8,
+  OCT = 9, NOV = 10, DEC = 11;

src/lib/core/public-api.ts

@@ -18,5 +18,5 @@ export * from './label/label-options';
 export * from './ripple/index';
 export * from './selection/index';
 
-// TODO: don't have this
-export * from './testing/month-constants';
+// TODO(devversion): remove this with v8
+export * from './month-constants';

src/lib/datepicker/BUILD.bazel

@@ -79,6 +79,7 @@ ng_test_library(
     "//src/lib/core",
     "//src/lib/form-field",
     "//src/lib/input",
+    "//src/lib/testing",
     ":datepicker",
   ]
 )

src/lib/datepicker/calendar-header.spec.ts

@@ -1,7 +1,8 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {Component} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {DEC, FEB, JAN, MatNativeDateModule} from '@angular/material/core';
+import {MatNativeDateModule} from '@angular/material/core';
+import {DEC, FEB, JAN} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendar} from './calendar';
 import {MatDatepickerIntl} from './datepicker-intl';

src/lib/datepicker/calendar.spec.ts

@@ -8,7 +8,8 @@ import {
 } from '@angular/cdk/testing';
 import {Component, NgZone} from '@angular/core';
 import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
-import {DateAdapter, DEC, FEB, JAN, JUL, MatNativeDateModule, NOV} from '@angular/material/core';
+import {DateAdapter, MatNativeDateModule} from '@angular/material/core';
+import {DEC, FEB, JAN, JUL, NOV} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendar} from './calendar';
 import {MatDatepickerIntl} from './datepicker-intl';

src/lib/datepicker/datepicker.spec.ts

@@ -1,4 +1,5 @@
-import {ENTER, ESCAPE, RIGHT_ARROW, UP_ARROW, DOWN_ARROW} from '@angular/cdk/keycodes';
+import {Directionality} from '@angular/cdk/bidi';
+import {DOWN_ARROW, ENTER, ESCAPE, RIGHT_ARROW, UP_ARROW} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
@@ -11,18 +12,11 @@ import {
 import {Component, FactoryProvider, Type, ValueProvider, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {
-  DEC,
-  JAN,
-  JUL,
-  JUN,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-  NativeDateModule,
-  SEP,
-} from '@angular/material/core';
+import {MAT_DATE_LOCALE, MatNativeDateModule, NativeDateModule} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
+import {DEC, JAN, JUL, JUN, SEP} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
+import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
 import {MatInputModule} from '../input/index';
@@ -30,8 +24,6 @@ import {MatDatepicker} from './datepicker';
 import {MatDatepickerInput} from './datepicker-input';
 import {MatDatepickerToggle} from './datepicker-toggle';
 import {MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepickerIntl, MatDatepickerModule} from './index';
-import {Directionality} from '@angular/cdk/bidi';
-import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 
 describe('MatDatepicker', () => {
   const SUPPORTS_INTL = typeof Intl != 'undefined';

src/lib/datepicker/month-view.spec.ts

@@ -8,18 +8,18 @@ import {
   PAGE_DOWN,
   PAGE_UP,
   RIGHT_ARROW,
-  UP_ARROW,
   SPACE,
+  UP_ARROW,
 } from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {DEC, FEB, JAN, MAR, MatNativeDateModule, NOV} from '@angular/material/core';
+import {MatNativeDateModule} from '@angular/material/core';
+import {DEC, FEB, JAN, MAR, NOV} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendarBody} from './calendar-body';
 import {MatMonthView} from './month-view';
 
-
 describe('MatMonthView', () => {
   let dir: {value: Direction};
 

src/lib/datepicker/multi-year-view.spec.ts

@@ -1,3 +1,4 @@
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {
   DOWN_ARROW,
   END,
@@ -8,14 +9,14 @@ import {
   RIGHT_ARROW,
   UP_ARROW,
 } from '@angular/cdk/keycodes';
-import {By} from '@angular/platform-browser';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed, async} from '@angular/core/testing';
-import {Direction, Directionality} from '@angular/cdk/bidi';
-import {JAN, MatNativeDateModule} from '@angular/material/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatNativeDateModule} from '@angular/material/core';
+import {JAN} from '@angular/material/testing';
+import {By} from '@angular/platform-browser';
 import {MatCalendarBody} from './calendar-body';
 import {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view';
-import {dispatchKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
 
 describe('MatMultiYearView', () => {
   let dir: {value: Direction};

src/lib/datepicker/year-view.spec.ts

@@ -12,25 +12,12 @@ import {
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, ViewChild} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {
-  AUG,
-  DEC,
-  FEB,
-  JAN,
-  JUL,
-  JUN,
-  MAR,
-  MatNativeDateModule,
-  MAY,
-  NOV,
-  OCT,
-  SEP
-} from '@angular/material/core';
+import {MatNativeDateModule} from '@angular/material/core';
+import {AUG, DEC, FEB, JAN, JUL, JUN, MAR, MAY, NOV, OCT, SEP} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendarBody} from './calendar-body';
 import {MatYearView} from './year-view';
 
-
 describe('MatYearView', () => {
   let dir: {value: Direction};
 

src/lib/slide-toggle/BUILD.bazel

@@ -46,8 +46,7 @@ ng_test_library(
     "//src/cdk/bidi",
     "//src/cdk/observers",
     "//src/cdk/testing",
-    # TODO(devversion): move gesture test config out of slider.
-    "//src/lib/slider",
+    "//src/lib/testing",
     ":slide-toggle",
   ]
 )

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -1,3 +1,4 @@
+import {BidiModule, Direction} from '@angular/cdk/bidi';
 import {MutationObserverFactory} from '@angular/cdk/observers';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {Component} from '@angular/core';
@@ -10,11 +11,10 @@ import {
   tick,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
+import {TestGestureConfig} from '@angular/material/testing';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-import {BidiModule, Direction} from '@angular/cdk/bidi';
-import {TestGestureConfig} from '../slider/test-gesture-config';
-import {MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS} from './slide-toggle-config';
 import {MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule} from './index';
+import {MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS} from './slide-toggle-config';
 
 describe('MatSlideToggle without forms', () => {
   let gestureConfig: TestGestureConfig;

src/lib/slider/BUILD.bazel

@@ -47,6 +47,7 @@ ng_test_library(
     "//src/cdk/bidi",
     "//src/cdk/keycodes",
     "//src/cdk/testing",
+    "//src/lib/testing",
     ":slider",
   ]
 )

src/lib/slider/slider.spec.ts

@@ -11,18 +11,18 @@ import {
   UP_ARROW,
 } from '@angular/cdk/keycodes';
 import {
+  createMouseEvent,
+  dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
-  createMouseEvent,
-  dispatchEvent,
 } from '@angular/cdk/testing';
-import {Component, DebugElement, ViewChild, Type} from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
+import {Component, DebugElement, Type, ViewChild} from '@angular/core';
+import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TestGestureConfig} from '@angular/material/testing';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MatSlider, MatSliderModule} from './index';
-import {TestGestureConfig} from './test-gesture-config';
 
 describe('MatSlider', () => {
   let gestureConfig: TestGestureConfig;

src/lib/testing/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility=["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+  name = "testing",
+  module_name = "@angular/material/testing",
+  srcs = glob(["**/*.ts"]),
+  deps = [
+    "@angular//packages/core",
+    "//src/lib/core",
+  ],
+)

src/lib/testing/README.md

@@ -0,0 +1,2 @@
+Note that this is not an entry-point. This directory is just used to share testing logic
+that is specific to Angular Material.

src/lib/testing/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './month-constants';
+export * from './test-gesture-config';

src/material-moment-adapter/BUILD.bazel

@@ -11,7 +11,8 @@ ng_module(
   deps = [
     "@angular//packages/core",
     "@matdeps//moment",
-    "//src/lib/core"
+    "//src/lib/core",
+    "//src/lib/testing",
   ],
   # Explicitly specify the tsconfig that is also used by Gulp. We need to explicitly use this
   # tsconfig because in order to import Moment with TypeScript, we need some special options

src/material-moment-adapter/adapter/moment-date-adapter.spec.ts

@@ -8,11 +8,12 @@
 
 import {LOCALE_ID} from '@angular/core';
 import {async, inject, TestBed} from '@angular/core/testing';
-import {DateAdapter, DEC, FEB, JAN, MAR, MAT_DATE_LOCALE} from '@angular/material/core';
-import * as moment from 'moment';
+import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';
+import {DEC, FEB, JAN, MAR} from '@angular/material/testing';
 import {MomentDateModule} from './index';
-import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from './moment-date-adapter';
+import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter} from './moment-date-adapter';
 
+import * as moment from 'moment';
 
 describe('MomentDateAdapter', () => {
   let adapter: MomentDateAdapter;

test/karma-system-config.js

@@ -93,6 +93,7 @@ System.config({
     '@angular/material/stepper': 'dist/packages/material/stepper/index.js',
     '@angular/material/table': 'dist/packages/material/table/index.js',
     '@angular/material/tabs': 'dist/packages/material/tabs/index.js',
+    '@angular/material/testing': 'dist/packages/material/testing/index.js',
     '@angular/material/toolbar': 'dist/packages/material/toolbar/index.js',
     '@angular/material/tooltip': 'dist/packages/material/tooltip/index.js',
     '@angular/material/tree': 'dist/packages/material/tree/index.js',