2 files changed, 53 insertions, 0 deletions
diff --git a/spec/frontend/organizations/show/components/app_spec.js b/spec/frontend/organizations/show/components/app_spec.js
index 46496e40bdd..6cf8845bdbe 100644
--- a/spec/frontend/organizations/show/components/app_spec.js
+++ b/spec/frontend/organizations/show/components/app_spec.js
@@ -1,6 +1,7 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/organizations/show/components/app.vue';
 import OrganizationAvatar from '~/organizations/show/components/organization_avatar.vue';
+import OrganizationDescription from '~/organizations/show/components/organization_description.vue';
 import GroupsAndProjects from '~/organizations/show/components/groups_and_projects.vue';
 import AssociationCount from '~/organizations/show/components/association_counts.vue';
 
@@ -34,6 +35,12 @@ describe('OrganizationShowApp', () => {
     );
   });
 
+  it('renders organization description and passes organization prop', () => {
+    expect(wrapper.findComponent(OrganizationDescription).props('organization')).toEqual(
+      defaultPropsData.organization,
+    );
+  });
+
   it('renders groups and projects component and passes `groupsAndProjectsOrganizationPath` prop', () => {
     expect(
       wrapper.findComponent(GroupsAndProjects).props('groupsAndProjectsOrganizationPath'),
diff --git a/spec/frontend/organizations/show/components/organization_description_spec.js b/spec/frontend/organizations/show/components/organization_description_spec.js
new file mode 100644
index 00000000000..2aaf6f24a72
--- /dev/null
+++ b/spec/frontend/organizations/show/components/organization_description_spec.js
@@ -0,0 +1,46 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import OrganizationDescription from '~/organizations/show/components/organization_description.vue';
+
+describe('OrganizationDescription', () => {
+  let wrapper;
+
+  const defaultPropsData = {
+    organization: {
+      id: 1,
+      name: 'GitLab',
+      description_html: '<h1>Foo bar description</h1><script>alert("foo")</script>',
+    },
+  };
+
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = mountExtended(OrganizationDescription, {
+      propsData: { ...defaultPropsData, ...propsData },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('when organization has description', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders description as safe HTML', () => {
+      expect(wrapper.element.innerHTML).toBe('<h1>Foo bar description</h1>');
+    });
+  });
+
+  describe('when organization does not have description', () => {
+    beforeEach(() => {
+      createComponent({
+        propsData: { organization: { ...defaultPropsData.organization, description_html: '' } },
+      });
+    });
+
+    it('renders nothing', () => {
+      expect(wrapper.html()).toBe('');
+    });
+  });
+});