Send resize parameters for avatars

4 files changed, 104 insertions, 108 deletions

diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index 7a32e84bced..b6c61e7bad7 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -69,109 +69,100 @@ describe('Issue card component', () => {
   });
 
   it('renders issue title', () => {
-    expect(
-      component.$el.querySelector('.board-card-title').textContent,
-    ).toContain(issue.title);
+    expect(component.$el.querySelector('.board-card-title').textContent).toContain(issue.title);
   });
 
   it('includes issue base in link', () => {
-    expect(
-      component.$el.querySelector('.board-card-title a').getAttribute('href'),
-    ).toContain('/test');
+    expect(component.$el.querySelector('.board-card-title a').getAttribute('href')).toContain(
+      '/test',
+    );
   });
 
   it('includes issue title on link', () => {
-    expect(
-      component.$el.querySelector('.board-card-title a').getAttribute('title'),
-    ).toBe(issue.title);
+    expect(component.$el.querySelector('.board-card-title a').getAttribute('title')).toBe(
+      issue.title,
+    );
   });
 
   it('does not render confidential icon', () => {
-    expect(
-      component.$el.querySelector('.fa-eye-flash'),
-    ).toBeNull();
+    expect(component.$el.querySelector('.fa-eye-flash')).toBeNull();
   });
 
