nx: Component styles not showing in cypress component test

Current Behavior

I have an angular nx project. When I run my component tests, my component renders but without styles applied. Unit test looks like

Expected Behavior

It should look like:

GitHub Repo

https://github.com/abf7d/critical-pass/tree/cypress-tests

Steps to Reproduce

Clone the repo
run npm i
run the component tests nx component-test charts
after the tests complete go to the dist > cypress > libs > charts > videos > arrow-chart folder and run the video arrow-chart.component.cy.ts.mp4
The final image of the video of a chart with no styles. For example the nodes are filled with black. The styles are broken and should be white.

Nx Report

NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : win32 x64
   npm  : 8.1.2

   nx : 15.3.0
   @nrwl/angular : 15.3.0
   @nrwl/cypress : 15.3.0
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.3.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.0
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.3.0
   @nrwl/js : 15.3.0
   @nrwl/linter : 15.3.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.3.0
   @nrwl/workspace : 15.3.0
   typescript : 4.8.4

Failure Logs

No response

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 18 (8 by maintainers)

Most upvoted comments

So the styles that seem to be missing are located https://github.com/abf7d/critical-pass/blob/main/libs/charts/src/lib/charts/arrow-chart/arrow-chart.component.scss. I believe one example of the missing styles is on line 47:

.node {
        stroke-width: 1px;
        fill: #fff;
    }

I think the fill: #fff is the line that dictates that the fill for the circles is white. But like I said, if you want to view a live example, I’m more than willing to give you access to the production deployment.

abf7d on May 10, 2023

I updated it on this branch: https://github.com/abf7d/critical-pass/tree/electron-15-9 You will have to use the legacy dependencies flag when installing with npm. I couldn’t upgrade otherwise.

abf7d on May 9, 2023