From 553fcb2ba4ec7bcfa911cfc336f1743653a79d80 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 7 Feb 2024 17:27:29 +0000
Subject: [PATCH] test: Ensure M3 theme is well behaved

Specifically it should:
1. Only emit styles under the user specified selector
2. Only emit CSS variable definitions
---
 .../core/theming/tests/m3-theme.spec.ts       | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/material/core/theming/tests/m3-theme.spec.ts

diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
new file mode 100644
index 000000000000..fcf151bd4b1b
--- /dev/null
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -0,0 +1,67 @@
+import {parse} from 'postcss';
+import {compileString} from 'sass';
+import {runfiles} from '@bazel/runfiles';
+import * as path from 'path';
+
+import {createLocalAngularPackageImporter} from '../../../../../tools/sass/local-sass-importer';
+import {pathToFileURL} from 'url';
+
+// Note: For Windows compatibility, we need to resolve the directory paths through runfiles
+// which are guaranteed to reside in the source tree.
+const testDir = path.join(runfiles.resolvePackageRelative('../_all-theme.scss'), '../tests');
+const packagesDir = path.join(runfiles.resolveWorkspaceRelative('src/cdk/_index.scss'), '../..');
+
+const localPackageSassImporter = createLocalAngularPackageImporter(packagesDir);
+
+const mdcSassImporter = {
+  findFileUrl: (url: string) => {
+    if (url.toString().startsWith('@material')) {
+      return pathToFileURL(
+        path.join(runfiles.resolveWorkspaceRelative('./node_modules'), url),
+      ) as URL;
+    }
+    return null;
+  },
+};
+
+/** Transpiles given Sass content into CSS. */
+function transpile(content: string) {
+  return compileString(
+    `
+        @use '../../../index' as mat;
+        @use '../../../../material-experimental/index' as matx;
+
+        $internals: _mat-theming-internals-do-not-access;
+
+        $theme: matx.define-theme();
+
+        ${content}
+      `,
+    {
+      loadPaths: [testDir],
+      importers: [localPackageSassImporter, mdcSassImporter],
+    },
+  ).css.toString();
+}
+
+describe('M3 theme', () => {
+  it('should emit all styles under the given selector', () => {
+    const root = parse(transpile(`html { @include mat.all-component-themes($theme); }`));
+    const selectors: string[] = [];
+    root.walkRules(rule => {
+      selectors.push(rule.selector);
+    });
+    expect(selectors).toEqual(['html']);
+  });
+
+  it('should only emit CSS variables', () => {
+    const root = parse(transpile(`html { @include mat.all-component-themes($theme); }`));
+    const nonVarProps: string[] = [];
+    root.walkDecls(decl => {
+      if (!decl.prop.startsWith('--')) {
+        nonVarProps.push(decl.prop);
+      }
+    });
+    expect(nonVarProps).toEqual([]);
+  });
+});