From 9238aaeb51cda5ab53951ca791553570e40dbafb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Wed, 16 Sep 2020 12:11:08 +0200 Subject: [PATCH 1/7] Update title_area to accept infoMessages - source - tests --- .../components/registry/title_area.vue | 74 +++++++++++++------ .../components/registry/title_area_spec.js | 33 ++++++++- 2 files changed, 83 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue index cc33b8f85cd19d..57eeae3702c2f4 100644 --- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue +++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue @@ -1,10 +1,12 @@ diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js index 6740d6097a468e..a513f178f45990 100644 --- a/spec/frontend/vue_shared/components/registry/title_area_spec.js +++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js @@ -1,4 +1,4 @@ -import { GlAvatar } from '@gitlab/ui'; +import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import component from '~/vue_shared/components/registry/title_area.vue'; @@ -10,10 +10,12 @@ describe('title area', () => { const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`); const findTitle = () => wrapper.find('[data-testid="title"]'); const findAvatar = () => wrapper.find(GlAvatar); + const findInfoMessages = () => wrapper.findAll('[data-testid="info-message"]'); const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => { wrapper = shallowMount(component, { propsData, + stubs: { GlSprintf }, slots: { 'sub-header': '
', 'right-actions': '
', @@ -95,4 +97,33 @@ describe('title area', () => { }); }); }); + + describe('info-messages', () => { + it('shows a message when the props contains one', () => { + mountComponent({ propsData: { infoMessages: [{ text: 'foo foo bar bar' }] } }); + + const messages = findInfoMessages(); + expect(messages).toHaveLength(1); + expect(messages.at(0).text()).toBe('foo foo bar bar'); + }); + + it('shows a link when the props contains one', () => { + mountComponent({ + propsData: { + infoMessages: [{ text: 'foo %{docLinkStart}link%{docLinkEnd}', link: 'bar' }], + }, + }); + + const message = findInfoMessages().at(0); + + expect(message.find(GlLink).attributes('href')).toBe('bar'); + expect(message.text()).toBe('foo link'); + }); + + it('multiple messages generates multiple spans', () => { + mountComponent({ propsData: { infoMessages: [{ text: 'foo' }, { text: 'bar' }] } }); + + expect(findInfoMessages()).toHaveLength(2); + }); + }); }); -- GitLab From 080e3729b4c8cb2b41076a6dd689e1f1e94d98cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Wed, 16 Sep 2020 12:11:25 +0200 Subject: [PATCH 2/7] Wire info message in title_area - source - tests --- .../components/list_page/registry_header.vue | 35 +++------ .../list_page/registry_header_spec.js | 72 +++++++------------ 2 files changed, 37 insertions(+), 70 deletions(-) diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue index 7be68e77def5ba..b20f6643222adc 100644 --- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue +++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue @@ -1,5 +1,4 @@ - -
-

- - - - - - - - - - -

-
diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js index 7a27f8fa431418..e127b1564ed17a 100644 --- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js @@ -19,12 +19,8 @@ describe('registry_header', () => { const findTitleArea = () => wrapper.find(TitleArea); const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]'); - const findInfoArea = () => wrapper.find('[data-testid="info-area"]'); - const findIntroText = () => wrapper.find('[data-testid="default-intro"]'); const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]'); const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]'); - const findDisabledExpirationPolicyMessage = () => - wrapper.find('[data-testid="expiration-disabled-message"]'); const mountComponent = (propsData, slots) => { wrapper = shallowMount(Component, { @@ -123,32 +119,14 @@ describe('registry_header', () => { }); }); - describe('info area', () => { - it('exists', () => { - mountComponent(); - - expect(findInfoArea().exists()).toBe(true); - }); - + describe('info messages', () => { describe('default message', () => { - beforeEach(() => { - return mountComponent({ helpPagePath: 'bar' }); - }); - - it('exists', () => { - expect(findIntroText().exists()).toBe(true); - }); + it('is correctly bound to title_area props', () => { + mountComponent({ helpPagePath: 'foo' }); - it('has the correct copy', () => { - expect(findIntroText().text()).toMatchInterpolatedText(LIST_INTRO_TEXT); - }); - - it('has the correct link', () => { - expect( - findIntroText() - .find(GlLink) - .attributes('href'), - ).toBe('bar'); + expect(findTitleArea().props('infoMessages')).toEqual([ + { text: LIST_INTRO_TEXT, link: 'foo' }, + ]); }); }); @@ -157,7 +135,11 @@ describe('registry_header', () => { it('is hidden', () => { mountComponent(); - expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + expect(findTitleArea().props('infoMessages')).not.toEqual( + expect.arrayContaining([ + expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), + ]), + ); }); }); @@ -170,21 +152,13 @@ describe('registry_header', () => { imagesCount: 1, }); }); - it('message exist', () => { - expect(findDisabledExpirationPolicyMessage().exists()).toBe(true); - }); - it('has the correct copy', () => { - expect(findDisabledExpirationPolicyMessage().text()).toMatchInterpolatedText( - EXPIRATION_POLICY_DISABLED_MESSAGE, - ); - }); - it('has the correct link', () => { - expect( - findDisabledExpirationPolicyMessage() - .find(GlLink) - .attributes('href'), - ).toBe('foo'); + it('the prop is correctly bound', () => { + expect(findTitleArea().props('infoMessages')).toEqual( + expect.arrayContaining([ + expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: 'foo' }), + ]), + ); }); }); @@ -195,7 +169,11 @@ describe('registry_header', () => { imagesCount: 1, }); - expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + expect(findTitleArea().props('infoMessages')).not.toEqual( + expect.arrayContaining([ + expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), + ]), + ); }); }); describe('when the expiration policy is completely disabled', () => { @@ -206,7 +184,11 @@ describe('registry_header', () => { hideExpirationPolicyData: true, }); - expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + expect(findTitleArea().props('infoMessages')).not.toEqual( + expect.arrayContaining([ + expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), + ]), + ); }); }); }); -- GitLab From 15f0620c72414b36387f6fcb1cb7fc408b9d42c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Wed, 16 Sep 2020 13:26:32 +0200 Subject: [PATCH 3/7] Update packages snapshots --- .../__snapshots__/package_title_spec.js.snap | 214 +++++++++--------- 1 file changed, 113 insertions(+), 101 deletions(-) diff --git a/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap index 4d9e0af1545cf7..8e5f029d3e8e22 100644 --- a/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap @@ -2,151 +2,163 @@ exports[`PackageTitle renders with tags 1`] = `
- -
-

- Test package -

+
- +

+ Test package +

- +
+ + + +
-
- -
-
- -
-
- -
+
- +
+ +
+
+ +
+
+ +
+ +
- +
`; exports[`PackageTitle renders without tags 1`] = `
- -
-

- Test package -

+
- +

+ Test package +

- +
+ + + +
-
- -
-
- -
+
- +
+ +
+
+ +
+ +
- +
`; -- GitLab From 3ddcddacbfde2751af618313d54ddc06464d2419 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Wed, 16 Sep 2020 14:22:49 +0200 Subject: [PATCH 4/7] Fix linting error in test file --- .../explorer/components/list_page/registry_header_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js index e127b1564ed17a..5c4623cf257833 100644 --- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlSprintf, GlLink } from '@gitlab/ui'; +import { GlSprintf } from '@gitlab/ui'; import Component from '~/registry/explorer/components/list_page/registry_header.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import { -- GitLab From 2d1fc82e2495bd532ede99a243ae9edcb7825af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Fri, 18 Sep 2020 17:18:56 +0200 Subject: [PATCH 5/7] Remove extra wrapping div --- .../components/list_page/registry_header.vue | 46 +++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue index b20f6643222adc..228a660c997be7 100644 --- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue +++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue @@ -92,28 +92,26 @@ export default { -- GitLab From 45f6ce26b811d5493d8b93cb0adf54f985cf99ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Fri, 18 Sep 2020 17:19:09 +0200 Subject: [PATCH 6/7] Update test specs with maintainer patch --- .../list_page/registry_header_spec.js | 56 +++++-------------- 1 file changed, 14 insertions(+), 42 deletions(-) diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js index 5c4623cf257833..3c997093d46ff2 100644 --- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js @@ -131,18 +131,6 @@ describe('registry_header', () => { }); describe('expiration policy info message', () => { - describe('when there are no images', () => { - it('is hidden', () => { - mountComponent(); - - expect(findTitleArea().props('infoMessages')).not.toEqual( - expect.arrayContaining([ - expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), - ]), - ); - }); - }); - describe('when there are images', () => { describe('when expiration policy is disabled', () => { beforeEach(() => { @@ -154,41 +142,25 @@ describe('registry_header', () => { }); it('the prop is correctly bound', () => { - expect(findTitleArea().props('infoMessages')).toEqual( - expect.arrayContaining([ - expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: 'foo' }), - ]), - ); + expect(findTitleArea().props('infoMessages')).toEqual([ + { text: LIST_INTRO_TEXT, link: '' }, + { text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: 'foo' }, + ]); }); }); - describe('when expiration policy is enabled', () => { + describe.each` + desc | props + ${'when there are no images'} | ${{ expirationPolicy: { enabled: false }, imagesCount: 0 }} + ${'when expiration policy is enabled'} | ${{ expirationPolicy: { enabled: true }, imagesCount: 1 }} + ${'when the expiration policy is completely disabled'} | ${{ expirationPolicy: { enabled: false }, imagesCount: 1, hideExpirationPolicyData: true }} + `('$desc', ({ props }) => { it('message does not exist', () => { - mountComponent({ - expirationPolicy: { enabled: true }, - imagesCount: 1, - }); - - expect(findTitleArea().props('infoMessages')).not.toEqual( - expect.arrayContaining([ - expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), - ]), - ); - }); - }); - describe('when the expiration policy is completely disabled', () => { - it('message does not exist', () => { - mountComponent({ - expirationPolicy: { enabled: true }, - imagesCount: 1, - hideExpirationPolicyData: true, - }); + mountComponent(props); - expect(findTitleArea().props('infoMessages')).not.toEqual( - expect.arrayContaining([ - expect.objectContaining({ text: EXPIRATION_POLICY_DISABLED_MESSAGE }), - ]), - ); + expect(findTitleArea().props('infoMessages')).toEqual([ + { text: LIST_INTRO_TEXT, link: '' }, + ]); }); }); }); -- GitLab From b3ad0180d6d75684a4e132f093ce42e973d0fd50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Fri, 18 Sep 2020 17:25:11 +0200 Subject: [PATCH 7/7] Restore title_area info messages as p - source - tests --- .../javascripts/vue_shared/components/registry/title_area.vue | 4 ++-- .../components/__snapshots__/package_title_spec.js.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue index 57eeae3702c2f4..197671b47d6f61 100644 --- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue +++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue @@ -76,7 +76,7 @@ export default {
-
+

-

+

diff --git a/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap index 8e5f029d3e8e22..d317264bdae7f6 100644 --- a/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap +++ b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap @@ -82,7 +82,7 @@ exports[`PackageTitle renders with tags 1`] = ` -
+

`; @@ -159,6 +159,6 @@ exports[`PackageTitle renders without tags 1`] = ` -
+

`; -- GitLab