From de8a799a1715215c34787e45fb9912bf1ab90e4d Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 18 Sep 2024 14:43:02 +0200
Subject: [PATCH] fix: add test for the ability to change the placeholder

---
 src/TextEditor/TextEditor.stories.tsx        |  1 -
 src/TextEditor/TextEditorWrapper.stories.tsx | 55 ++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/TextEditor/TextEditorWrapper.stories.tsx

diff --git a/src/TextEditor/TextEditor.stories.tsx b/src/TextEditor/TextEditor.stories.tsx
index 10600a0c0..7131311da 100644
--- a/src/TextEditor/TextEditor.stories.tsx
+++ b/src/TextEditor/TextEditor.stories.tsx
@@ -18,7 +18,6 @@ const meta = {
   args: {
     onChange: fn(),
   },
-  render: (args) => <TextEditor {...args} />,
 } satisfies Meta<typeof TextEditor>;
 export default meta;
 type Story = StoryObj<typeof meta>;
diff --git a/src/TextEditor/TextEditorWrapper.stories.tsx b/src/TextEditor/TextEditorWrapper.stories.tsx
new file mode 100644
index 000000000..52ba60139
--- /dev/null
+++ b/src/TextEditor/TextEditorWrapper.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import { useState } from 'react';
+
+import TextEditor, { TextEditorProps } from './TextEditor.js';
+
+const BUTTON_ID = 'button-id';
+const NEW_PLACEHOLDER_TEXT = 'new placeholder text';
+const TextEditorWrapper = (args: TextEditorProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState(args.placeholderText);
+  return (
+    <>
+      <button
+        data-testid={BUTTON_ID}
+        onClick={() => setPlaceholder(NEW_PLACEHOLDER_TEXT)}
+      >
+        change text
+      </button>
+      <TextEditor {...args} placeholderText={placeholder} />
+    </>
+  );
+};
+
+const meta = {
+  title: 'Text/TextEditorWrapper',
+  component: TextEditorWrapper,
+  args: {
+    onChange: fn(),
+    id: 'editor-id',
+  },
+} satisfies Meta<typeof TextEditor>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Placeholder = {
+  args: {
+    placeholderText: 'Initial placeholder',
+    value: '',
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvasElement
+        .querySelector(`[id=${args.id}] .ql-editor`)
+        ?.getAttribute('data-placeholder'),
+    ).toEqual(args.placeholderText);
+    await userEvent.click(canvas.getByTestId(BUTTON_ID));
+    await expect(
+      canvasElement
+        .querySelector(`[id=${args.id}] .ql-editor`)
+        ?.getAttribute('data-placeholder'),
+    ).toEqual(NEW_PLACEHOLDER_TEXT);
+  },
+} satisfies Story;