1 files changed, 40 insertions, 0 deletions
diff --git a/spec/frontend/content_editor/components/wrappers/details_spec.js b/spec/frontend/content_editor/components/wrappers/details_spec.js
new file mode 100644
index 00000000000..d746b9fa2f1
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/details_spec.js
@@ -0,0 +1,40 @@
+import { NodeViewContent } from '@tiptap/vue-2';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import DetailsWrapper from '~/content_editor/components/wrappers/details.vue';
+
+describe('content/components/wrappers/details', () => {
+  let wrapper;
+
+  const createWrapper = async () => {
+    wrapper = shallowMountExtended(DetailsWrapper, {
+      propsData: {
+        node: {},
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a node-view-content as a ul element', () => {
+    createWrapper();
+
+    expect(wrapper.findComponent(NodeViewContent).props().as).toBe('ul');
+  });
+
+  it('is "open" by default', () => {
+    createWrapper();
+
+    expect(wrapper.findByTestId('details-toggle-icon').classes()).toContain('is-open');
+    expect(wrapper.findComponent(NodeViewContent).classes()).toContain('is-open');
+  });
+
+  it('closes the details block on clicking the details toggle icon', async () => {
+    createWrapper();
+
+    await wrapper.findByTestId('details-toggle-icon').trigger('click');
+    expect(wrapper.findByTestId('details-toggle-icon').classes()).not.toContain('is-open');
+    expect(wrapper.findComponent(NodeViewContent).classes()).not.toContain('is-open');
+  });
+});