BRO FREE GIFT DISCORD NITRO - https://cutt.us/6B3hv

Hey folks, when mocking a service to be used for Cypress component testing, is this the proper way to to mock? cy.mount(SomeComponent, { declarations: [SomeComponent], [providers: {provide: SomeDependency, useValue: { postMessage: cy.stub()} })

I figure it's pretty much identical to using TestBed, right? Main difference is the cy.stub

I keep getting a 'Cannot access SomeDependency' before initialization'

Figured it out, looks like I needed to import a module.

Hi, everyone! Have you encountered this error before while running tests?

Hey guys, anyone got code coverage working for angular component tests with Cypress? Looking for some guidance

What are you envisioning with the code coverage? Covering what exactly? The component.ts file?

Yes the component.ts files

I haven't tried to do that since the whole goal is to have no business logic in your component files

I'd have to play with it to see

So what do the existing cypress code coverage plugins cover in their react examples? Are they not also covering the component.ts?

Hi everyone, I just tried to upgrade from 10.10.0 to 12.1.0 in one of our ag13 projects but this causes a runtime error (without cypress in the loop yet) "JIT compilation failed for module class AgGridModule...". Has anyone seen this?

React code is different. It would cover stuff due to how tsx works.

Have a look at this webinar by Cypress

@few-farmer-48800 there is code cov for e2e everywhere for CT there are some code cov recipes React and some of it bundlers, NextJs and some bundlers there is nothing for Angular If I were an Angular user now, codecov would be a high priority, because you really want to move past Karma, but you don't want to give up code coverage

Hook them up Q, figure it out!

Devex's job about code coverage isn't easy List the frameworks times the possible bundlers consider TS(!) that's already a combinatorial explosion of code coverage recipes for component testing

Right, that's my point lol. In e2e you can make it work for Angular, but for Component testing, it kinda defeats the purpose

If your components are void of business logic, are you wanting to cover your HTML? Your pipes and services are already covered. I'd be interested in seeing if you're checking for unused logic, but even that seems like a weird nice to have

I'd love to hear how other Angular devs are using CT

I also don't want to give up Karma because I still want to unit test my business logic lol. I think that's the big difference

Hi i want to write component test with cypress in angular but i got this error i don't know how to solve this problem

What version of Angular/Cypress?

Angular -> 13.3.10 Cypress -> 10.7.0

I experienced that bumping it to Cypress 11 makes a world of difference from 10.7. The detection and everything with webpack are better.

Good Morning. I have hit a road block while trying to test my angular component. The code can be found in https://github.com/hokrc01/cypress-component-testing-question-was-subject-launched . Basically what I am trying to do is see if the services property has been called. thanks PS the same question can be found in https://stackoverflow.com/questions/74989511/cypress-component-testing-angular-components-spying-on-private-service for those who like statckoverflow

You can spy on the mockService.change.next function to verify it is called. Here is a modified version of your test that should do what you want

import { CategoryBuilderService } from './category-builder.service';
import { CategoryBuilderComponent } from './category-builder.component';

describe('COMPONENT:  CategoryBuilderComponent', () => {
  const mockService = new CategoryBuilderService();

  beforeEach(() => {
    mockService.ageRangeName = '0-5';
    cy.viewport(1920, 1080);
    cy.spy(mockService.change, 'next').as('changeSpy') // Spying done here!
    cy.mount(CategoryBuilderComponent, { providers: [{ provide: CategoryBuilderService, useValue: mockService }] })
  });

  it('should test click of cancel', () => {
    cy.get('[data-test="cbc-cancel"]').click();
    cy.get('@changeSpy').should('have.been.called') // Assert the spy was called!
  });
});

Thank you I will try it out