From db39504bc4c8f8857f49df653b2b46839901af86 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 20:25:57 -0600 Subject: [PATCH 01/12] Implement MR description truncation base --- app/assets/javascripts/merge_request.js | 21 ++++++++ .../page_bundles/merge_request.scss | 51 +++++++++++++++++++ .../merge_requests/_description.html.haml | 6 ++- 3 files changed, 77 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index 03bfc4a9602e8b..c8fb3ed4f97e7f 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -24,6 +24,7 @@ function MergeRequest(opts) { this.initTabs(); this.initMRBtnListeners(); + this.truncation.truncateDescription(); if ($('.description.js-task-list-container').length) { this.taskList = new TaskList({ @@ -137,6 +138,26 @@ MergeRequest.prototype.submitNoteForm = function (form, $button) { } }; +MergeRequest.prototype.truncation = { + description: null, + markdown: null, + button: null, + listener: () => { + if( this.md && this.button ){ + this.md.classList.remove( "truncated" ); + this.button.removeEventListener( "click", this.listener ); + } + }, + truncateDescription(){ + this.description = document.querySelector( ".description" ); + this.md = this.description.querySelector( ".md" ); + this.button = this.description.querySelector( ".untruncate-button button.gl-button" ); + + this.md.classList.add( "truncated" ); + this.button.addEventListener( "click", this.listener ); + }, +} + MergeRequest.decreaseCounter = function (by = 1) { const $el = $('.js-merge-counter'); const count = Math.max(parseInt($el.first().text().replace(/[^\d]/, ''), 10) - by, 0); diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss index 4219bd25f91672..44bd39bb9781c8 100644 --- a/app/assets/stylesheets/page_bundles/merge_request.scss +++ b/app/assets/stylesheets/page_bundles/merge_request.scss @@ -336,3 +336,54 @@ $comparison-empty-state-height: 62px; width: 100%; } } + +.description{ + .description-untruncate{ + bottom: 0; + display: none; + pointer-events: none; + position: absolute; + + &::before { + content: ''; + display: block; + height: 3rem; + width: 100%; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, $white 100%); + + .gl-dark & { + background: linear-gradient(180deg, rgba(31, 30, 36, 0.00) 0%, $gray-950 100%); + } + } + } + + .md.truncated{ + max-height: clamp(16rem, 40vh, 32rem); + overflow: hidden; + + + .description-untruncate{ + display: block; + + .untruncate-button { + pointer-events: auto; + background-color: $white; + + .gl-dark & { + background-color: $gray-950; + } + + &::before, &::after { + content: ''; + align-self: center; + height: 1px; + flex: 1; + border-top: 1px solid $gray-50; + + .gl-dark & { + border-top: 1px solid $gray-900; + } + } + } + } + } +} diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml index 89eed0789e8250..2f4ec729233d47 100644 --- a/app/views/projects/merge_requests/_description.html.haml +++ b/app/views/projects/merge_requests/_description.html.haml @@ -1,8 +1,12 @@ %div - if @merge_request.description.present? - .description{ class: ['gl-mt-4!', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } } + .description{ class: ['gl-relative', 'gl-clearfix', 'gl-mt-4!', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } } .md = markdown_field(@merge_request, :description) + .description-untruncate.gl-display-block.gl-w-full + .untruncate-button.gl-w-full.gl-display-flex + = render Pajamas::ButtonComponent.new(variant: :confirm, category: :tertiary, button_options: { class: 'gl-mx-4' }) do + = _('Read More') %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } } = edited_time_ago_with_tooltip(@merge_request, placement: 'bottom') -- GitLab From 82d3546b22a59df27b4e547f72df1fba1bd4c75e Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 21:13:33 -0600 Subject: [PATCH 02/12] Add feature flag for truncated MR descriptions --- .../merge_request_collapsed_description.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml diff --git a/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml b/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml new file mode 100644 index 00000000000000..6edc1fbd09f1e1 --- /dev/null +++ b/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml @@ -0,0 +1,9 @@ +--- +name: merge_request_collapsed_description +feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/430730 +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/156100 +rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/467136 +milestone: '17.1' +group: group::code review +type: gitlab_com_derisk +default_enabled: true -- GitLab From 5d7cc91df305c8b7ce1d1c0370aaa3b1d34bdcc9 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 21:19:46 -0600 Subject: [PATCH 03/12] Switch to tailwind classes --- app/views/projects/merge_requests/_description.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml index 2f4ec729233d47..94de7e3499cc9a 100644 --- a/app/views/projects/merge_requests/_description.html.haml +++ b/app/views/projects/merge_requests/_description.html.haml @@ -1,10 +1,10 @@ %div - if @merge_request.description.present? - .description{ class: ['gl-relative', 'gl-clearfix', 'gl-mt-4!', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } } + .description{ class: ['gl-relative', 'gl-clearfix', '!gl-mt-4', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } } .md = markdown_field(@merge_request, :description) - .description-untruncate.gl-display-block.gl-w-full - .untruncate-button.gl-w-full.gl-display-flex + .description-untruncate.gl-block.gl-w-full + .untruncate-button.gl-w-full.gl-flex = render Pajamas::ButtonComponent.new(variant: :confirm, category: :tertiary, button_options: { class: 'gl-mx-4' }) do = _('Read More') %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } } -- GitLab From 4bc7ed257988389fb35f198ce541a7aeac80e8eb Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 21:26:14 -0600 Subject: [PATCH 04/12] Fix prettier complaints --- app/assets/javascripts/merge_request.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index c8fb3ed4f97e7f..387ebd74ab7864 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -143,20 +143,20 @@ MergeRequest.prototype.truncation = { markdown: null, button: null, listener: () => { - if( this.md && this.button ){ - this.md.classList.remove( "truncated" ); - this.button.removeEventListener( "click", this.listener ); + if (this.md && this.button) { + this.md.classList.remove('truncated'); + this.button.removeEventListener('click', this.listener); } }, - truncateDescription(){ - this.description = document.querySelector( ".description" ); - this.md = this.description.querySelector( ".md" ); - this.button = this.description.querySelector( ".untruncate-button button.gl-button" ); + truncateDescription() { + this.description = document.querySelector('.description'); + this.md = this.description.querySelector('.md'); + this.button = this.description.querySelector('.untruncate-button button.gl-button'); - this.md.classList.add( "truncated" ); - this.button.addEventListener( "click", this.listener ); + this.md.classList.add('truncated'); + this.button.addEventListener('click', this.listener); }, -} +}; MergeRequest.decreaseCounter = function (by = 1) { const $el = $('.js-merge-counter'); -- GitLab From b7a03cb0907ac82626b8f5bceaca6cac82c9ef70 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 22:26:24 -0600 Subject: [PATCH 05/12] Check for the feature flag before truncating the description --- app/assets/javascripts/merge_request.js | 5 ++++- app/controllers/projects/merge_requests_controller.rb | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index 387ebd74ab7864..73a1276079fde8 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -24,7 +24,10 @@ function MergeRequest(opts) { this.initTabs(); this.initMRBtnListeners(); - this.truncation.truncateDescription(); + + if (window.gon.features.mergeRequestCollapsedDescription) { + this.truncation.truncateDescription(); + } if ($('.description.js-task-list-container').length) { this.taskList = new TaskList({ diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb index 14d8b2c16740c1..f9ae9ac373ce2d 100644 --- a/app/controllers/projects/merge_requests_controller.rb +++ b/app/controllers/projects/merge_requests_controller.rb @@ -45,6 +45,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo push_frontend_feature_flag(:notifications_todos_buttons, current_user) push_frontend_feature_flag(:pinned_file, project) push_frontend_feature_flag(:reviewer_assign_drawer, current_user) + push_frontend_feature_flag(:merge_request_collapsed_description, project) end around_action :allow_gitaly_ref_name_caching, only: [:index, :show, :diffs, :rapid_diffs, :discussions] -- GitLab From 8aee6434f96653599669c2e2e9d9fd97f6ac4cad Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 11 Jun 2024 22:28:10 -0600 Subject: [PATCH 06/12] Don't bother truncating (or binding listeners) if not too tall --- app/assets/javascripts/merge_request.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index 73a1276079fde8..f18c5d119674ea 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -142,22 +142,27 @@ MergeRequest.prototype.submitNoteForm = function (form, $button) { }; MergeRequest.prototype.truncation = { + max: 16 * parseFloat(getComputedStyle(document.documentElement).fontSize), description: null, markdown: null, button: null, - listener: () => { + binding: null, + listener() { if (this.md && this.button) { this.md.classList.remove('truncated'); - this.button.removeEventListener('click', this.listener); + this.button.removeEventListener('click', this.binding); } }, truncateDescription() { this.description = document.querySelector('.description'); this.md = this.description.querySelector('.md'); this.button = this.description.querySelector('.untruncate-button button.gl-button'); + this.binding = this.listener.bind(this); - this.md.classList.add('truncated'); - this.button.addEventListener('click', this.listener); + if (this.md.getBoundingClientRect().height > this.max) { + this.md.classList.add('truncated'); + this.button.addEventListener('click', this.binding); + } }, }; -- GitLab From 97e7ed71ddd33bcb9560063ba99301687d7e2e6d Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 12 Jun 2024 19:15:11 -0600 Subject: [PATCH 07/12] Add text to GitLab POT --- locale/gitlab.pot | 3 +++ 1 file changed, 3 insertions(+) diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 8e0fd204c2594d..6752537aaf9dc4 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -43071,6 +43071,9 @@ msgstr "" msgid "Re-request review" msgstr "" +msgid "Read More" +msgstr "" + msgid "Read documentation" msgstr "" -- GitLab From 3abec4e4a0319f50ee78e8a5ad614e23b751110f Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 12 Jun 2024 19:20:50 -0600 Subject: [PATCH 08/12] Go back to default disabled ... even though in effect we are going to enable it for everyone immediately --- .../gitlab_com_derisk/merge_request_collapsed_description.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml b/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml index 6edc1fbd09f1e1..f794877d2b49eb 100644 --- a/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml +++ b/config/feature_flags/gitlab_com_derisk/merge_request_collapsed_description.yml @@ -6,4 +6,4 @@ rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/467136 milestone: '17.1' group: group::code review type: gitlab_com_derisk -default_enabled: true +default_enabled: false -- GitLab From e2ac296bea5838c84f30dd37e8153d8ad8b46ba0 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Thu, 13 Jun 2024 14:31:15 -0600 Subject: [PATCH 09/12] Switch to existing "Read more" to avoid a new capitalization --- app/views/projects/merge_requests/_description.html.haml | 2 +- locale/gitlab.pot | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml index 94de7e3499cc9a..92f15daa8d39b4 100644 --- a/app/views/projects/merge_requests/_description.html.haml +++ b/app/views/projects/merge_requests/_description.html.haml @@ -6,7 +6,7 @@ .description-untruncate.gl-block.gl-w-full .untruncate-button.gl-w-full.gl-flex = render Pajamas::ButtonComponent.new(variant: :confirm, category: :tertiary, button_options: { class: 'gl-mx-4' }) do - = _('Read More') + = _('Read more') %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } } = edited_time_ago_with_tooltip(@merge_request, placement: 'bottom') diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 6752537aaf9dc4..8e0fd204c2594d 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -43071,9 +43071,6 @@ msgstr "" msgid "Re-request review" msgstr "" -msgid "Read More" -msgstr "" - msgid "Read documentation" msgstr "" -- GitLab From 54892080a13cb8395beecc5eeda9977f68339f89 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Thu, 13 Jun 2024 14:34:06 -0600 Subject: [PATCH 10/12] Match the CSS `clamp()` functionality The JS could display the UI while the CSS wouldn't hide the overflow due to a mismatch in _when_ each side does their logic, so this syncs them. --- app/assets/javascripts/merge_request.js | 12 +++++++++++- .../stylesheets/page_bundles/merge_request.scss | 4 ++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index f18c5d119674ea..f0b30a5d99c606 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -12,6 +12,9 @@ import { addDelimiter } from './lib/utils/text_utility'; import { getParameterValues, setUrlParams } from './lib/utils/url_utility'; import TaskList from './task_list'; +const FONT_SIZE = parseFloat(getComputedStyle(document.documentElement).fontSize); +const VH = document.documentElement.clientHeight; + function MergeRequest(opts) { // Initialize MergeRequest behavior // @@ -142,7 +145,14 @@ MergeRequest.prototype.submitNoteForm = function (form, $button) { }; MergeRequest.prototype.truncation = { - max: 16 * parseFloat(getComputedStyle(document.documentElement).fontSize), + /* + max also implemented in assets/stylesheets/page_bundles/merge_request.scss. + Ensure they are synced to avoid buggy behavior + */ + max: Math.min( + Math.max(16 * FONT_SIZE /* 16rem */, 0.4 * VH /* 40vh */), + 32 * FONT_SIZE /* 32rem */, + ), description: null, markdown: null, button: null, diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss index 44bd39bb9781c8..0da0f1111b1855 100644 --- a/app/assets/stylesheets/page_bundles/merge_request.scss +++ b/app/assets/stylesheets/page_bundles/merge_request.scss @@ -358,6 +358,10 @@ $comparison-empty-state-height: 62px; } .md.truncated{ + /* + max-height/clamp also implemented in javascripts/merge_request.js. + Ensure they are synced to avoid buggy behavior + */ max-height: clamp(16rem, 40vh, 32rem); overflow: hidden; -- GitLab From 1f767ec893f576a0fa02037b950cd2e7017762d1 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Thu, 13 Jun 2024 18:02:07 -0600 Subject: [PATCH 11/12] Test that the truncation actually occurs when the FF is enabled --- spec/frontend/merge_request_spec.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js index a119ca8272e74b..32e78f1c462ed6 100644 --- a/spec/frontend/merge_request_spec.js +++ b/spec/frontend/merge_request_spec.js @@ -15,6 +15,8 @@ describe('MergeRequest', () => { const test = {}; describe('task lists', () => { let mock; + let truncateSpy; + let originalTruncate; beforeEach(() => { setHTMLFixture(htmlMergeRequestWithTaskList); @@ -26,12 +28,19 @@ describe('MergeRequest', () => { .onPatch(`${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`) .reply(HTTP_STATUS_OK, {}); + window.gon.features = { mergeRequestCollapsedDescription: true }; + + originalTruncate = MergeRequest.prototype.truncation.truncateDescription; + truncateSpy = jest.fn(originalTruncate); + MergeRequest.prototype.truncation.truncateDescription = truncateSpy; + test.merge = new MergeRequest(); return test.merge; }); afterEach(() => { mock.restore(); + MergeRequest.prototype.truncation.truncateDescription = originalTruncate; resetHTMLFixture(); }); @@ -108,5 +117,16 @@ describe('MergeRequest', () => { ); }); }); + + describe('truncation', () => { + /* + Documents are not actually rendered/painted in tests, so we can't test the logic with the actual height limits (everything is 0) + + That said, it's _almost_ all browser APIs, so there's not much custom logic at work. + */ + it('collapses descriptions when the feature flag is enabled', () => { + expect(truncateSpy).toHaveBeenCalledTimes(1); + }); + }); }); }); -- GitLab From aa8e17420a4285f8f0f27a745b2bf67019fdc8c9 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Mon, 17 Jun 2024 13:22:25 -0600 Subject: [PATCH 12/12] Entirely hide the description before the JS loads Also: display a spinner. In theory, this avoids a flash of "non-dynamic" content. In practice, this is just sort of the opposite problem... Now, instead of truncating once the page loads the JS, the description appears to not load at ALL until the page loads the JS (in reality, it is there, it's just hidden). Seems anti-user to hide content we know we have just to wait until we can show a version that we've truncated. --- app/assets/javascripts/merge_request.js | 14 +++++++++++--- .../merge_requests/_description.html.haml | 19 +++++++++++++------ spec/frontend/merge_request_spec.js | 15 +++++++++++++++ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index f0b30a5d99c606..db4788b3d37a04 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -28,6 +28,7 @@ function MergeRequest(opts) { this.initTabs(); this.initMRBtnListeners(); + this.truncation.prepare(); if (window.gon.features.mergeRequestCollapsedDescription) { this.truncation.truncateDescription(); } @@ -156,6 +157,7 @@ MergeRequest.prototype.truncation = { description: null, markdown: null, button: null, + loader: null, binding: null, listener() { if (this.md && this.button) { @@ -164,9 +166,6 @@ MergeRequest.prototype.truncation = { } }, truncateDescription() { - this.description = document.querySelector('.description'); - this.md = this.description.querySelector('.md'); - this.button = this.description.querySelector('.untruncate-button button.gl-button'); this.binding = this.listener.bind(this); if (this.md.getBoundingClientRect().height > this.max) { @@ -174,6 +173,15 @@ MergeRequest.prototype.truncation = { this.button.addEventListener('click', this.binding); } }, + prepare() { + this.description = document.querySelector('.description'); + this.md = this.description.querySelector('.md'); + this.button = this.description.querySelector('.untruncate-button button.gl-button'); + this.loader = document.querySelector('.description + .gl-mt-3'); + + this.description.classList.remove('gl-hidden'); + this.loader?.remove(); + }, }; MergeRequest.decreaseCounter = function (by = 1) { diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml index 92f15daa8d39b4..971481e3df1746 100644 --- a/app/views/projects/merge_requests/_description.html.haml +++ b/app/views/projects/merge_requests/_description.html.haml @@ -1,12 +1,19 @@ +- description_classes = ['gl-relative', 'gl-clearfix', '!gl-mt-4', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''] +- if Feature.enabled?(:merge_request_collapsed_description, @merge_request) + - description_classes.append( 'gl-hidden' ) + %div - if @merge_request.description.present? - .description{ class: ['gl-relative', 'gl-clearfix', '!gl-mt-4', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } } + .description{ class: description_classes, data: { testid: 'description-content' } } .md = markdown_field(@merge_request, :description) - .description-untruncate.gl-block.gl-w-full - .untruncate-button.gl-w-full.gl-flex - = render Pajamas::ButtonComponent.new(variant: :confirm, category: :tertiary, button_options: { class: 'gl-mx-4' }) do - = _('Read more') + - if Feature.enabled?(:merge_request_collapsed_description, @merge_request) + .description-untruncate.gl-block.gl-w-full + .untruncate-button.gl-w-full.gl-flex + = render Pajamas::ButtonComponent.new(variant: :confirm, category: :tertiary, button_options: { class: 'gl-mx-4' }) do + = _('Read more') %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } } - + - if Feature.enabled?(:merge_request_collapsed_description, @merge_request) + .gl-mt-3 + = gl_loading_icon(size: 'lg') = edited_time_ago_with_tooltip(@merge_request, placement: 'bottom') diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js index 32e78f1c462ed6..82173fe5407864 100644 --- a/spec/frontend/merge_request_spec.js +++ b/spec/frontend/merge_request_spec.js @@ -17,6 +17,8 @@ describe('MergeRequest', () => { let mock; let truncateSpy; let originalTruncate; + let prepareSpy; + let originalPrepare; beforeEach(() => { setHTMLFixture(htmlMergeRequestWithTaskList); @@ -30,10 +32,16 @@ describe('MergeRequest', () => { window.gon.features = { mergeRequestCollapsedDescription: true }; + // Spy on the truncation originalTruncate = MergeRequest.prototype.truncation.truncateDescription; truncateSpy = jest.fn(originalTruncate); MergeRequest.prototype.truncation.truncateDescription = truncateSpy; + // Spy on the truncation preparer + originalPrepare = MergeRequest.prototype.truncation.prepare; + prepareSpy = jest.fn(originalPrepare); + MergeRequest.prototype.truncation.prepare = prepareSpy; + test.merge = new MergeRequest(); return test.merge; }); @@ -41,6 +49,7 @@ describe('MergeRequest', () => { afterEach(() => { mock.restore(); MergeRequest.prototype.truncation.truncateDescription = originalTruncate; + MergeRequest.prototype.truncation.prepare = originalPrepare; resetHTMLFixture(); }); @@ -127,6 +136,12 @@ describe('MergeRequest', () => { it('collapses descriptions when the feature flag is enabled', () => { expect(truncateSpy).toHaveBeenCalledTimes(1); }); + + it('removes the statically-rendered classes/elements that hide the description', () => { + expect(prepareSpy).toHaveBeenCalledTimes(1); + expect(document.querySelector('.description').classList.contains('gl-hidden')).toBe(false); + expect(document.querySelector('.description + .gl-mt-3')).toBe(null); + }); }); }); }); -- GitLab