Question

您如何以编程方式与赛普拉斯的Angular / NGRX交互？柏树文档似乎只引用React：https://www.cypress.io/blog/2018/11/14/testing-redux-store/

// expose store when run in Cypress
if (window.Cypress) {
  window.store = store
}
cy
 .window()
 .its('store')
 .invoke('dispatch', { type: 'ADD_TODO', text: 'Test dispatch' })
// check if the app has updated its UI

这将是React方法；那么Angular呢？

Answer 1

在Angular中几乎是相同的。在您的AppComponent或商店中，您都可以执行以下操作：

// Expose the store
@Component({...})
export class AppComponent {
    constructor(private store: Store<AppState>){
        if(window.Cypress){
            window.store = this.store;
        }
    }
}

然后您可以创建自己的赛普拉斯实用程序：

function dispatchAction(action: Action): Cypress.Chainable<any> {
    return cy.window().then(w => {
        const store = w.store;
        store.dispatch(action);
    });
}

最后，您可以在赛普拉斯测试中使用它：

dispatchAction(new MyAction()).then(() => {
     // Assert the side effect of your action
     // ...
     // cy.get('.name').should('exist');
});

赛普拉斯-以编程方式操作Angular / NGRX应用

1 个答案: