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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | 58x 37x 58x 37x 58x 58x 71x 58x 36x 35x 58x 58x 67x 58x 58x 34x 34x 58x 33x 33x 58x 58x 32x 58x 38x 58x 38x 58x 58x 58x | import { ComponentStory } from "@storybook/react";
import React from "react";
import type { ComponentStoryCy, ComponentStoryObjCy } from "orphic-cypress";
import { Button } from "stories";
export default {
component: Button,
id: "fileformats-storybookfiles", // story-code @skip
};
// 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 StoryFunctionWithCyFunction: ComponentStoryCy<typeof Button> = (
args
) => <Button {...args} label="Story function" />;
StoryFunctionWithCyFunction.cy = () =>
cy.dataCy("button").should("contain", "Story function");
// story-code @end @include-default
StoryFunctionWithCyFunction.parameters = {
docs: {
description: {
story:
".cy is the simplest format, expecting just a function which executes in cypress",
},
},
};
export const StoryFunctionWithCyObject: ComponentStoryCy<typeof Button> = (
args
) => <Button {...args} label="Story object" />;
StoryFunctionWithCyObject.cy = {
"should contain 'Story object' label": () =>
cy.dataCy("button").should("contain", "Story object"),
"should not be disabled by default": () =>
cy.dataCy("button").should("not.be.disabled"),
};
StoryFunctionWithCyObject.parameters = {
docs: {
description: {
story: `
.cy also allows an object syntax where the text keys become the input for cypress \`it\`'s
and the bodies execute within their own tests.
~~~tsx
export const StoryFunctionWithCyObject: ComponentStoryCy<typeof Button> = (
args
) => <Button {...args} label="Story object" />;
StoryFunctionWithCyObject.cy = {
"should contain 'Story object' label": () =>
cy.dataCy("button").should("contain", "Story object"),
"should not be disabled by default": () =>
cy.dataCy("button").should("not.be.disabled"),
};
~~~
becomes
~~~ts
describe("Story Function With Cy Object", () => {
it("should contain 'Story object' label", () =>
cy.dataCy("button").should("contain", "Story object")
);
it("should not be disabled by default", () =>
cy.dataCy("button").should("not.be.disabled")
);
});
~~~
`,
},
source: { code: null },
},
};
// Could accept args, but label is required, so just showing a non-args version
export const StoryFunctionWithCyTest: ComponentStoryCy<typeof Button> = (
args
) => <Button label="Story test" {...args} />;
StoryFunctionWithCyTest.cyTest = (Story) => {
it("should contain 'Story test' label", () => {
cy.mount(<Story />);
cy.dataCy("button").should("contain", "Story test");
});
it("should accept a disabled prop", () => {
cy.mount(<Story disabled />);
cy.dataCy("button").should("be.disabled");
});
/* istanbul ignore next */ // story-code @skip
it.skip("should skip a test", () => {
cy.mount(<Story />);
cy.dataCy("button").should(
"contain",
"This test would fail if not skipped"
);
});
};
// story-code @end
StoryFunctionWithCyTest.parameters = {
docs: {
description: {
story: `
.cyTest offers the most control and is the most verbose.
It allows executing test hooks like beforeEach, calling it.skip,
or passing new arguments to the story at each test, but requires
manually calling cy.mount on the component that comes in as an argument.`,
},
},
};
export const StoryObjectWithCyFunction: ComponentStoryObjCy<typeof Button> = {
args: { label: "Story function" },
cy: () => cy.dataCy("button").should("contain", "Story function"),
// story-code @skip-start
parameters: {
docs: {
description: {
story: `
.cy is the most concise testing syntax and CSF object syntax is the most concise
story format. Together, they can make for some truly small but powerful tests.`,
},
},
},
// story-code @skip-end
};
export const ParametersWithCyTests: ComponentStory<typeof Button> = (args) => (
<Button label="Parameters" {...args} />
);
ParametersWithCyTests.parameters = {
// cyTest, cySkip, cyOnly also available here
cy: () => cy.dataCy("button").should("contain", "Parameters"),
// story-code @skip-start
docs: {
description: {
story: `
Anything defined against the story or the default export can also be put in
'parameters' which may be more canonical but adds a decent amount of characters
to the definitions. NOTE: you can use storybook's own ComponentStory or
ComponentStoryObj for types, but it'll leave parameters completely untyped.`,
},
},
// story-code @skip-end
};
// story-code @end
export const CyFunctionString: ComponentStoryObjCy<typeof Button> = {
cy: '() => cy.dataCy("button").should("contain", "click me")',
};
export const CyObjString: ComponentStoryObjCy<typeof Button> = {
cy: {
"should contain 'Story object' label": `() =>
cy.dataCy("button").should("contain", "click me")`,
"should not be disabled by default": `() =>
cy.dataCy("button").should("not.be.disabled")`,
},
};
export const CyTestString: ComponentStoryObjCy<typeof Button> = {
parameters: {
cyTest: `(Story) => {
it("should contain 'Story test' label", () => {
cy.mount(<Story />);
cy.dataCy("button").should("contain", "click me");
});
it("should accept a disabled prop", () => {
cy.mount(<Story disabled />);
cy.dataCy("button").should("be.disabled");
});
it.skip("should skip a test", () => {
cy.mount(<Story />);
cy.dataCy("button").should(
"contain",
"This test would fail if not skipped"
);
});
}`,
},
};
|