Add latest changes from gitlab-org/gitlab@master

2 files changed, 119 insertions, 4 deletions

diff --git a/spec/frontend/profile/components/snippets/snippet_row_spec.js b/spec/frontend/profile/components/snippets/snippet_row_spec.js
index 0c0e262bd9a..68f06ace226 100644
--- a/spec/frontend/profile/components/snippets/snippet_row_spec.js
+++ b/spec/frontend/profile/components/snippets/snippet_row_spec.js
@@ -1,3 +1,11 @@
+import { GlAvatar, GlSprintf, GlIcon } from '@gitlab/ui';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import {
+  VISIBILITY_LEVEL_PRIVATE_STRING,
+  VISIBILITY_LEVEL_INTERNAL_STRING,
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+} from '~/visibility_level/constants';
+import { SNIPPET_VISIBILITY } from '~/snippets/constants';
 import SnippetRow from '~/profile/components/snippets/snippet_row.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { MOCK_USER, MOCK_SNIPPET } from 'jest/profile/mock_data';
@@ -16,16 +24,123 @@ describe('UserProfileSnippetRow', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
+  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
+  const findSnippetUrl = () => wrapper.findByTestId('snippet-url');
+  const findSnippetId = () => wrapper.findByTestId('snippet-id');
+  const findSnippetCreatedAt = () => wrapper.findByTestId('snippet-created-at');
+  const findSnippetAuthor = () => wrapper.findByTestId('snippet-author');
+  const findSnippetBlob = () => wrapper.findByTestId('snippet-blob');
+  const findSnippetComments = () => wrapper.findByTestId('snippet-comments');
+  const findSnippetVisibility = () => wrapper.findByTestId('snippet-visibility');
+  const findSnippetUpdatedAt = () => wrapper.findByTestId('snippet-updated-at');
+
   describe('template', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('renders snippet title', () => {
-      expect(wrapper.text()).toBe(MOCK_SNIPPET.title);
+    it('renders GlAvatar with user avatar', () => {
+      expect(findGlAvatar().exists()).toBe(true);
+      expect(findGlAvatar().attributes('src')).toBe(MOCK_USER.avatarUrl);
+    });
+
+    it('renders Snippet Url with snippet webUrl', () => {
+      expect(findSnippetUrl().exists()).toBe(true);
+      expect(findSnippetUrl().attributes('href')).toBe(MOCK_SNIPPET.webUrl);
+    });
+
+    it('renders Snippet ID correctly formatted', () => {
+      expect(findSnippetId().exists()).toBe(true);
+      expect(findSnippetId().text()).toBe(`$${getIdFromGraphQLId(MOCK_SNIPPET.id)}`);
+    });
+
+    it('renders Snippet Created At with correct date string', () => {
+      expect(findSnippetCreatedAt().exists()).toBe(true);
+      expect(findSnippetCreatedAt().attributes('time')).toBe(MOCK_SNIPPET.createdAt.toString());
+    });
+
+    it('renders Snippet Author with profileLink', () => {
+      expect(findSnippetAuthor().exists()).toBe(true);
+      expect(findSnippetAuthor().attributes('href')).toBe(`/${MOCK_USER.username}`);
+    });
+
+    it('renders Snippet Updated At with correct date string', () => {
+      expect(findSnippetUpdatedAt().exists()).toBe(true);
+      expect(findSnippetUpdatedAt().attributes('time')).toBe(MOCK_SNIPPET.updatedAt.toString());
+    });
+  });
+
+  describe.each`
+    nodes                                            | hasOpacity | tooltip
+    ${[]}                                            | ${true}    | ${'0 files'}
+    ${[{ name: 'file.txt' }]}                        | ${false}   | ${'1 file'}
+    ${[{ name: 'file.txt' }, { name: 'file2.txt' }]} | ${false}   | ${'2 files'}
+  `('Blob Icon', ({ nodes, hasOpacity, tooltip }) => {
+    describe(`when blobs length ${nodes.length}`, () => {
+      beforeEach(() => {
+        createComponent({ snippet: { ...MOCK_SNIPPET, blobs: { nodes } } });
+      });
+
+      it(`does${hasOpacity ? '' : ' not'} render icon with opacity`, () => {
+        expect(findSnippetBlob().findComponent(GlIcon).props('name')).toBe('documents');
+        expect(findSnippetBlob().classes('gl-opacity-5')).toBe(hasOpacity);
+      });
+
+      it('renders text and tooltip correctly', () => {
+        expect(findSnippetBlob().text()).toBe(nodes.length.toString());
+        expect(findSnippetBlob().attributes('title')).toBe(tooltip);
+      });
+    });
+  });
+
+  describe.each`
+    nodes                                   | hasOpacity
+    ${[]}                                   | ${true}
+    ${[{ id: 'note/1' }]}                   | ${false}
+    ${[{ id: 'note/1' }, { id: 'note/2' }]} | ${false}
+  `('Comments Icon', ({ nodes, hasOpacity }) => {
+    describe(`when comments length ${nodes.length}`, () => {
+      beforeEach(() => {
+        createComponent({ snippet: { ...MOCK_SNIPPET, notes: { nodes } } });
+      });
+
+      it(`does${hasOpacity ? '' : ' not'} render icon with opacity`, () => {
+        expect(findSnippetComments().findComponent(GlIcon).props('name')).toBe('comments');
+        expect(findSnippetComments().classes('gl-opacity-5')).toBe(hasOpacity);
+      });
+
+      it('renders text correctly', () => {
+        expect(findSnippetComments().text()).toBe(nodes.length.toString());
+      });
+
+      it('renders link to comments correctly', () => {
+        expect(findSnippetComments().attributes('href')).toBe(`${MOCK_SNIPPET.webUrl}#notes`);
+      });
+    });
+  });
+
+  describe.each`
+    visibilityLevel
+    ${VISIBILITY_LEVEL_PUBLIC_STRING}
+    ${VISIBILITY_LEVEL_PRIVATE_STRING}
+    ${VISIBILITY_LEVEL_INTERNAL_STRING}
+  `('Visibility Icon', ({ visibilityLevel }) => {
+    describe(`when visibilityLevel is ${visibilityLevel}`, () => {
+      beforeEach(() => {
+        createComponent({ snippet: { ...MOCK_SNIPPET, visibilityLevel } });
+      });
+
+      it(`renders the ${SNIPPET_VISIBILITY[visibilityLevel].icon} icon`, () => {
+        expect(findSnippetVisibility().findComponent(GlIcon).props('name')).toBe(
+          SNIPPET_VISIBILITY[visibilityLevel].icon,
+        );
+      });
     });
   });
 });
diff --git a/spec/frontend/profile/mock_data.js b/spec/frontend/profile/mock_data.js
index 74387af5be7..856534aebd3 100644
--- a/spec/frontend/profile/mock_data.js
+++ b/spec/frontend/profile/mock_data.js
@@ -45,10 +45,10 @@ const getMockSnippet = (id) => {
         },
       ],
     },
-    commenters: {
+    notes: {
       nodes: [
         {
-          id: 'git://gitlab/User/1',
+          id: 'git://gitlab/Note/1',
         },
       ],
     },