CSS 未使用 angular 加载 Cypress 组件测试

Question

我正在尝试使用赛普拉斯组件测试运行器进行组件测试。 Web 组件是使用模板构建的。我们编译模板组件并创建相应的“Angular 组件”并将它们导入到我们的项目中。

组件在 angular 应用程序中启动时符合预期。然而，当它被挂载并使用 cypress 执行测试时，这些预构建组件的 CSS 没有被加载。

cypress.json

{
    "component": {
        "componentFolder": "src",
        "testFiles": "**/*component.spec.ts"
    }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angulartest": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "nexus",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angulartest",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angulartest:build:production"
            },
            "development": {
              "browserTarget": "angulartest:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angulartest:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "angulartest",
  "default": {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "angulartest": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          },
          "@schematics/angular:application": {
            "strict": true
          }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "nexus",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/angulartest",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.app.json",
              "inlineStyleLanguage": "scss",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            },
            "configurations": {
              "production": {
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "500kb",
                    "maximumError": "1mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "2kb",
                    "maximumError": "4kb"
                  }
                ],
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ],
                "outputHashing": "all"
              },
              "development": {
                "buildOptimizer": false,
                "optimization": false,
                "vendorChunk": true,
                "extractLicenses": false,
                "sourceMap": true,
                "namedChunks": true
              }
            },
            "defaultConfiguration": "production"
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "configurations": {
              "production": {
                "browserTarget": "angulartest:build:production"
              },
              "development": {
                "browserTarget": "angulartest:build:development"
              }
            },
            "defaultConfiguration": "development"
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "angulartest:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.spec.json",
              "karmaConfig": "karma.conf.js",
              "inlineStyleLanguage": "scss",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            }
          }
        }
      }
    },
    "defaultProject": "angulartest"
  }
}

package.json

{
  "name": "angulartest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nexus/angular": "1.0.0",
    "@nexus/core": "1.0.0",
    "@ngrx/store": "13.0.2",
    "core-js": "^2.6.12",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.5",
    "@angular/cli": "~13.2.5",
    "@angular/compiler-cli": "~13.2.0",
    "@cypress/webpack-dev-server": "^1.8.2",
    "@types/cypress": "^1.1.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "angular2-template-loader": "^0.6.2",
    "cypress": "^9.5.1",
    "cypress-angular-unit-test": "^3.9.0",
    "html-webpack-plugin": "^4.5.2",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "raw-loader": "1.0.0",
    "sass-loader": "^12.6.0",
    "to-string-loader": "^1.2.0",
    "ts-loader": "^9.2.7",
    "typescript": "4.4.2"
  }
}

component.spec.ts

/// <reference types="cypress" />
import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
import { ToastComponent } from './toast.component';

describe('AppComponent', () => {
  beforeEach(() => {
    setConfig({
      stylesheet:
        '../../node_modules/@nexus/core/dist/styles.scss',
    });
    {
      initEnv(ToastComponent);
      const fixture = mount(ToastComponent);
    }
  });


  it('should create', () => {

    cy.get('.nexus-rhythm-2');
  });

});

cypress/plugins/index.js

/// <reference types="cypress" />

/**
 * @type {Cypress.PluginConfig}
 */

const webpackConfig = require('./webpack.config');
const { startDevServer } = require('@cypress/webpack-dev-server');

module.exports = (on, config) => {
  on('dev-server:start', (options) =>
    startDevServer({
      options,
      webpackConfig,
    }),
  );
  return config;
};

预计

实际

Answer 1

样式是.scss，需要预处理，发生在cypress/plugins/index.js

您的插件文件夹中已有 webpack.config。

它有scss的规则吗？

module: {
  rules: [
    ...          
    {
      test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
           'css-loader',
           {
             loader: 'sass-loader'
           }
        ]
    }
    ...

Answer 2

我根据 Cypress-angular-unit-testing 存储库

的 github issues 之一的建议对我的规范文件进行了一些更改

    /// <reference types="cypress" />
    import { setConfig, initEnv, mount } from 'cypress-angular-unit-test';
    import { ToastComponent } from './toast.component';
    import { ComponentFixture } from '@angular/core/testing';
    import { NexusAngularModule } from '@nexus/angular';
    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import {Locators} from './toast.component.const'
    import {DESKTOP, TAB_LANDSCAPE, TAB_PORTRAIT, MOBILE} from '../../constants'


    describe('AppComponent', () => {
      let fixture: ComponentFixture<ToastComponent>;

      beforeEach(() => {
        setConfig({
          stylesheet: 'src/styles.css'
        });

        initEnv(ToastComponent, {
          imports: [NexusAngularModule],
          schemas: [CUSTOM_ELEMENTS_SCHEMA],
          declarations: [ToastComponent],
        });

        fixture = mount(ToastComponent);
        fixture.detectChanges();

      });

      it('should create', () => {

        cy.get(':nth-child(1) > .nexus-toast > .nexus-toast-content')
          .should('contains.text', 'Information message')
      });

    });

执行此操作后，我能够获得图标和文本，但仍然无法渲染颜色。当我查看 styles.scss 文件时，我发现几乎所有包含样式的类的可见性都被标记为：

visibility: disabled;

我改成了，

visibility: visible;

post 这个，我得到 CSS 正确渲染

CSS 未使用 angular 加载 Cypress 组件测试

CSS is not loading for Cypress component testing using angular

css

angular

cypress