Cypress - 以编程方式操作 Angular/NGRX 应用程序 [英] Cypress - programmatically manipulating Angular/NGRX app
问题描述
您如何以编程方式与 Cypress 的 Angular/NGRX 交互?cypress 文档似乎仅指 React:https://www.cypress.io/blog/2018/11/14/testing-redux-store/
How do you programmatically interact with Angular/NGRX from Cypress? The cypress docs seem to refer only to 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 呢?
This would be the React approach; so what about Angular?
推荐答案
在 Angular 中几乎是一样的.在您的 AppComponent
或您拥有商店的任何地方,您都可以执行以下操作:
In Angular it is almost the same. In your AppComponent
or wherever you have the store you can do something like:
// Expose the store
@Component({...})
export class AppComponent {
constructor(private store: Store<AppState>){
if(window.Cypress){
window.store = this.store;
}
}
}
然后您可以创建自己的 Cypress 实用程序:
You can then create your own Cypress utility:
function dispatchAction(action: Action): Cypress.Chainable<any> {
return cy.window().then(w => {
const store = w.store;
store.dispatch(action);
});
}
最后你可以在 Cypress 测试中使用它:
And finally you can use it in a Cypress test:
dispatchAction(new MyAction()).then(() => {
// Assert the side effect of your action
// ...
// cy.get('.name').should('exist');
});
这篇关于Cypress - 以编程方式操作 Angular/NGRX 应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!