From 4af65173038c5b5f03cc60b186835f59f82d06aa Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Wed, 10 Apr 2024 10:54:09 -0700 Subject: [PATCH 1/2] docs(snackbar): updated docs to support @action --- src/components/ebay-snackbar-dialog/README.md | 2 +- .../examples/action.marko | 21 ++++----- .../examples/default.marko | 2 +- .../snackbar-dialog.stories.ts | 43 +++++++++++------- .../renders-basic-version.expected.txt | 29 ++++++++++++ .../renders-in-open-state.expected.txt | 28 ++++++++++++ .../renders-with-action-version.expected.txt | 45 +++++++++++++++++++ .../renders-without-handle.expected.txt | 29 ++++++++++++ .../ebay-snackbar-dialog/test/mock/index.js | 24 ---------- .../ebay-snackbar-dialog/test/test.browser.js | 31 +++++++------ .../ebay-snackbar-dialog/test/test.server.js | 43 +++++++----------- 11 files changed, 205 insertions(+), 92 deletions(-) create mode 100644 src/components/ebay-snackbar-dialog/test/__snapshots__/renders-basic-version.expected.txt create mode 100644 src/components/ebay-snackbar-dialog/test/__snapshots__/renders-in-open-state.expected.txt create mode 100644 src/components/ebay-snackbar-dialog/test/__snapshots__/renders-with-action-version.expected.txt create mode 100644 src/components/ebay-snackbar-dialog/test/__snapshots__/renders-without-handle.expected.txt delete mode 100644 src/components/ebay-snackbar-dialog/test/mock/index.js diff --git a/src/components/ebay-snackbar-dialog/README.md b/src/components/ebay-snackbar-dialog/README.md index 20492726e..1c3265fb7 100644 --- a/src/components/ebay-snackbar-dialog/README.md +++ b/src/components/ebay-snackbar-dialog/README.md @@ -3,7 +3,7 @@ ebay-snackbar-dialog - DS v1.0.0 + DS v2.0.0 diff --git a/src/components/ebay-snackbar-dialog/examples/action.marko b/src/components/ebay-snackbar-dialog/examples/action.marko index f4781cdf7..f100de2e2 100644 --- a/src/components/ebay-snackbar-dialog/examples/action.marko +++ b/src/components/ebay-snackbar-dialog/examples/action.marko @@ -1,10 +1,10 @@ class { declare state: { open: boolean; - } + }; onCreate() { - this.state = {open: false}; + this.state = { open: false }; } handleOpen() { @@ -13,20 +13,21 @@ class { handleClose() { this.state.open = false; - } - - handleAction() { - //do API call, other action here - alert("action") + this.emit("close"); } } - Open Action Snackbar - + <@action accessKey="U"> Undo - This is the action snackbar + This 'snackbar' text should be 1-2 lines. diff --git a/src/components/ebay-snackbar-dialog/examples/default.marko b/src/components/ebay-snackbar-dialog/examples/default.marko index ac9433cd3..53e1e5aee 100644 --- a/src/components/ebay-snackbar-dialog/examples/default.marko +++ b/src/components/ebay-snackbar-dialog/examples/default.marko @@ -24,5 +24,5 @@ class { Open Default Snackbar - ${input.snacktext} + This 'snackbar' text should be 1-2 lines. diff --git a/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts b/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts index 14d166d3b..e47f0d70e 100644 --- a/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts +++ b/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts @@ -1,6 +1,14 @@ import Readme from "./README.md"; -import Component from "./examples/default.marko"; -import code from "./examples/default.marko?raw"; +import component from "./index.marko"; +import { + addRenderBodies, + buildExtensionTemplate, +} from "../../../.storybook/utils"; + +import defaultTemplate from "./examples/default.marko"; +import defaultTemplateCode from "./examples/default.marko?raw"; +import withActionTemplate from "./examples/action.marko"; +import withActionTemplateCode from "./examples/action.marko?raw"; const Template = (args) => ({ input: { @@ -15,7 +23,7 @@ const Template = (args) => ({ export default { title: "dialogs/ebay-snackbar-dialog", - component: Component, + component, parameters: { docs: { description: { @@ -37,9 +45,12 @@ export default { control: { type: "radio" }, options: ["row", "column"], }, - snacktext: { - control: { type: "text" }, - description: "for demo only", + action: { + name: "@action", + description: "If present, shows an action button on snackbar", + table: { + category: "@attribute tags", + }, }, onOpen: { action: "on-open", @@ -74,14 +85,12 @@ export default { }, }; -export const Standard = Template.bind({}); -Standard.args = { - snacktext: "This is the snackbar", -}; -Standard.parameters = { - docs: { - source: { - code, - }, - }, -}; +export const Default = buildExtensionTemplate( + defaultTemplate, + defaultTemplateCode, +); + +export const WithAction = buildExtensionTemplate( + withActionTemplate, + withActionTemplateCode, +); diff --git a/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-basic-version.expected.txt b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-basic-version.expected.txt new file mode 100644 index 000000000..7b6c882a8 --- /dev/null +++ b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-basic-version.expected.txt @@ -0,0 +1,29 @@ + +  + Open Default Snackbar +  +  +  +  +  + This 'snackbar' text should be 1-2 lines. +  +  +  + \ No newline at end of file diff --git a/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-in-open-state.expected.txt b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-in-open-state.expected.txt new file mode 100644 index 000000000..940e3af7d --- /dev/null +++ b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-in-open-state.expected.txt @@ -0,0 +1,28 @@ + +  + Open Default Snackbar +  +  +  +  +  + This 'snackbar' text should be 1-2 lines. +  +  +  + \ No newline at end of file diff --git a/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-with-action-version.expected.txt b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-with-action-version.expected.txt new file mode 100644 index 000000000..386c451dc --- /dev/null +++ b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-with-action-version.expected.txt @@ -0,0 +1,45 @@ + +  + Open Action Snackbar +  +  +  +  +  + This 'snackbar' text should be 1-2 lines. +  +  +  + Undo +  + - Access Key: U +  +  +  +  +  + \ No newline at end of file diff --git a/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-without-handle.expected.txt b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-without-handle.expected.txt new file mode 100644 index 000000000..b5ef6be32 --- /dev/null +++ b/src/components/ebay-snackbar-dialog/test/__snapshots__/renders-without-handle.expected.txt @@ -0,0 +1,29 @@ + +  + Open Default Snackbar +  +  +  +  +  + This 'snackbar' text should be 1-2 lines. +  +  +  + \ No newline at end of file diff --git a/src/components/ebay-snackbar-dialog/test/mock/index.js b/src/components/ebay-snackbar-dialog/test/mock/index.js deleted file mode 100644 index cd9f2d04a..000000000 --- a/src/components/ebay-snackbar-dialog/test/mock/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint camelcase: "off" */ -import { createRenderBody } from "../../../../common/test-utils/shared"; - -export const Snackbar = { - a11yCloseText: "close", - header: { - renderBody: createRenderBody("head content"), - }, - footer: { - renderBody: createRenderBody("footer content"), - }, - action: { - renderBody: createRenderBody("action content"), - }, - renderBody: createRenderBody("body content"), -}; - -export const Snackbar_Open = Object.assign({}, Snackbar, { - open: true, -}); - -export const Snackbar_Closed = Object.assign({}, Snackbar, { - open: false, -}); diff --git a/src/components/ebay-snackbar-dialog/test/test.browser.js b/src/components/ebay-snackbar-dialog/test/test.browser.js index 80be60d91..4dc6501cc 100644 --- a/src/components/ebay-snackbar-dialog/test/test.browser.js +++ b/src/components/ebay-snackbar-dialog/test/test.browser.js @@ -1,9 +1,11 @@ import { expect, use } from "chai"; +import { composeStories } from "@storybook/marko"; import chaiDom from "chai-dom"; +import sinon from "sinon/pkg/sinon"; import { render, fireEvent, cleanup, waitFor } from "@marko/testing-library"; import { fastAnimations } from "../../../common/test-utils/browser"; -import template from ".."; -import * as mock from "./mock"; +import * as stories from "../snackbar-dialog.stories"; // import all stories from the stories file +const { Default, WithAction } = composeStories(stories); use(chaiDom); before(() => { @@ -19,12 +21,16 @@ afterEach(() => { /** @type import("@marko/testing-library").RenderResult */ let component; +let clock; describe("given an open snackbar", () => { - const input = mock.Snackbar_Open; - beforeEach(async () => { - component = await render(template, input); + component = await render(WithAction, { open: true }); + clock = sinon.useFakeTimers(); + }); + + afterEach(() => { + clock.restore(); }); it("then it is not hidden in the DOM", () => { @@ -33,7 +39,7 @@ describe("given an open snackbar", () => { describe("clicking on action icon emits action", () => { it("action emitted", async () => { - await fireEvent.click(component.getByText(/action/i)); + await fireEvent.click(component.getByText(/Undo/i)); expect(component.emitted("action")).has.length(1); }); }); @@ -41,22 +47,21 @@ describe("given an open snackbar", () => { describe("focus and mouseenter prevent closing it until all events", () => { it("is not closed", async () => { await fireEvent.mouseEnter( - component.getByText(/action/i).parentElement, + component.getByText(/Undo/i).parentElement, ); - await fireEvent.focus(component.getByText(/action/i).parentElement); - await fireEvent.blur(component.getByText(/action/i).parentElement); + await fireEvent.focus(component.getByText(/Undo/i).parentElement); + await fireEvent.blur(component.getByText(/Undo/i).parentElement); + clock.tick(7000); await waitFor(() => { expect(component.emitted("close")).has.length(0); - }, 7000); + }); }); }); }); describe("given a closed snackbar", () => { - const input = mock.Snackbar_Closed; - beforeEach(async () => { - component = await render(template, input); + component = await render(Default); }); it("then it is hidden in the DOM", () => { diff --git a/src/components/ebay-snackbar-dialog/test/test.server.js b/src/components/ebay-snackbar-dialog/test/test.server.js index c2b5904ea..b34c2dca6 100644 --- a/src/components/ebay-snackbar-dialog/test/test.server.js +++ b/src/components/ebay-snackbar-dialog/test/test.server.js @@ -1,35 +1,26 @@ -import { expect, use } from "chai"; -import { render } from "@marko/testing-library"; -import template from ".."; -import * as mock from "./mock"; - -use(require("chai-dom")); +import { composeStories } from "@storybook/marko"; +import { testPassThroughAttributes } from "../../../common/test-utils/server"; +import { snapshotHTML } from "../../../common/test-utils/snapshots"; +import * as stories from "../snackbar-dialog.stories"; // import all stories from the stories file +const { Default, WithAction } = composeStories(stories); +const htmlSnap = snapshotHTML(__dirname); describe("snackbar-dialog", () => { it("renders basic version", async () => { - const input = mock.Snackbar; - const { getByRole, getByText } = await render(template, input); - const dialog = getByRole("dialog", { hidden: true }); + await htmlSnap(Default); + }); - expect(dialog).has.attr("hidden"); - expect(dialog).has.class("snackbar-dialog"); - expect(dialog).has.class("snackbar-dialog--transition"); - expect(getByText(input.renderBody.text)).has.class( - "snackbar-dialog__main", - ); - expect(getByText(input.header.renderBody.text).parentElement).has.class( - "snackbar-dialog__header", - ); - expect(getByText(input.action.renderBody.text).parentElement).has.class( - "snackbar-dialog__actions", - ); - expect(getByRole("button", { hidden: "true" })).has.class("fake-link"); - expect(dialog.childNodes[0]).has.class("snackbar-dialog__window"); + it("renders without handle ", async () => { + await htmlSnap(Default, { layout: "column" }); }); it("renders in open state", async () => { - const input = mock.Snackbar_Open; - const { getByRole } = await render(template, input); - expect(getByRole("dialog")).does.not.have.attr("hidden"); + await htmlSnap(Default, { open: true }); }); + + it("renders with action version", async () => { + await htmlSnap(WithAction); + }); + + testPassThroughAttributes(Default); }); From 9955d95a0a622016b81863b17ab67dc043360217 Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Mon, 15 Apr 2024 09:26:36 -0700 Subject: [PATCH 2/2] Create breezy-trees-cough.md --- .changeset/breezy-trees-cough.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-trees-cough.md diff --git a/.changeset/breezy-trees-cough.md b/.changeset/breezy-trees-cough.md new file mode 100644 index 000000000..ba058f0ee --- /dev/null +++ b/.changeset/breezy-trees-cough.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": patch +--- + +docs(snackbar): updated docs to support @action