Skip to content

Commit

Permalink
Provide find on shelf & multiselect storybook files with translations
Browse files Browse the repository at this point in the history 
Wrapping the components in withText() does the trick. Our Cypress tests
were failing because the stories didn't have access to translations.
  • Loading branch information
@Adamik10
Adamik10 committed Dec 16, 2023
1 parent ecc8f4b commit 4903c45
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 39 deletions.
22 changes: 14 additions & 8 deletions src/components/find-on-shelf/FindOnShelfModal.dev.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,16 @@ import {
} from "./mocked-data";
import globalTextArgs from "../../core/storybook/globalTextArgs";

const WrappedFindOnShelfModal = withText(
withUrls(withConfig(FindOnShelfModal))
);
const WrappedMaterialButtonsFindOnShelf = withText(
withUrls(withConfig(MaterialButtonsFindOnShelf))
);

export default {
title: "Components / Find On Shelf Modal",
component: FindOnShelfModal,
component: WrappedFindOnShelfModal,
argTypes: {
...serviceUrlArgs,
// Spread material app argTypes so that we get access to system strings.
Expand Down Expand Up @@ -58,9 +65,9 @@ export default {
control: { type: "text" }
}
}
} as ComponentMeta<typeof FindOnShelfModal>;
} as ComponentMeta<typeof WrappedFindOnShelfModal>;

const Template: ComponentStory<typeof FindOnShelfModal> = (
const Template: ComponentStory<typeof WrappedFindOnShelfModal> = (
args: FindOnShelfModalProps
) => {
const [storySelectedPeriodical, setStorySelectedPeriodical] = useState({
Expand All @@ -79,16 +86,15 @@ const Template: ComponentStory<typeof FindOnShelfModal> = (
const {
manifestations: [{ pid }]
} = args;
const FindOnShelfModalWithConfigAndText = withUrls(
withConfig(withText(FindOnShelfModal))
);

return (
<>
<MaterialButtonsFindOnShelf
<WrappedMaterialButtonsFindOnShelf
{...args}
size="small"
faustIds={[convertPostIdToFaustId(pid)]}
/>
<FindOnShelfModalWithConfigAndText {...args} />
<WrappedFindOnShelfModal {...args} />
</>
);
};
Expand Down
10 changes: 5 additions & 5 deletions src/components/multiselect/Multiselect.dev.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,21 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
import Multiselect from "./Multiselect";
import globalTextArgs from "../../core/storybook/globalTextArgs";
import { withText } from "../../core/utils/text";
import { withUrls } from "../../core/utils/url";

const WrappedMultiselect = withText(Multiselect);
const WrappedMultiselect = withText(withUrls(Multiselect));

const options = [
{
item: "First item",
item: "alertErrorMessageText",
value: "1"
},
{
item: "2. item",
item: "availabilityAvailableText",
value: "2"
},
{
item: "III",
item: "availabilityUnavailableText",
value: "3"
}
];
Expand All @@ -34,7 +35,6 @@ export default {
}
},
args: {
...globalTextArgs,
caption: "Title",
options
}
Expand Down
64 changes: 38 additions & 26 deletions src/components/multiselect/Multiselect.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ describe("Multiselect", () => {
cy.get("button:visible").should("contain", "All").click();
cy.get("[role=option]")
.should("contain", "All")
.should("contain", "First item")
.should("contain", "2. item")
.should("contain", "III");
.should("contain", "An error occurred")
.should("contain", "Available")
.should("contain", "Unavailable");
cy.get("[type=checkbox]").should("have.length", 4);
});

Expand All @@ -31,10 +31,10 @@ describe("Multiselect", () => {

it("Allows selection of single value", () => {
cy.get("button:visible").click();
cy.get("[role=option]").contains("First item").click();
cy.get("[role=option]").contains("An error occurred").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(0)
Expand All @@ -47,12 +47,12 @@ describe("Multiselect", () => {
cy.get("[role=option]")
.eq(1)
.click()
.should("contain", "First item")
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(2)
.click()
.should("contain", "2. item")
.should("contain", "Available")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(0)
Expand All @@ -62,44 +62,56 @@ describe("Multiselect", () => {

it("Allows to remove an item", () => {
cy.getBySel("multiselect").should("contain", "All").click();
cy.get("[role=option]").eq(1).should("contain", "First item").click();
cy.get("[role=option]").eq(2).should("contain", "2. item").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.click();
cy.get("[role=option]").eq(2).should("contain", "Available").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(2)
.should("contain", "2. item")
.should("contain", "Available")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(3)
.should("contain", "III")
.should("contain", "Unavailable")
.and("have.attr", "aria-selected", "false");
// Now we click the first item to deselect it..
cy.get("[role=option]").eq(1).should("contain", "First item").click();
// Now we click the An error occurred to deselect it..
cy.get("[role=option]")
.eq(1)
.should("contain", "An error occurred")
.click();
// ..and the only selected one should be the second item.
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "false");
cy.get("[role=option]")
.eq(2)
.should("contain", "2. item")
.should("contain", "Available")
.and("have.attr", "aria-selected", "true");
});

it("Doesn't allow to remove an item if it's the only selected", () => {
cy.getBySel("multiselect").should("contain", "All").click();
cy.get("[role=option]").eq(1).should("contain", "First item").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.click();
cy.get("[role=option]")
.eq(1)
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]").eq(1).should("contain", "First item").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.click();
cy.get("[role=option]")
.eq(1)
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
});

Expand All @@ -114,27 +126,27 @@ describe("Multiselect", () => {

it("Supports single default value preselected", () => {
cy.visit("/iframe.html?args=&id=components-multiselect--single-selected");
cy.contains("First item");
cy.contains("An error occurred");
cy.get("button:visible").click();
cy.get("[role=option]")
.eq(1)
.click()
.should("contain", "First item")
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
});

it("Supports multiple default values preselected", () => {
cy.visit("/iframe.html?args=&id=components-multiselect--multiple-selected");
cy.contains("First item");
cy.contains("2. item");
cy.contains("An error occurred");
cy.contains("Available");
cy.get("button:visible").click();
cy.get("[role=option]")
.eq(1)
.should("contain", "First item")
.should("contain", "An error occurred")
.and("have.attr", "aria-selected", "true");
cy.get("[role=option]")
.eq(2)
.should("contain", "2. item")
.should("contain", "Available")
.and("have.attr", "aria-selected", "true");
});
});
Expand Down

0 comments on commit 4903c45

Please sign in to comment.