Change return value of stub for single test

[dikkadev]

I am working with Cypress Component Testing (Angular) and cannot get this to work nicely. Here is an abbreviated example with some things I have tried.

//imports

describe('BigComponent', function() {
    beforeEach(function() {
        this.stubService = {
            get: cy.stub().returns(true)
        }

        cy.mount(BigComponent, {
            providers: [
                { provide: Service, useValue: this.stubService }
            ]
        })
    })

    it('button should be there', function() {
        cy.get('#button').should('exist')
    })

    // more tests where the stub needs to return true

    it('button should not be visible on missing rights', function() {
        // how to make service.get return false only for this test?
        // it only needs to be false for this one test, 
        // but be true for basically all other tests more than the one shown here)

        /* Variant 1 | Doesn't seem to reload ui
         this.stubService.get.callsFake(() => {
            return false
         })
         this.fixture.detectChanges();
        */

       /* Variant 2 | Also does not work
        this.stubService = {
            get: cy.stub().returns(false)
        }
        this.fixture.detectChanges();
       */

       /* Variant 3 | This method works for another stub we have, but not for this one??
        // changes beforeEach stub to:
        this.hasAnyPermissionValue = true;
        this.stubService = [
            get: cy.stub().returns(this.hasAnyPermissionValue)
        ]

        // changes test to:
        this.hasAnyPermissionValue = false;
        this.fixture.detectChanges();
       */

       /* Variant 4 | Works but seems like a bad idea, and definitely bad DX
        this.stubService = {
            get: cy.stub().returns(false)
        }
        cy.mount(BigComponent, {
            providers: [
                { provide: Service, useValue: this.stubService }
            ]
        }
       */

        cy.get('#button').should('not.exist')
    })
})

Does detectChanges just not work for providers?

As said in variant 3, something very similar works perfectly fine in other tests in the component.