build: test material with bazel (#13670)

* build: test material with bazel

* Supports testing `src/lib` with Bazel.

* Add prebuilt theme to all Material tests

* Always include prebuilt theme. Rebase changes for paginator spec

.circleci/config.yml

@@ -83,8 +83,8 @@ jobs:
       - *copy_bazel_config
 
       # TODO(jelbourn): Update this command to run all tests if the Bazel issues have been fixed.
-      - run: bazel build src/cdk/... src/lib:material
-      - run: bazel test src/cdk/...
+      - run: bazel build src/cdk/... src/lib/...
+      - run: bazel test src/cdk/... src/lib/...
 
       - *save_cache
 

src/lib/BUILD.bazel

@@ -46,5 +46,8 @@ ng_package(
   packages = ["//src/lib/schematics:npm_package"],
   replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
   deps = MATERIAL_TARGETS,
-  tags = ["publish"],
+  # TODO(devversion): Use the npm package for publishing. Right now this is disabled because
+  # we build using AOT for serving & testing, but the `ng_package` rule should not include factory
+  # files.
+  tags = ["manual"],
 )

src/lib/autocomplete/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "autocomplete",
@@ -42,3 +42,29 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "autocomplete_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "@rxjs//operators",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    "//src/lib/form-field",
+    "//src/lib/input",
+    ":autocomplete"
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":autocomplete_test_sources"],
+)

src/lib/badge/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "badge",
@@ -26,3 +26,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "badge_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "//src/lib/core",
+    ":badge",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":badge_test_sources"],
+)
+

src/lib/bottom-sheet/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "bottom-sheet",
@@ -42,3 +42,25 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "bottom_sheet_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/common/testing",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    ":bottom-sheet",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":bottom_sheet_test_sources"],
+)
+

src/lib/button-toggle/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "button-toggle",
@@ -34,3 +34,20 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "button_toggle_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/testing",
+    ":button-toggle",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":button_toggle_test_sources"],
+)
+

src/lib/button/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "button",
@@ -41,3 +41,18 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "button_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "//src/lib/core",
+    ":button"
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":button_test_sources"],
+)

src/lib/checkbox/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "checkbox",
@@ -36,3 +36,20 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "checkbox_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/observers",
+    "//src/cdk/testing",
+    ":checkbox",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":checkbox_test_sources"],
+)

src/lib/chips/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "chips",
@@ -40,3 +40,27 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "chips_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/animations",
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/a11y",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/platform",
+    "//src/cdk/testing",
+    "//src/lib/form-field",
+    "//src/lib/input",
+    ":chips",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":chips_test_sources"],
+)

src/lib/core/BUILD.bazel

@@ -2,7 +2,7 @@ package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
 load("//:packages.bzl", "MATERIAL_PACKAGES")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 exports_files(["theming/_theming.scss"])
 
@@ -30,7 +30,6 @@ ng_module(
   ],
 )
 
-
 # TODO(jelbourn): remove this when sass_library acts like a filegroup
 filegroup(
   name = "core_scss_partials",
@@ -106,3 +105,24 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+#################
+#  Test targets
+#################
+
+ng_test_library(
+  name = "core_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/platform",
+    "//src/cdk/testing",
+    "//src/lib/core",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":core_test_sources"],
+)

src/lib/datepicker/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "datepicker",
@@ -64,9 +64,33 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "datepicker_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser-dynamic/testing",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    "//src/lib/form-field",
+    "//src/lib/input",
+    ":datepicker",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":datepicker_test_sources"],
+)

src/lib/datepicker/datepicker.spec.ts

@@ -604,7 +604,7 @@ describe('MatDatepicker', () => {
 
         // When the calendar is in year view, the first cell should be for a month rather than
         // for a date.
-        expect(firstCalendarCell.textContent)
+        expect(firstCalendarCell.textContent!.trim())
             .toBe('JAN', 'Expected the calendar to be in year-view');
       });
 
@@ -654,7 +654,7 @@ describe('MatDatepicker', () => {
 
         // When the calendar is in year view, the first cell should be for a month rather than
         // for a date.
-        expect(firstCalendarCell.textContent)
+        expect(firstCalendarCell.textContent!.trim())
             .toBe('2016', 'Expected the calendar to be in multi-year-view');
       });
 

