1 files changed, 52 insertions, 0 deletions
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
new file mode 100644
index 00000000000..b7753a58747
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
@@ -0,0 +1,52 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
+import DynamicContent from '~/vue_merge_request_widget/components/widget/dynamic_content.vue';
+
+describe('~/vue_merge_request_widget/components/widget/dynamic_content.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData } = {}) => {
+    wrapper = shallowMountExtended(DynamicContent, {
+      propsData: {
+        widgetName: 'MyWidget',
+        ...propsData,
+      },
+      stubs: {
+        DynamicContent,
+      },
+    });
+  };
+
+  it('renders given data', () => {
+    createComponent({
+      propsData: {
+        data: {
+          id: 'row-id',
+          header: ['This is a header', 'This is a subheader'],
+          text: 'Main text for the row',
+          subtext: 'Optional: Smaller sub-text to be displayed below the main text',
+          icon: {
+            name: EXTENSION_ICONS.success,
+          },
+          badge: {
+            text: 'Badge is optional. Text to be displayed inside badge',
+            variant: 'info',
+          },
+          link: {
+            text: 'Optional link to display after text',
+            href: 'https://gitlab.com',
+          },
+          children: [
+            {
+              id: 'row-id-2',
+              header: 'Child row header',
+              text: 'This is recursive. It will be listed in level 3.',
+            },
+          ],
+        },
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});