build: run overlay and text-field tests with Bazel (#13637)

Author: devversion

src/cdk/overlay/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility=["//visibility:public"])
 
-load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
 load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
@@ -32,6 +32,12 @@ sass_library(
   srcs = [":overlay_scss_partials"],
 )
 
+sass_binary(
+  name = "overlay_prebuilt_scss",
+  src = "overlay-prebuilt.scss",
+  deps = [":overlay_scss_lib"]
+)
+
 ng_test_library(
   name = "overlay_test_sources",
   srcs = glob(["**/*.spec.ts"]),
@@ -54,7 +60,5 @@ ng_test_library(
 ng_web_test_suite(
   name = "unit_tests",
   deps = [":overlay_test_sources"],
-  # TODO(devversion): Disabling this test until we found a way to set the screen resolution
-  # of the web test instance. Currently all positioning tests are not passing.
-  tags = ["manual"]
+  static_css = ["overlay_prebuilt_scss"],
 )

src/cdk/text-field/BUILD.bazel

@@ -50,7 +50,5 @@ ng_test_library(
 ng_web_test_suite(
   name = "unit_tests",
   deps = [":text-field_test_sources"],
-  # TODO(devversion): Disabling this test until we found a way to set the screen resolution
-  # of the web test instance. Currently all positioning tests are not passing.
-  tags = ["manual"],
+  static_css = [":text_field_prebuilt_scss"]
 )

tools/defaults.bzl

@@ -68,7 +68,34 @@ def ng_test_library(deps = [], tsconfig = None, **kwargs):
     **kwargs
   )
 
-def ng_web_test_suite(deps = [], srcs = [], **kwargs):
+def ng_web_test_suite(deps = [], srcs = [], static_css = [], **kwargs):
+  # 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
+  # are required for successful test runs. Since the `ts_web_test_suite` rule currently only
+  # 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('/'))
+    deps += [":%s" % css_id]
+
+    native.genrule(
+      name = css_id,
+      srcs = [css_label],
+      outs = ["%s.js" % css_id],
+      output_to_bindir = True,
+      cmd = """
+        files=($(locations %s))
+        css_content=$$(cat $${files[0]})
+        js_template="var cssElement = document.createElement('style'); \
+                    cssElement.type = 'text/css'; \
+                    cssElement.innerHTML = '$$css_content'; \
+                    document.head.appendChild(cssElement);"
+
+         echo $$js_template > $@
+      """ % css_label
+    )
+
   _ts_web_test_suite(
     # Required for running the compiled ng modules that use TypeScript import helpers.
     srcs = ["@npm//node_modules/tslib:tslib.js"] + srcs,