CSS is not loading for Cypress component testing using angular - css

Question

I am trying to do component testing using Cypress component test runner. The web components are built using stencil. We compile the stencil components and create respective "Angular component" and import them into our projects.
The component is as expected when launched in the angular app. However when it is mounted, and the tests are executed using cypress, the CSS for these pre built components are not getting loaded.
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;
};
Expected
Actual

Answer 1

I did a few changes to my spec file, as suggested by one of the github issues for Cypress-angular-unit-testing repository
/// <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')
});
});
After doing this, I was able to get the icons along with the text, but still the colors were not rendering. When I went through the styles.scss file, I found that visibility of almost all the classes that contained styles were marked as:
visibility: disabled;
which I changed to,
visibility: visible;
post this, I got the CSS rendered properly

Answer 2

The styles are .scss which need preprocessing, which happens in cypress/plugins/index.js
You already have a webpack.config in your plugins folder.
Does it have a rule for scss?
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader'
}
]
}
...