Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 58x 138x 58x 45x 58x 45x 45x 45x 58x 58x 93x 58x 58x 93x 58x 47x 47x 58x 46x 46x 58x | import React from "react";
import type { ComponentStoryCy } from "orphic-cypress";
import { Button } from "stories";
export default {
component: Button,
cy: () => {
beforeEach(() => {
// just something simple to prove this happens at top
cy.wrap("DefaultCyProperty label").as("wrappedLabel");
});
},
};
// These are more repetitive than necessary, real story scenarios would use a 'render'
// prop to the default export, use object syntax throughout, build a template, etc.
export const DefaultCyProperty: ComponentStoryCy<typeof Button> = (args) => (
<Button {...args} label="DefaultCyProperty label" />
);
DefaultCyProperty.cy = () => {
cy.get("@wrappedLabel").then((wrappedLabel) =>
cy.dataCy("button").should("contain", wrappedLabel)
);
cy.wrap("This will be reset").as("wrappedLabel");
};
// story-code @end @include-default
DefaultCyProperty.parameters = {
docs: {
description: {
story: `
You can use default export's \`cy\` property to do things like execute
hooks such as \`beforeEach\` to establish test state.`,
},
},
};
export const CyTestFunctionBody: ComponentStoryCy<typeof Button> = (args) => (
<Button {...args} />
);
CyTestFunctionBody.cyTest = (Story) => {
beforeEach(() => {
cy.wrap("Before Wrapped label").as("beforeWrappedLabel");
});
it("should get label arg from default export beforeEach setup", function () {
// function keyword + this instead of .get("@alias") just to show variant
cy.mount(<Story label={this.wrappedLabel} />);
cy.dataCy("button").should("contain", this.wrappedLabel);
});
it("should get label arg from beforeEach in local cyTest", function () {
cy.mount(<Story label={this.beforeWrappedLabel} />);
cy.dataCy("button").should("contain", this.beforeWrappedLabel);
});
};
// story-code @end
CyTestFunctionBody.parameters = {
docs: {
description: {
story: `
The .cyTest format can contain hooks like beforeEach directly inside its function body,
which is the only way to have such hooks execute for only specific story tests.`,
},
},
};
|