Adds specs for rendering author informationac-releases-api-with-assets-follow-up-fe

2 files changed, 67 insertions, 48 deletions

diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
index db8cea998e9..e4fb78bc5d3 100644
--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -73,7 +73,7 @@ export default {
           }}</span>
         </div>
 
-        <div v-if="hasAuthor" class="d-flex">
+        <div v-if="hasAuthor" class="js-release-author d-flex">
           by
           <user-avatar-link
             class="prepend-left-4"
diff --git a/spec/javascripts/releases/components/release_block_spec.js b/spec/javascripts/releases/components/release_block_spec.js
index 29420216bc4..2266f49bb71 100644
--- a/spec/javascripts/releases/components/release_block_spec.js
+++ b/spec/javascripts/releases/components/release_block_spec.js
@@ -12,8 +12,6 @@ describe('Release block', () => {
     tag_name: '18.04',
     description: '## changelog\n\n* line 1\n* line2',
     description_html: '<div><h2>changelog</h2><ul><li>line1</li<li>line 2</li></ul></div>',
-    author_name: 'Release bot',
-    author_email: 'release-bot@example.com',
     created_at: '2012-05-28T05:00:00-07:00',
     author: {
       avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png',
@@ -76,61 +74,82 @@ describe('Release block', () => {
       ],
     },
   };
-  let vm;
 
-  beforeEach(() => {
-    vm = mountComponent(Component, { release });
-  });
+  let vm;
 
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('renders release name', () => {
-    expect(vm.$el.textContent).toContain(release.name);
-  });
-
-  it('renders commit sha', () => {
-    expect(vm.$el.textContent).toContain(release.commit.short_id);
-  });
-
-  it('renders tag name', () => {
-    expect(vm.$el.textContent).toContain(release.tag_name);
+  describe('renders release information', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { release });
+    });
+
+    it('renders release name', () => {
+      expect(vm.$el.textContent).toContain(release.name);
+    });
+
+    it('renders commit sha', () => {
+      expect(vm.$el.textContent).toContain(release.commit.short_id);
+    });
+
+    it('renders tag name', () => {
+      expect(vm.$el.textContent).toContain(release.tag_name);
+    });
+
+    it('renders release date', () => {
+      expect(vm.$el.textContent).toContain(timeagoMixin.methods.timeFormated(release.created_at));
+    });
+
+    it('renders number of assets provided', () => {
+      expect(vm.$el.querySelector('.js-assets-count').textContent).toContain(release.assets.count);
+    });
+
+    it('renders dropdown with the sources', () => {
+      expect(vm.$el.querySelectorAll('.js-sources-dropdown li').length).toEqual(
+        release.assets.sources.length,
+      );
+
+      expect(vm.$el.querySelector('.js-sources-dropdown li a').getAttribute('href')).toEqual(
+        release.assets.sources[0].url,
+      );
+
+      expect(vm.$el.querySelector('.js-sources-dropdown li a').textContent).toContain(
+        release.assets.sources[0].format,
+      );
+    });
+
+    it('renders list with the links provided', () => {
+      expect(vm.$el.querySelectorAll('.js-assets-list li').length).toEqual(
+        release.assets.links.length,
+      );
+
+      expect(vm.$el.querySelector('.js-assets-list li a').getAttribute('href')).toEqual(
+        release.assets.links[0].url,
+      );
+
+      expect(vm.$el.querySelector('.js-assets-list li a').textContent).toContain(
+        release.assets.links[0].name,
+      );
+    });
+
+    it('renders author information', () => {
+      expect(vm.$el.querySelector('.js-release-author')).not.toBeNull();
+    });
   });
 
-  it('renders release date', () => {
-    expect(vm.$el.textContent).toContain(timeagoMixin.methods.timeFormated(release.created_at));
-  });
-
-  it('renders number of assets provided', () => {
-    expect(vm.$el.querySelector('.js-assets-count').textContent).toContain(release.assets.count);
-  });
-
-  it('renders dropdown with the sources', () => {
-    expect(vm.$el.querySelectorAll('.js-sources-dropdown li').length).toEqual(
-      release.assets.sources.length,
-    );
-
-    expect(vm.$el.querySelector('.js-sources-dropdown li a').getAttribute('href')).toEqual(
-      release.assets.sources[0].url,
-    );
-
-    expect(vm.$el.querySelector('.js-sources-dropdown li a').textContent).toContain(
-      release.assets.sources[0].format,
-    );
-  });
+  describe('without author', () => {
+    const releaseWithoutAuthor = Object.assign({}, release);
 
-  it('renders list with the links provided', () => {
-    expect(vm.$el.querySelectorAll('.js-assets-list li').length).toEqual(
-      release.assets.links.length,
-    );
+    delete releaseWithoutAuthor.author;
 
-    expect(vm.$el.querySelector('.js-assets-list li a').getAttribute('href')).toEqual(
-      release.assets.links[0].url,
-    );
+    beforeEach(() => {
+      vm = mountComponent(Component, { release: releaseWithoutAuthor });
+    });
 
-    expect(vm.$el.querySelector('.js-assets-list li a').textContent).toContain(
-      release.assets.links[0].name,
-    );
+    it('does not render author information', () => {
+      expect(vm.$el.querySelector('.js-release-author')).toBeNull();
+    });
   });
 });