Component styles not showing in cypress component test

[abf7d]

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

1. Clone the repo
2. run npm i
3. run the component tests nx component-test charts
4. 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
5. 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
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[barbados-clemens]

Hi @abf7d thanks for opening the issue.

Can you try updating to at least nx v15.9.0? this should have been fixed in this PR: https://github.com/nrwl/nx/pull/15252

If you can't update now, you should be able to directly import the project you're using component testing with in the app you've used for the build target (this value is the devServerTarget in the project.json executor options) So in your example repo, you'd need to import the usage of chart library in the explorer app.

[abf7d]

HI @barbados-clemens , thanks for the reply. Migrating to the latest (16) should work as well, correct? I'm getting errors after I run nx migrate latest (or nx migrate 15.9.0) then run npm install. I'll create a separate issue for that.

[abf7d]

I tried upgrading to v15.9.2 but it didn't fix the test. I'm implementing component tests, not end to end. Does that make a difference? I'm not using my e2e project.

[barbados-clemens]

No, this is only for CT.

Can you update your repo with the v15.9.2 migration you did so I can take a look?

[abf7d]

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.

[barbados-clemens]

I just checked out the branch and it seems to be loading styles for me. (ignore the blurriness it was taking on a VM with a bad scaling)

I also tried it on windows just in case and same behavior, styles loading for me.

Maybe try removing your node_modules and reinstalling on the v15.9 branch?

[abf7d]

The styles in the image are incorrect. Each node should have a white background. The lines should be thicker. The arrowheads should be more visible, etc. the second image posted above is the correct one.On May 9, 2023, at 10:26 AM, Caleb Ukle @.***> wrote: I just checked out the branch and it seems to be loading styles for me.

I also tried it on windows just in case and same behavior, styles loading for me. Maybe try removing your node_modules and reinstalling on the v15.9 branch?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[abf7d]

The only styles visible are inline styles.On May 9, 2023, at 12:56 PM, Aaron Friedman @.> wrote:The styles in the image are incorrect. Each node should have a white background. The lines should be thicker. The arrowheads should be more visible, etc. the second image posted above is the correct one.On May 9, 2023, at 10:26 AM, Caleb Ukle @.> wrote: I just checked out the branch and it seems to be loading styles for me.

I also tried it on windows just in case and same behavior, styles loading for me. Maybe try removing your node_modules and reinstalling on the v15.9 branch?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[barbados-clemens]

@abf7d how do I see the 'working' version of the charts library component?

[abf7d]

So are you asking how to view in the app the working component rendered in a browser? You need a backend for that. You could also access an earlier deployed version. The styles should be the same. You can sign up to the site and let me know what email you used so I can grant you access: https://criticalpass.azurewebsites.net/ I'm thinking that there is also one quirk with this component which could be causing the issue. I have the View Encapsulation set to None because this component renders dom elements outside of angular. It is why I needed to go with Cypress for component testing. The tests mostly work though. Please let me know if you want me to sign you up. Thanks

[barbados-clemens]

I just need to know how to show the styles correctly working for that component like you have in your screenshot. I'm just trying to figure out where those styles originally come from because I can see the stylesheet being loaded into cypress (apps/explorer/src/styles.scss) so I know it's present, but the styles you show in your screenshot aren't present so unsure where they actually come from so know if it's a nx configuration issue or a cypress issue.

i.e. in the apps/explorer/src/styles.scss

* {
    padding: 0px;
    margin: 0px;
    font-size: 0.9rem;
// adding this shows up in the component test,
// so the file is loaded and applied yet doesn't have the desired styles stated
    outline: 1px solid red;
}

[abf7d]

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.

[barbados-clemens]

Hi so it looks like styles are loading, but the scss file you directly pointed doesn't apply the styles because they are scoped to the element tag which doesn't exist when using component testing.

here is a screenshot of the dom root element that the host element doesn't exist. component testing seems to use the div[data-cy-root] directly instead of having the element nested (unsure if this is expected behavior with Cypress will bring it up with them)

you can get around this by using a host binding and setting the class of the host element to the class you want to scope with. i.e. the selector name.

@Component({
    selector: 'cp-arrow-chart',
    templateUrl: './arrow-chart.component.html',
    styleUrls: ['./arrow-chart.component.scss'],
+    host: {
+       class: 'cp-arrow-chart',
+    },

and changing the scss file to use that class to wrap all the other classes

- cp-arrow-chart {
+ .cp-arrow-chart {
// other stuff
}

[abf7d]

That did it! The styles are working now. Thank you so much. Just a question: I've been running the test with nx component-test charts. It results in creating a video of the test. It look like you are able to inspect the dom for the test we have been using. How can I do that? Is there a particular nx command I can use? Thanks again!

[barbados-clemens]

if you use --watch it will open in a headed mode. https://nx.dev/packages/cypress/documents/cypress-component-testing#watching-for-changes-(headed-mode)

[barbados-clemens]

Talked with the Cypress folks and this is the reason why the element is set with the div[data-cy-root] element instead of the named selector you'd were trying to use.

https://github.com/cypress-io/cypress/issues/24385

Since this is the intended behavior and we found a valid workaround (IMO) I'm going to closed this issue. If you run into any more issues with component testing feel free to open an issue! :)

[abf7d]

Thanks for all of your help!On May 16, 2023, at 9:48 AM, Caleb Ukle @.***> wrote: Talked with the Cypress folks and this is the reason why the element is set with the div[data-cy-root] element instead of the named selector you'd were trying to use. cypress-io/cypress#24385 Since this is the intended behavior and we found a valid workaround (IMO) I'm going to closed this issue. If you run into any more issues with component testing feel free to open an issue! :)

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.