Hi @gfm_user - thank you for reporting this bug (#1) we hope to fix it in %1.1 as part of !1
+Hi @gfm_user - thank you for reporting this UX bug (#1) we hope to fix it in %1.1 as part of !1
- name: strike markdown: |- ~~del~~ diff --git a/spec/frontend/content_editor/components/suggestions_dropdown_spec.js b/spec/frontend/content_editor/components/suggestions_dropdown_spec.js index fbf00b8dd41..e72eb892e74 100644 --- a/spec/frontend/content_editor/components/suggestions_dropdown_spec.js +++ b/spec/frontend/content_editor/components/suggestions_dropdown_spec.js @@ -21,7 +21,9 @@ describe('~/content_editor/components/suggestions_dropdown', () => { const exampleUser = { username: 'root', avatar_url: 'root_avatar.png', type: 'User' }; const exampleIssue = { iid: 123, title: 'Test Issue' }; const exampleMergeRequest = { iid: 224, title: 'Test MR' }; - const exampleMilestone = { iid: 21, title: '1.3' }; + const exampleMilestone1 = { iid: 21, title: '13' }; + const exampleMilestone2 = { iid: 24, title: 'Milestone with spaces' }; + const exampleCommand = { name: 'due', description: 'Set due date', @@ -32,7 +34,19 @@ describe('~/content_editor/components/suggestions_dropdown', () => { title: '❓ Remote Development | Solution validation', reference: 'gitlab-org&8884', }; - const exampleLabel = { + const exampleLabel1 = { + title: 'Create', + color: '#E44D2A', + type: 'GroupLabel', + textColor: '#FFFFFF', + }; + const exampleLabel2 = { + title: 'Weekly Team Announcement', + color: '#E44D2A', + type: 'GroupLabel', + textColor: '#FFFFFF', + }; + const exampleLabel3 = { title: 'devops::create', color: '#E44D2A', type: 'GroupLabel', @@ -67,10 +81,13 @@ describe('~/content_editor/components/suggestions_dropdown', () => { ${'reference'} | ${'user'} | ${'@'} | ${exampleUser} | ${`@root`} | ${{}} ${'reference'} | ${'issue'} | ${'#'} | ${exampleIssue} | ${`#123`} | ${{}} ${'reference'} | ${'merge_request'} | ${'!'} | ${exampleMergeRequest} | ${`!224`} | ${{}} - ${'reference'} | ${'milestone'} | ${'%'} | ${exampleMilestone} | ${`%1.3`} | ${{}} - ${'reference'} | ${'command'} | ${'/'} | ${exampleCommand} | ${'/due '} | ${{}} + ${'reference'} | ${'milestone'} | ${'%'} | ${exampleMilestone1} | ${`%13`} | ${{}} + ${'reference'} | ${'milestone'} | ${'%'} | ${exampleMilestone2} | ${`%Milestone with spaces`} | ${{ originalText: '%"Milestone with spaces"' }} + ${'reference'} | ${'command'} | ${'/'} | ${exampleCommand} | ${'/due'} | ${{}} ${'reference'} | ${'epic'} | ${'&'} | ${exampleEpic} | ${`gitlab-org&8884`} | ${{}} - ${'reference'} | ${'label'} | ${'~'} | ${exampleLabel} | ${`~devops::create`} | ${{}} + ${'reference'} | ${'label'} | ${'~'} | ${exampleLabel1} | ${`Create`} | ${{}} + ${'reference'} | ${'label'} | ${'~'} | ${exampleLabel2} | ${`Weekly Team Announcement`} | ${{ originalText: '~"Weekly Team Announcement"' }} + ${'reference'} | ${'label'} | ${'~'} | ${exampleLabel3} | ${`devops::create`} | ${{ originalText: '~"devops::create"', text: 'devops::create' }} ${'reference'} | ${'vulnerability'} | ${'[vulnerability:'} | ${exampleVulnerability} | ${`[vulnerability:60850147]`} | ${{}} ${'reference'} | ${'snippet'} | ${'$'} | ${exampleSnippet} | ${`$2420859`} | ${{}} ${'emoji'} | ${'emoji'} | ${':'} | ${exampleEmoji} | ${`😃`} | ${insertedEmojiProps} @@ -130,7 +147,7 @@ describe('~/content_editor/components/suggestions_dropdown', () => { referenceType | char | reference | displaysID ${'issue'} | ${'#'} | ${exampleIssue} | ${true} ${'merge_request'} | ${'!'} | ${exampleMergeRequest} | ${true} - ${'milestone'} | ${'%'} | ${exampleMilestone} | ${false} + ${'milestone'} | ${'%'} | ${exampleMilestone1} | ${false} `('rendering $referenceType references', ({ referenceType, char, reference, displaysID }) => { it(`displays ${referenceType} ID and title`, () => { buildWrapper({ @@ -172,20 +189,26 @@ describe('~/content_editor/components/suggestions_dropdown', () => { }); describe('rendering label references', () => { - it('displays label title and color', () => { + it.each` + label | displayedTitle | displayedColor + ${exampleLabel1} | ${'Create'} | ${'rgb(228, 77, 42)' /* #E44D2A */} + ${exampleLabel2} | ${'Weekly Team Announcement'} | ${'rgb(228, 77, 42)' /* #E44D2A */} + ${exampleLabel3} | ${'devops::create'} | ${'rgb(228, 77, 42)' /* #E44D2A */} + `('displays label title and color', ({ label, displayedTitle, displayedColor }) => { buildWrapper({ propsData: { char: '~', nodeProps: { referenceType: 'label', }, - items: [exampleLabel], + items: [label], }, }); - expect(wrapper.text()).toContain(`${exampleLabel.title}`); + expect(wrapper.text()).toContain(displayedTitle); + expect(wrapper.text()).not.toContain('"'); // no quotes in the dropdown list expect(wrapper.findByTestId('label-color-box').attributes().style).toEqual( - `background-color: rgb(228, 77, 42);`, // #E44D2A + `background-color: ${displayedColor};`, ); }); }); diff --git a/spec/frontend/content_editor/components/wrappers/label_spec.js b/spec/frontend/content_editor/components/wrappers/label_spec.js new file mode 100644 index 00000000000..9e58669b0ea --- /dev/null +++ b/spec/frontend/content_editor/components/wrappers/label_spec.js @@ -0,0 +1,36 @@ +import { GlLabel } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import LabelWrapper from '~/content_editor/components/wrappers/label.vue'; + +describe('content/components/wrappers/label', () => { + let wrapper; + + const createWrapper = async (node = {}) => { + wrapper = shallowMountExtended(LabelWrapper, { + propsData: { node }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it("renders a GlLabel with the node's text and color", () => { + createWrapper({ attrs: { color: '#ff0000', text: 'foo bar', originalText: '~"foo bar"' } }); + + const glLabel = wrapper.findComponent(GlLabel); + + expect(glLabel.props()).toMatchObject( + expect.objectContaining({ + title: 'foo bar', + backgroundColor: '#ff0000', + }), + ); + }); + + it('renders a scoped label if there is a "::" in the label', () => { + createWrapper({ attrs: { color: '#ff0000', text: 'foo::bar', originalText: '~"foo::bar"' } }); + + expect(wrapper.findComponent(GlLabel).props().scoped).toBe(true); + }); +}); diff --git a/spec/support/shared_contexts/markdown_golden_master_shared_examples.rb b/spec/support/shared_contexts/markdown_golden_master_shared_examples.rb index 168aef0f174..72e23e6d5fa 100644 --- a/spec/support/shared_contexts/markdown_golden_master_shared_examples.rb +++ b/spec/support/shared_contexts/markdown_golden_master_shared_examples.rb @@ -13,6 +13,8 @@ RSpec.shared_context 'API::Markdown Golden Master shared context' do |markdown_y let_it_be(:project) { create(:project, :public, :repository, group: group) } let_it_be(:label) { create(:label, project: project, title: 'bug') } + let_it_be(:label2) { create(:label, project: project, title: 'UX bug') } + let_it_be(:milestone) { create(:milestone, project: project, title: '1.1') } let_it_be(:issue) { create(:issue, project: project) } let_it_be(:merge_request) { create(:merge_request, source_project: project) }