chore: correctly resolve url sass bundle in Angular CT (#25191)

Co-authored-by: Zachary Williams <[email protected]>

Author: lmiller1990

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -1,10 +1,13 @@
 import * as fs from 'fs-extra'
 import { tmpdir } from 'os'
 import * as path from 'path'
-import type { Configuration } from 'webpack'
+import type { Configuration, RuleSetRule } from 'webpack'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
+import debugLib from 'debug'
+
+const debug = debugLib('cypress:webpack-dev-server:angularHandler')
 
 export type BuildOptions = Record<string, any>
 
@@ -250,7 +253,33 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
   const { config } = await generateBrowserWebpackConfigFromContext(
     buildOptions,
     context,
-    (wco: any) => [getCommonConfig(wco), getStylesConfig(wco)],
+    (wco: any) => {
+      const stylesConfig = getStylesConfig(wco)
+
+      // We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
+      // imports in scss, sass, etc are correctly resolved.
+      // https://github.com/cypress-io/cypress/issues/24272
+      stylesConfig.module.rules.forEach((rule: RuleSetRule) => {
+        rule.rules?.forEach((ruleSet) => {
+          if (!Array.isArray(ruleSet.use)) {
+            return
+          }
+
+          ruleSet.use.map((loader) => {
+            if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
+              return
+            }
+
+            const root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+
+            debug('Adding root %s to resolve-url-loader options', root)
+            loader.options.root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+          })
+        })
+      })
+
+      return [getCommonConfig(wco), stylesConfig]
+    },
   )
 
   delete config.entry.main

system-tests/project-fixtures/angular/src/app/app.component.cy.ts

@@ -1,3 +1,4 @@
+// Keep this test very simple as "@cypress/schematic" relies on it to run smoke tests
 import { AppComponent } from './app.component'
 
 it('should', () => {

system-tests/project-fixtures/angular/src/app/app.component.html

@@ -1 +1 @@
-<h1>Hello World your app is running!</h1>
+<h1>Hello World your app is running!</h1>

system-tests/project-fixtures/angular/src/app/app.component.scss

@@ -1,3 +1,3 @@
 h1 {
   color: red
-}
+}

system-tests/project-fixtures/angular/src/app/components/url-image.component.scss

@@ -0,0 +1,6 @@
+.test-img {
+  background-image: url("/assets/test.png");
+  background-size: contain;
+  height: 100px;
+  width: 100px;
+}

system-tests/project-fixtures/angular/src/app/components/url-image.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-url-image',
+  template: `<div class="test-img"></div>`,
+  styleUrls: ['./url-image.component.scss'],
+})
+export class UrlImageComponent {}

system-tests/project-fixtures/angular/src/app/mount.cy.ts

@@ -20,6 +20,7 @@ import { LogoComponent } from './components/logo.component'
 import { TransientService, TransientServicesComponent } from './components/transient-services.component'
 import { ComponentProviderComponent, MessageService } from './components/component-provider.component'
 import { Cart, ProductComponent } from './components/cart.component'
+import { UrlImageComponent } from './components/url-image.component'
 
 @Component({
   template: `<app-projection>Hello World</app-projection>`,
@@ -360,9 +361,20 @@ describe('angular mount', () => {
     cy.get('p').should('have.text', 'Hi . ngOnInit fired: true and ngOnChanges fired: false and conditionalName: false')
   })
 
-  it('can load static assets', () => {
-    cy.mount(LogoComponent)
-    cy.get('img').should('be.visible').and('have.prop', 'naturalWidth').should('be.greaterThan', 0)
+  context('assets', () => {
+    it('can load static assets from <img src="..." />', () => {
+      cy.mount(LogoComponent)
+      cy.get('img').should('be.visible').and('have.prop', 'naturalWidth').should('be.greaterThan', 0)
+    })
+
+    it('can load root relative scss "url()" assets', () => {
+      cy.mount(UrlImageComponent)
+      cy.get('.test-img')
+      .invoke('css', 'background-image')
+      .then((img) => {
+        expect(img).to.contain('__cypress/src/test.png')
+      })
+    })
   })
 
   context('dependency injection', () => {
@@ -430,27 +442,27 @@ describe('angular mount', () => {
 
   describe('teardown', () => {
     beforeEach(() => {
-      cy.get("[id^=root]").should("not.exist");
-    });
+      cy.get('[id^=root]').should('not.exist')
+    })
 
-    it("should mount", () => {
-      cy.mount(ButtonOutputComponent);
-    });
+    it('should mount', () => {
+      cy.mount(ButtonOutputComponent)
+    })
 
     it('should remove previous mounted component', () => {
-      cy.mount(ChildComponent, {componentProperties: { msg: 'Render 1' }})
+      cy.mount(ChildComponent, { componentProperties: { msg: 'Render 1' } })
       cy.contains('Render 1')
-      cy.mount(ChildComponent, {componentProperties: { msg: 'Render 2' }})
+      cy.mount(ChildComponent, { componentProperties: { msg: 'Render 2' } })
       cy.contains('Render 2')
 
       cy.contains('Render 1').should('not.exist')
       cy.get('[id^=root]').children().should('have.length', 1)
     })
-  });
+  })
 
   it('should error when passing in undecorated component', () => {
     Cypress.on('fail', (err) => {
-      expect(err.message).contain("Please add a @Pipe/@Directive/@Component");
+      expect(err.message).contain('Please add a @Pipe/@Directive/@Component')
 
       return false
     })
@@ -459,4 +471,4 @@ describe('angular mount', () => {
 
     cy.mount(MyClass)
   })
-});
+})