src/lib/dialog/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "dialog",
@@ -39,3 +39,26 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "dialog_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/common/testing",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    ":dialog",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":dialog_test_sources"],
+)

src/lib/divider/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "divider",
@@ -39,3 +39,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+
+ng_test_library(
+  name = "divider_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    ":divider",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":divider_test_sources"],
+)
+

src/lib/expansion/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "expansion",
@@ -49,3 +49,21 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "expansion_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/a11y",
+    "//src/cdk/keycodes",
+    "//src/cdk/testing",
+    ":expansion",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":expansion_test_sources"],
+)

src/lib/grid-list/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "grid-list",
@@ -32,3 +32,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+
+ng_test_library(
+  name = "grid_list_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "//src/cdk/bidi",
+    ":grid-list",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":grid_list_test_sources"],
+)

src/lib/icon/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "icon",
@@ -36,3 +36,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "icon_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common/http/testing",
+    "@angular//packages/platform-browser",
+    "//src/cdk/testing",
+    ":icon",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":icon_test_sources"],
+)

src/lib/input/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "input",
@@ -39,3 +39,25 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "input_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/platform",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    "//src/lib/form-field",
+    "//src/lib/stepper",
+    "//src/lib/tabs",
+    ":input",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":input_test_sources"],
+)

src/lib/input/input.spec.ts

@@ -404,7 +404,7 @@ describe('MatInput without forms', () => {
     const el = fixture.debugElement.query(By.css('label'));
 
     expect(el).not.toBeNull();
-    expect(el.nativeElement.textContent).toMatch(/^hello$/);
+    expect(el.nativeElement.textContent!.trim()).toMatch(/^hello$/);
   });
 
   it('should hide the required star from screen readers', fakeAsync(() => {

src/lib/list/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "list",
@@ -22,7 +22,6 @@ ng_module(
   ],
 )
 
-
 # TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
 filegroup(
   name = "list_scss_partials",
@@ -39,3 +38,21 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "list_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/keycodes",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    ":list",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":list_test_sources"],
+)

src/lib/menu/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "menu",
@@ -40,3 +40,26 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+ng_test_library(
+  name = "menu_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "//src/cdk/a11y",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    ":menu",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":menu_test_sources"],
+)
+

src/lib/paginator/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "paginator",
@@ -20,7 +20,6 @@ ng_module(
   ],
 )
 
-
 # TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
 filegroup(
   name = "paginator_scss_partials",
@@ -37,3 +36,21 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "paginator_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    "//src/lib/select",
+    ":paginator",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":paginator_test_sources"],
+)

src/lib/paginator/paginator.spec.ts

@@ -101,7 +101,7 @@ describe('MatPaginator', () => {
         intl.changes.next();
         fixture.detectChanges();
 
-        expect(label.textContent).toBe('1337 items per page');
+        expect(label.textContent!.trim()).toBe('1337 items per page');
       }));
   });
 

src/lib/progress-bar/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "progress-bar",
@@ -18,7 +18,6 @@ ng_module(
   ],
 )
 
-
 # TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
 filegroup(
   name = "progress_bar_scss_partials",
@@ -35,3 +34,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "progress_bar_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/testing",
+    ":progress-bar",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":progress_bar_test_sources"],
+)

src/lib/progress-spinner/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "progress-spinner",
@@ -34,3 +34,18 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+ng_test_library(
+  name = "progress_spinner_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    ":progress-spinner",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":progress_spinner_test_sources"],
+)
+
+

src/lib/radio/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "radio",
@@ -36,3 +36,19 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "radio_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/testing",
+    ":radio",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":radio_test_sources"],
+)

src/lib/select/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "select",
@@ -43,3 +43,29 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "select_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "@rxjs//operators",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/platform",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    "//src/lib/form-field",
+    ":select",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":select_test_sources"],
+)

src/lib/sidenav/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "sidenav",
@@ -41,3 +41,24 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "sidenav_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/a11y",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/platform",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    ":sidenav",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":sidenav_test_sources"],
+)

src/lib/slide-toggle/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "slide-toggle",
@@ -38,3 +38,23 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "slide_toggle_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/bidi",
+    "//src/cdk/observers",
+    "//src/cdk/testing",
+    # TODO(devversion): move gesture test config out of slider.
+    "//src/lib/slider",
+    ":slide-toggle",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":slide_toggle_test_sources"],
+)