-  it('renders confidential icon', (done) => {
+  it('renders confidential icon', done => {
     component.issue.confidential = true;
 
     Vue.nextTick(() => {
-      expect(
-        component.$el.querySelector('.confidential-icon'),
-      ).not.toBeNull();
+      expect(component.$el.querySelector('.confidential-icon')).not.toBeNull();
       done();
     });
   });
 
   it('renders issue ID with #', () => {
-    expect(
-      component.$el.querySelector('.board-card-number').textContent,
-    ).toContain(`#${issue.id}`);
+    expect(component.$el.querySelector('.board-card-number').textContent).toContain(`#${issue.id}`);
   });
 
   describe('assignee', () => {
     it('does not render assignee', () => {
-      expect(
-        component.$el.querySelector('.board-card-assignee .avatar'),
-      ).toBeNull();
+      expect(component.$el.querySelector('.board-card-assignee .avatar')).toBeNull();
     });
 
     describe('exists', () => {
-      beforeEach((done) => {
+      beforeEach(done => {
         component.issue.assignees = [user];
 
         Vue.nextTick(() => done());
       });
 
       it('renders assignee', () => {
-        expect(
-          component.$el.querySelector('.board-card-assignee .avatar'),
-        ).not.toBeNull();
+        expect(component.$el.querySelector('.board-card-assignee .avatar')).not.toBeNull();
       });
 
       it('sets title', () => {
         expect(
-          component.$el.querySelector('.board-card-assignee img').getAttribute('data-original-title'),
+          component.$el
+            .querySelector('.board-card-assignee img')
+            .getAttribute('data-original-title'),
         ).toContain(`Assigned to ${user.name}`);
       });
 
       it('sets users path', () => {
-        expect(
-          component.$el.querySelector('.board-card-assignee a').getAttribute('href'),
-        ).toBe('/test');
+        expect(component.$el.querySelector('.board-card-assignee a').getAttribute('href')).toBe(
+          '/test',
+        );
       });
 
       it('renders avatar', () => {
-        expect(
-          component.$el.querySelector('.board-card-assignee img'),
-        ).not.toBeNull();
+        expect(component.$el.querySelector('.board-card-assignee img')).not.toBeNull();
       });
     });
 
     describe('assignee default avatar', () => {
-      beforeEach((done) => {
-        component.issue.assignees = [new ListAssignee({
-          id: 1,
-          name: 'testing 123',
-          username: 'test',
-        }, 'default_avatar')];
+      beforeEach(done => {
+        component.issue.assignees = [
+          new ListAssignee(
+            {
+              id: 1,
+              name: 'testing 123',
+              username: 'test',
+            },
+            'default_avatar',
+          ),
+        ];
 
         Vue.nextTick(done);
       });
 
       it('displays defaults avatar if users avatar is null', () => {
-        expect(
-          component.$el.querySelector('.board-card-assignee img'),
-        ).not.toBeNull();
-        expect(
-          component.$el.querySelector('.board-card-assignee img').getAttribute('src'),
-        ).toBe('default_avatar');
+        expect(component.$el.querySelector('.board-card-assignee img')).not.toBeNull();
+        expect(component.$el.querySelector('.board-card-assignee img').getAttribute('src')).toBe(
+          'default_avatar?width=20',
+        );
       });
     });
   });
 
   describe('multiple assignees', () => {
-    beforeEach((done) => {
+    beforeEach(done => {
       component.issue.assignees = [
         user,
         new ListAssignee({
@@ -191,7 +182,8 @@ describe('Issue card component', () => {
           name: 'user4',
           username: 'user4',
           avatar: 'test_image',
-        })];
+        }),
+      ];
 
       Vue.nextTick(() => done());
     });
@@ -201,26 +193,30 @@ describe('Issue card component', () => {
     });
 
     describe('more than four assignees', () => {
-      beforeEach((done) => {
-        component.issue.assignees.push(new ListAssignee({
-          id: 5,
-          name: 'user5',
-          username: 'user5',
-          avatar: 'test_image',
-        }));
+      beforeEach(done => {
+        component.issue.assignees.push(
+          new ListAssignee({
+            id: 5,
+            name: 'user5',
+            username: 'user5',
+            avatar: 'test_image',
+          }),
+        );
 
         Vue.nextTick(() => done());
       });
 
       it('renders more avatar counter', () => {
-        expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('+2');
+        expect(
+          component.$el.querySelector('.board-card-assignee .avatar-counter').innerText,
+        ).toEqual('+2');
       });
 
       it('renders three assignees', () => {
         expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(3);
       });
 
-      it('renders 99+ avatar counter', (done) => {
+      it('renders 99+ avatar counter', done => {
         for (let i = 5; i < 104; i += 1) {
           const u = new ListAssignee({
             id: i,
@@ -232,7 +228,9 @@ describe('Issue card component', () => {
         }
 
         Vue.nextTick(() => {
-          expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('99+');
+          expect(
+            component.$el.querySelector('.board-card-assignee .avatar-counter').innerText,
+          ).toEqual('99+');
           done();
         });
       });
@@ -240,59 +238,51 @@ describe('Issue card component', () => {
   });
 
   describe('labels', () => {
-    beforeEach((done) => {
+    beforeEach(done => {
       component.issue.addLabel(label1);
 
       Vue.nextTick(() => done());
     });
 
     it('renders list label', () => {
-      expect(
-        component.$el.querySelectorAll('.badge').length,
-      ).toBe(2);
+      expect(component.$el.querySelectorAll('.badge').length).toBe(2);
     });
 
     it('renders label', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.badge').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach(label => {
         nodes.push(label.getAttribute('data-original-title'));
       });
 
-      expect(
-        nodes.includes(label1.description),
-      ).toBe(true);
+      expect(nodes.includes(label1.description)).toBe(true);
     });
 
     it('sets label description as title', () => {
-      expect(
-        component.$el.querySelector('.badge').getAttribute('data-original-title'),
-      ).toContain(label1.description);
+      expect(component.$el.querySelector('.badge').getAttribute('data-original-title')).toContain(
+        label1.description,
+      );
     });
 
     it('sets background color of button', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.badge').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach(label => {
         nodes.push(label.style.backgroundColor);
       });
 
-      expect(
-        nodes.includes(label1.color),
-      ).toBe(true);
+      expect(nodes.includes(label1.color)).toBe(true);
     });
 
-    it('does not render label if label does not have an ID', (done) => {
-      component.issue.addLabel(new ListLabel({
-        title: 'closed',
-      }));
+    it('does not render label if label does not have an ID', done => {
+      component.issue.addLabel(
+        new ListLabel({
+          title: 'closed',
+        }),
+      );
 
       Vue.nextTick()
         .then(() => {
-          expect(
-            component.$el.querySelectorAll('.badge').length,
-          ).toBe(2);
-          expect(
-            component.$el.textContent,
-          ).not.toContain('closed');
+          expect(component.$el.querySelectorAll('.badge').length).toBe(2);
+          expect(component.$el.textContent).not.toContain('closed');
 
           done();
         })
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 4a4f2259d23..ddd580ae8b7 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -35,7 +35,9 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.js-pipeline-url-link').getAttribute('href')).toEqual('foo');
+    expect(component.$el.querySelector('.js-pipeline-url-link').getAttribute('href')).toEqual(
+      'foo',
+    );
     expect(component.$el.querySelector('.js-pipeline-url-link span').textContent).toEqual('#1');
   });
 
@@ -61,11 +63,11 @@ describe('Pipeline Url Component', () => {
 
     const image = component.$el.querySelector('.js-pipeline-url-user img');
 
-    expect(
-      component.$el.querySelector('.js-pipeline-url-user').getAttribute('href'),
-    ).toEqual(mockData.pipeline.user.web_url);
+    expect(component.$el.querySelector('.js-pipeline-url-user').getAttribute('href')).toEqual(
+      mockData.pipeline.user.web_url,
+    );
     expect(image.getAttribute('data-original-title')).toEqual(mockData.pipeline.user.name);
-    expect(image.getAttribute('src')).toEqual(mockData.pipeline.user.avatar_url);
+    expect(image.getAttribute('src')).toEqual(`${mockData.pipeline.user.avatar_url}?width=20`);
   });
 
   it('should render "API" when no user is provided', () => {
@@ -100,7 +102,9 @@ describe('Pipeline Url Component', () => {
     }).$mount();
 
     expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
-    expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
+    expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain(
+      'yaml invalid',
+    );
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });
 
@@ -121,9 +125,9 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(
-      component.$el.querySelector('.js-pipeline-url-autodevops').textContent.trim(),
-    ).toEqual('Auto DevOps');
+    expect(component.$el.querySelector('.js-pipeline-url-autodevops').textContent.trim()).toEqual(
+      'Auto DevOps',
+    );
   });
 
   it('should render error badge when pipeline has a failure reason set', () => {
@@ -142,6 +146,8 @@ describe('Pipeline Url Component', () => {
     }).$mount();
 
     expect(component.$el.querySelector('.js-pipeline-url-failure').textContent).toContain('error');
-    expect(component.$el.querySelector('.js-pipeline-url-failure').getAttribute('data-original-title')).toContain('some reason');
+    expect(
+      component.$el.querySelector('.js-pipeline-url-failure').getAttribute('data-original-title'),
+    ).toContain('some reason');
   });
 });
diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
index 7e57c51bf29..db665fdaad3 100644
--- a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
+++ b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
@@ -27,7 +27,7 @@ describe('issue placeholder system note component', () => {
         userDataMock.path,
       );
       expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(
-        userDataMock.avatar_url,
+        `${userDataMock.avatar_url}?width=40`,
       );
     });
   });
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
index 656b57d764e..dc7652c77f7 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -12,7 +12,7 @@ const DEFAULT_PROPS = {
   tooltipPlacement: 'bottom',
 };
 
-describe('User Avatar Image Component', function () {
+describe('User Avatar Image Component', function() {
   let vm;
   let UserAvatarImage;
 
@@ -20,37 +20,37 @@ describe('User Avatar Image Component', function () {
     UserAvatarImage = Vue.extend(userAvatarImage);
   });
 
-  describe('Initialization', function () {
-    beforeEach(function () {
+  describe('Initialization', function() {
+    beforeEach(function() {
       vm = mountComponent(UserAvatarImage, {
         ...DEFAULT_PROPS,
       }).$mount();
     });
 
-    it('should return a defined Vue component', function () {
+    it('should return a defined Vue component', function() {
       expect(vm).toBeDefined();
     });
 
-    it('should have <img> as a child element', function () {
+    it('should have <img> as a child element', function() {
       expect(vm.$el.tagName).toBe('IMG');
-      expect(vm.$el.getAttribute('src')).toBe(DEFAULT_PROPS.imgSrc);
-      expect(vm.$el.getAttribute('data-src')).toBe(DEFAULT_PROPS.imgSrc);
+      expect(vm.$el.getAttribute('src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
+      expect(vm.$el.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
       expect(vm.$el.getAttribute('alt')).toBe(DEFAULT_PROPS.imgAlt);
     });
 
-    it('should properly compute tooltipContainer', function () {
+    it('should properly compute tooltipContainer', function() {
       expect(vm.tooltipContainer).toBe('body');
     });
 
-    it('should properly render tooltipContainer', function () {
+    it('should properly render tooltipContainer', function() {
       expect(vm.$el.getAttribute('data-container')).toBe('body');
     });
 
-    it('should properly compute avatarSizeClass', function () {
+    it('should properly compute avatarSizeClass', function() {
       expect(vm.avatarSizeClass).toBe('s99');
     });
 
-    it('should properly render img css', function () {
+    it('should properly render img css', function() {
       const { classList } = vm.$el;
       const containsAvatar = classList.contains('avatar');
       const containsSizeClass = classList.contains('s99');
@@ -64,21 +64,21 @@ describe('User Avatar Image Component', function () {
     });
   });
 
-  describe('Initialization when lazy', function () {
-    beforeEach(function () {
+  describe('Initialization when lazy', function() {
+    beforeEach(function() {
       vm = mountComponent(UserAvatarImage, {
         ...DEFAULT_PROPS,
         lazy: true,
       }).$mount();
     });
 
-    it('should add lazy attributes', function () {
+    it('should add lazy attributes', function() {
       const { classList } = vm.$el;
       const lazyClass = classList.contains('lazy');
 
       expect(lazyClass).toBe(true);
       expect(vm.$el.getAttribute('src')).toBe(placeholderImage);
-      expect(vm.$el.getAttribute('data-src')).toBe(DEFAULT_PROPS.imgSrc);
+      expect(vm.$el.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
     });
   });
 });