From 0bf19ec462e11afe4c24a759b0f80c91c551aff8 Mon Sep 17 00:00:00 2001
From: Caleb Ukle <caleb@nrwl.io>
Date: Fri, 4 Nov 2022 11:43:21 -0500
Subject: [PATCH] fix(testing): handle path offsets for angular component
 testing (#12863)

(cherry picked from commit 5a137d0b3ff154ed51a41f5d08113dab0f1525b6)
---
 .../src/cypress-component-tests.test.ts       | 22 +++++++++++++++++++
 packages/angular/plugins/component-testing.ts | 10 +++++++++
 2 files changed, 32 insertions(+)

diff --git a/e2e/angular-extensions/src/cypress-component-tests.test.ts b/e2e/angular-extensions/src/cypress-component-tests.test.ts
index 8d63bd86b0dc1..a1b6e774cb834 100644
--- a/e2e/angular-extensions/src/cypress-component-tests.test.ts
+++ b/e2e/angular-extensions/src/cypress-component-tests.test.ts
@@ -70,7 +70,15 @@ export class BtnStandaloneComponent {
 `
     );
     const btnModuleName = names(usedInAppLibName).className;
+    updateFile(
+      `apps/${appName}/src/app/app.component.scss`,
+      `
+@use 'styleguide' as *;
 
+h1 {
+  @include headline;
+}`
+    );
     updateFile(
       `apps/${appName}/src/app/app.module.ts`,
       `
@@ -135,7 +143,21 @@ import {CommonModule} from '@angular/common';
 
     // make sure assets from the workspace root work.
     createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
+    createFile(
+      'assets/styles/styleguide.scss',
+      `
+    @mixin headline {
+    font-weight: bold;
+    color: darkkhaki;
+    background: lightcoral;
+    font-weight: 24px;
+  }
+  `
+    );
     updateProjectConfig(appName, (config) => {
+      config.targets['build'].options.stylePreprocessorOptions = {
+        includePaths: ['assets/styles'],
+      };
       config.targets['build'].options.assets.push({
         glob: '**/*',
         input: 'libs/assets',
diff --git a/packages/angular/plugins/component-testing.ts b/packages/angular/plugins/component-testing.ts
index 0e85c56918233..e4afa8a08f993 100644
--- a/packages/angular/plugins/component-testing.ts
+++ b/packages/angular/plugins/component-testing.ts
@@ -211,11 +211,21 @@ function normalizeBuildTargetOptions(
         ? joinPathFragments(offset, script)
         : { ...script, input: joinPathFragments(offset, script.input) };
     });
+    if (buildOptions.stylePreprocessorOptions?.includePaths.length > 0) {
+      buildOptions.stylePreprocessorOptions = {
+        includePaths: buildOptions.stylePreprocessorOptions.includePaths.map(
+          (path) => {
+            return joinPathFragments(offset, path);
+          }
+        ),
+      };
+    }
   } else {
     const stylePath = getTempStylesForTailwind(ctContext);
     buildOptions.styles = stylePath ? [stylePath] : [];
     buildOptions.assets = [];
     buildOptions.scripts = [];
+    buildOptions.stylePreprocessorOptions = { includePaths: [] };
   }
   const { root, sourceRoot } =
     buildContext.projectGraph.nodes[buildContext.projectName].data;