src/lib/slider/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "slider",
@@ -39,3 +39,21 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "slider_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/testing",
+    ":slider",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":slider_test_sources"],
+)

src/lib/snack-bar/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "snack-bar",
@@ -49,3 +49,20 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "snack_bar_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/a11y",
+    "//src/cdk/overlay",
+    ":snack-bar",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":snack_bar_test_sources"],
+)

src/lib/sort/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "sort",
@@ -34,3 +34,24 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "sort_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "@rxjs//operators",
+    "//src/cdk/collections",
+    "//src/cdk/table",
+    "//src/cdk/testing",
+    "//src/lib/table",
+    ":sort",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":sort_test_sources"],
+)

src/lib/stepper/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "stepper",
@@ -51,3 +51,27 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "stepper_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/forms",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "@rxjs//operators",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/stepper",
+    "//src/cdk/testing",
+    "//src/lib/form-field",
+    "//src/lib/input",
+    ":stepper",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":stepper_test_sources"],
+)

src/lib/table/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "table",
@@ -37,3 +37,21 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "table_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "//src/cdk/collections",
+    "//src/lib/paginator",
+    "//src/lib/sort",
+    ":table",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":table_test_sources"],
+)

src/lib/tabs/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "tabs",
@@ -85,3 +85,27 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "tabs_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "@rxjs",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/observers",
+    "//src/cdk/portal",
+    "//src/cdk/scrolling",
+    "//src/cdk/testing",
+    "//src/lib/core",
+    ":tabs",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":tabs_test_sources"],
+)

src/lib/toolbar/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "toolbar",
@@ -32,3 +32,20 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+ng_test_library(
+  name = "toolbar_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/platform-browser",
+    ":toolbar",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":toolbar_test_sources"],
+)
+
+
+
+

src/lib/tooltip/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "tooltip",
@@ -44,3 +44,25 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "tooltip_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/animations",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/a11y",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/platform",
+    "//src/cdk/testing",
+    ":tooltip",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":tooltip_test_sources"],
+)

src/lib/tree/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility=["//visibility:public"])
 
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "tree",
@@ -35,3 +35,18 @@ sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),
 )
+
+ng_test_library(
+  name = "tree_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@rxjs",
+    "//src/cdk/tree",
+    ":tree",
+  ]
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":tree_test_sources"],
+)

tools/defaults.bzl

@@ -72,7 +72,13 @@ def ng_test_library(deps = [], tsconfig = None, **kwargs):
     **kwargs
   )
 
-def ng_web_test_suite(deps = [], srcs = [], static_css = [], **kwargs):
+def ng_web_test_suite(deps = [], srcs = [], static_css = [], bootstrap = [], **kwargs):
+  # Always include a prebuilt theme in the test suite because otherwise tests, which depend on CSS
+  # that is needed for measuring, will unexpectedly fail. Also always adding a prebuilt theme
+  # reduces the amount of setup that is needed to create a test suite Bazel target. Note that the
+  # prebuilt theme will be also added to CDK test suites but shouldn't affect anything.
+  static_css = static_css + ["//src/lib/prebuilt-themes:indigo-pink"]
+
   # Workaround for https://github.com/bazelbuild/rules_typescript/issues/301
   # Since some of our tests depend on CSS files which are not part of the `ng_module` rule,
   # we need to somehow load static CSS files within Karma (e.g. overlay prebuilt). Those styles
@@ -80,7 +86,7 @@ def ng_web_test_suite(deps = [], srcs = [], static_css = [], **kwargs):
   # allows JS files to be included and served within Karma, we need to create a JS file that
   # loads the given CSS file.
   for css_label in static_css:
-    css_id = "static-css-file-%s" % (css_label.strip(':').strip('/'))
+    css_id = "static-css-file-%s" % (css_label.replace("/", "_").replace(":", "-"))
     deps += [":%s" % css_id]
 
     native.genrule(
@@ -108,6 +114,7 @@ def ng_web_test_suite(deps = [], srcs = [], static_css = [], **kwargs):
     bootstrap = [
       "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",
       "@npm//node_modules/reflect-metadata:Reflect.js",
-    ],
+      "@npm//node_modules/hammerjs:hammer.js",
+    ] + bootstrap,
     **kwargs
   )