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 | 58x 58x 58x 116x 58x 8x 8x 8x 8x 8x 8x 8x 8x 58x 11x 11x 11x 11x 11x 11x 58x 9x 58x 58x 9x 9x 9x 9x 9x 9x 58x 10x 10x 10x 10x 10x | import type Sinon from "cypress/types/sinon";
import React from "react";
import type { ComponentStoryCy, ComponentStoryObjCy } from "orphic-cypress";
import { ClickCount } from "stories";
// With both of these, you'd probably just be passing in normal functions,
// but here we're spying for the sake of meta-test assertions.
const hasCypress = Boolean((global as any).Cypress);
const dumbFunction = () => 1;
const [onClickSpy, onClickSpy2] = [...Array(2).keys()].map(() =>
hasCypress
? Cypress.sinon.spy(dumbFunction)
: /* istanbul ignore next */ // story-code @skip
dumbFunction
);
export default {
component: ClickCount,
argTypes: {
onClick: { action: "myClickStub" },
},
args: {
// not tested until SpyOnArgsWhichAreProvidedInDefaultExport
onClick2: onClickSpy2,
},
};
export const StubActionsDefinedOnDefaultExport: ComponentStoryObjCy<
typeof ClickCount
> = {
cy: () => {
// just arbitrarily using the nesting data-cy here, no particular need
cy.dataCy("click-container").dataCy("count").should("contain", 0);
// arbitrarily trying the unlikely approach to dataCy
cy.dataCy("click-container").then(($clickContainer) =>
cy.dataCy($clickContainer, "count").should("contain", 0)
);
cy.dataCy("button").click();
// name on actions is `onClick`
cy.get("@actions").its("onClick").should("be.calledOnceWith", 0);
// but the action string also functions as an alias
cy.get("@myClickStub").should("be.calledOnceWith", 0);
// and if it would have come from argtypes regex as well, then
cy.get("@argTypesRegex.onClick").should("be.calledOnceWith", 0);
cy.dataCy("count").should("contain", 1);
},
};
// story-code @include-start
export const SpyOnArgsWhichAreAlreadyProvided: ComponentStoryObjCy<
typeof ClickCount
> = {
args: {
onClick: onClickSpy,
},
cy: () => {
(onClickSpy as Sinon.SinonSpy).resetHistory();
cy.dataCy("button")
.click()
// So the spy itself is already called (you'd probably just provide a normal function)
.then(() => expect(onClickSpy).to.be.calledOnceWith(0));
// And then the important thing: actions object wraps that provided function in a spy
cy.get("@actions").its("onClick").should("be.calledOnceWith", 0);
// still aliased as the argtype name as well and not from regex
cy.get("@myClickStub").should("be.calledOnceWith", 0);
cy.get("@argTypesRegex.onClick").should("be.calledOnceWith", 0);
},
};
export const SpyOnProvided: ComponentStoryCy<typeof ClickCount> = (args) => (
<ClickCount {...args} />
);
SpyOnProvided.args = {
onClick: onClickSpy,
};
SpyOnProvided.cy = () => {
(onClickSpy as Sinon.SinonSpy).resetHistory();
cy.dataCy("button")
.click()
.then(() => expect(onClickSpy).to.be.calledOnceWith(0));
cy.get("@actions").its("onClick").should("be.calledOnceWith", 0);
cy.get("@myClickStub").should("be.calledOnceWith", 0);
cy.get("@argTypesRegex.onClick").should("be.calledOnceWith", 0);
};
// story-code @end SpyOnProvided
export const SpyOnArgsWhichAreProvidedInDefaultExport: ComponentStoryObjCy<
typeof ClickCount
> = {
cy: () => {
(onClickSpy2 as Sinon.SinonSpy).resetHistory();
cy.dataCy("button-2")
.click()
.then(() => expect(onClickSpy2).to.be.calledOnceWith(0));
cy.get("@actions").its("onClick2").should("be.calledOnceWith", 0);
// No argTypes provided for onClick2, so this goes to the argTypesRegex generated stub
cy.get("@argTypesRegex.onClick2").should("be.calledOnceWith", 0);
},
};
|