方法一：模板
我们可以将最后发出的值绑定到模板并检查它。
{
moduleMetadata: { imports: [InputCheckboxModule] },
template: `
<checkbox (changeValue)="value = $event" [selected]="checked" label="Awesome">
</checkbox>
<div id="changeValue">{{ value }}</div> <!-- ❗️? -->
`,
}
it("emits `changeValue`", () => {
// ...
cy.get("#changeValue").contains("true"); // ❗️?
});
方法二：窗口
我们可以将最后发出的值分配给全局 window 对象，在 Cypress 中检索它并验证该值。
export default {
title: "InputCheckbox",
component: InputCheckboxComponent,
argTypes: {
selected: { type: "boolean", defaultValue: false },
label: { type: "string", defaultValue: "Default label" },
},
} as Meta;
const Template: Story<InputCheckboxComponent> = (
args: InputCheckboxComponent
) =>
({
moduleMetadata: { imports: [InputCheckboxModule] },
component: InputCheckboxComponent,
props: args,
} as StoryFnAngularReturnType);
export const E2E = Template.bind({});
E2E.args = {
label: 'E2e label',
selected: true,
changeValue: value => (window.changeValue = value), // ❗️?
};
it("emits `changeValue`", () => {
// ...
cy.window().its("changeValue").should("equal", true); // ❗️?
});
方法 3：角度
我们可以使用存储在ng 下的全局命名空间中的Angular's functions 来获取对Angular 组件的引用并监视输出。
⚠️注意：
-
ng.getComponent() 仅在 Angular 在开发模式下运行时可用。 IE。 enableProdMode() 未被调用。
- 在
.storybook/main.js 中设置 process.env.NODE_ENV = "development"; 以防止 Storybook 在 prod 模式下构建 Angular（请参阅 source）。
export const E2E = Template.bind({});
E2E.args = {
label: 'E2e label',
selected: true,
// Story stays unchanged
};
describe("InputCheckbox", () => {
beforeEach(() => {
cy.visit(
"/iframe.html?id=inputcheckboxcomponent--e-2-e",
registerComponentOutputs("checkbox") // ❗️?
);
});
it("emits `changeValue`", () => {
// ...
cy.get("@changeValue").should("be.calledWith", true); // ❗️?
});
});
function registerComponentOutputs(
componentSelector: string
): Partial<Cypress.VisitOptions> {
return {
// https://docs.cypress.io/api/commands/visit.html#Provide-an-onLoad-callback-function
onLoad(win) {
const componentElement: HTMLElement = win.document.querySelector(
componentSelector
);
// https://angular.io/api/core/global/ngGetComponent
const component = win.ng.getComponent(componentElement);
// Spy on all `EventEmitters` (i.e. `emit()`) and create equally named alias
Object.keys(component)
.filter(key => !!component[key].emit)
.forEach(key => cy.spy(component[key], "emit").as(key)); // ❗️?
},
};
}
总结
- 我喜欢方法 1 中没有魔法。它易于阅读和理解。不幸的是，它需要指定一个带有用于验证输出的附加元素的模板。
- 方法 2 的优点是我们不再需要指定模板。但是我们需要为每个
@Output 添加我们想要测试其他代码的内容。此外，它使用全局window 来“交流”。
- Apprach 3 也不需要模板。它的优点是 Storybook 代码（故事）不需要任何调整。我们只需要将参数传递给
cy.visit()（很可能已被使用）以便能够执行检查。因此，如果我们想通过 Storybook 的 iframe 测试更多组件，它感觉就像是一个可扩展的解决方案。最后但同样重要的是，我们检索对 Angular 组件的引用。有了这个，我们还可以直接在组件本身上调用方法或设置属性。这与ng.applyChanges 的结合似乎为其他测试用例打开了一些大门。