Add tests and refactor vue2 tests. Also fix editor docs for vue3.

dialpad · Dec 27, 2024 · 0a07889 · 0a07889
1 parent 1c26c2b
commit 0a07889
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 32 deletions.
diff --git a/packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.test.js b/packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.test.js
@@ -8,6 +8,7 @@ const baseProps = {
   value: 'initial value',
   inputAriaLabel: 'aria-label text',
   inputClass: 'qa-editor',
+  allowInlineImages: true,
 };
 const baseListeners = {
   input: MOCK_INPUT_STUB,
@@ -22,6 +23,11 @@ describe('DtRichTextEditor tests', () => {
   let editor;
   let editorEl;
 
+  const _setValue = async (value) => {
+    editorEl.innerHTML = value;
+    await wrapper.vm.$nextTick();
+  };
+
   const updateWrapper = async () => {
     editorEl?.remove();
     wrapper = mount(DtRichTextEditor, {
@@ -68,19 +74,26 @@ describe('DtRichTextEditor tests', () => {
   describe('Reactivity Tests', () => {
     describe('User Input Tests', () => {
       describe('When user inputs a value', () => {
-        describe('When using text output', () => {
+        // Shared Examples
+        const itBehavesLikeOutputsCorrectly = (value, output, onlyCheckOutputContained = false) => {
           it('should emit the output value', async () => {
-            await wrapper.setProps({ outputFormat: 'text' });
-
-            editorEl = document.getElementsByClassName('qa-editor')[0];
-
-            editorEl.innerHTML = 'new value';
-
-            await wrapper.vm.$nextTick();
-
-            expect(wrapper.emitted().input[0][0]).toBe('new value');
+            await _setValue(value);
+            const emittedOutput = wrapper.emitted().input[0][0];
+            if (onlyCheckOutputContained) {
+              expect(emittedOutput).toContain(output);
+            } else {
+              expect(emittedOutput).toEqual(output);
+            }
             expect(MOCK_INPUT_STUB).toHaveBeenCalled();
           });
+        };
+
+        describe('When using text output', () => {
+          beforeEach(async function () {
+            await wrapper.setProps({ outputFormat: 'text' });
+          });
+
+          itBehavesLikeOutputsCorrectly('new value', 'new value');
         });
 
         describe('When using json output', () => {
@@ -98,31 +111,25 @@ describe('DtRichTextEditor tests', () => {
             }],
           };
 
-          it('should emit the output value', async () => {
+          beforeEach(async function () {
             await wrapper.setProps({ outputFormat: 'json' });
-
-            editorEl = document.getElementsByClassName('qa-editor')[0];
-            editorEl.innerHTML = 'new value';
-
-            await wrapper.vm.$nextTick();
-
-            expect(wrapper.emitted().input[0][0]).toEqual(MOCK_JSON_OUTPUT);
-            expect(MOCK_INPUT_STUB).toHaveBeenCalled();
           });
+
+          itBehavesLikeOutputsCorrectly('new value', MOCK_JSON_OUTPUT);
         });
 
         describe('When using html output', () => {
-          it('should emit the output value', async () => {
+          beforeEach(async function () {
             await wrapper.setProps({ outputFormat: 'html' });
+          });
 
-            editorEl = document.getElementsByClassName('qa-editor')[0];
-            editorEl.innerHTML = 'new value';
+          itBehavesLikeOutputsCorrectly('new value', '<p>new value</p>');
 
-            await wrapper.vm.$nextTick();
+          const htmlWithImgTag = 'image <img src="http://someimgurl.com" height="100px" width="200px" />';
 
-            expect(wrapper.emitted().input[0][0]).toBe('<p>new value</p>');
-            expect(MOCK_INPUT_STUB).toHaveBeenCalled();
-          });
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'height="100px"', true);
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'width="200px"', true);
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'src="http://someimgurl.com"', true);
         });
       });
     });

diff --git a/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.test.js b/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.test.js
@@ -19,6 +19,7 @@ const baseProps = {
   modelValue: 'initial value',
   inputAriaLabel: 'aria-label text',
   inputClass: 'qa-editor',
+  allowInlineImages: true,
 };
 
 // Helpers
@@ -86,10 +87,15 @@ describe('DtRichTextEditor tests', () => {
     describe('User Input Tests', function () {
       describe('When user inputs a value', function () {
         // Shared Examples
-        const itBehavesLikeOutputsCorrectly = (value, output) => {
+        const itBehavesLikeOutputsCorrectly = (value, output, onlyCheckOutputContained = false) => {
           it('should emit the output value', async () => {
             await _setValue(value);
-            expect(wrapper.emitted().input[0][0]).toEqual(output);
+            const emittedOutput = wrapper.emitted().input[0][0];
+            if (onlyCheckOutputContained) {
+              expect(emittedOutput).toContain(output);
+            } else {
+              expect(emittedOutput).toEqual(output);
+            }
             expect(inputStub).toHaveBeenCalled();
           });
         };
@@ -134,6 +140,12 @@ describe('DtRichTextEditor tests', () => {
           });
 
           itBehavesLikeOutputsCorrectly('new value', '<p>new value</p>');
+
+          const htmlWithImgTag = 'image <img src="http://someimgurl.com" height="100px" width="200px" />';
+
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'height="100px"', true);
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'width="200px"', true);
+          itBehavesLikeOutputsCorrectly(htmlWithImgTag, 'src="http://someimgurl.com"', true);
         });
       });
     });

diff --git a/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor_default.story.vue b/packages/dialtone-vue3/components/rich_text_editor/rich_text_editor_default.story.vue
@@ -1,6 +1,6 @@
 <template>
   <dt-rich-text-editor
-    v-model="value"
+    v-model="$attrs.value"
     :editable="$attrs.editable"
     :input-aria-label="$attrs.inputAriaLabel"
     :input-class="$attrs.inputClass"

diff --git a/packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue b/packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue
@@ -2,7 +2,7 @@
   <div>
     <dt-recipe-editor
       ref="editor"
-      v-model="modelValue"
+      v-model="$attrs.value"
       class="d-mb32"
       :input-aria-label="$attrs.inputAriaLabel"
       :auto-focus="$attrs.autoFocus"
@@ -34,7 +34,7 @@
       @quick-replies-click="$attrs.onQuickRepliesClick"
     />
     <p><strong>Editor content is:</strong></p>
-    <span>{{ modelValue }}</span>
+    <span>{{ value }}</span>
   </div>
 </template>
 
@@ -46,7 +46,7 @@ export default {
   components: { DtRecipeEditor },
   data () {
     return {
-      modelValue: this.$attrs.modelValue,
+      value: this.$attrs.value,
     };
   },
 };