File: button_component_spec.rb

package info (click to toggle)
gitlab 17.6.5-19
  • links: PTS, VCS
  • area: main
  • in suites: sid
  • size: 629,368 kB
  • sloc: ruby: 1,915,304; javascript: 557,307; sql: 60,639; xml: 6,509; sh: 4,567; makefile: 1,239; python: 406
file content (343 lines) | stat: -rw-r--r-- 10,248 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
# frozen_string_literal: true

require "spec_helper"

RSpec.describe Pajamas::ButtonComponent, type: :component, feature_category: :design_system do
  subject do
    described_class.new(**options)
  end

  let(:content) { "Button content" }
  let(:icon_content) { nil }
  let(:options) { {} }

  RSpec.shared_examples 'basic button behavior' do
    before do
      render_inline(subject) do |c|
        c.with_icon_content { icon_content } if icon_content.present?
        content
      end
    end

    it 'renders its content' do
      expect(page).to have_text content
    end

    it 'adds default styling' do
      expect(page).to have_css ".btn.btn-default.btn-md.gl-button"
    end

    describe 'button_options' do
      let(:options) { { button_options: { id: 'baz', data: { foo: 'bar' } } } }

      it 'are added to the button' do
        expect(page).to have_css ".gl-button#baz[data-foo='bar']"
      end

      context 'with custom classes' do
        let(:options) { { variant: :danger, category: :tertiary, button_options: { class: 'custom-class' } } }

        it 'don\'t conflict with internal button_classes' do
          expect(page).to have_css '.gl-button.btn-danger.btn-danger-tertiary.custom-class'
        end
      end

      context 'when overriding base attributes' do
        let(:options) { { button_options: { type: 'submit' } } }

        it 'overrides type' do
          expect(page).to have_css '[type="submit"]'
        end
      end
    end

    describe 'button_text_classes' do
      let(:options) { { button_text_classes: 'custom-text-class' } }

      it 'is added to the button text' do
        expect(page).to have_css ".gl-button-text.custom-text-class"
      end
    end

    describe 'disabled' do
      context 'with defaults (false)' do
        it 'does not have  disabled styling and behavior' do
          expect(page).not_to have_css ".disabled[disabled][aria-disabled]"
        end
      end

      context 'when set to true' do
        let(:options) { { disabled: true } }

        it 'has disabled styling and behavior' do
          expect(page).to have_css ".disabled[disabled][aria-disabled]"
        end
      end
    end

    describe 'loading' do
      context 'with defaults (false)' do
        it 'is not disabled' do
          expect(page).not_to have_css ".disabled[disabled]"
        end

        it 'does not render a spinner' do
          expect(page).not_to have_css('.gl-sr-only', text: 'Loading')
        end
      end

      context 'when set to true' do
        let(:options) { { loading: true } }

        it 'is disabled' do
          expect(page).to have_css ".disabled[disabled]"
        end

        it 'renders a spinner' do
          expect(page).to have_css('.gl-sr-only', text: 'Loading')
        end
      end
    end

    describe 'block' do
      context 'with defaults (false)' do
        it 'is inline' do
          expect(page).not_to have_css ".btn-block"
        end
      end

      context 'when set to true' do
        let(:options) { { block: true } }

        it 'is block element' do
          expect(page).to have_css ".btn-block"
        end
      end
    end

    describe 'selected' do
      context 'with defaults (false)' do
        it 'does not have selected styling and behavior' do
          expect(page).not_to have_css ".selected"
        end
      end

      context 'when set to true' do
        let(:options) { { selected: true } }

        it 'has selected styling and behavior' do
          expect(page).to have_css ".selected"
        end
      end
    end

    describe 'category & variant' do
      context 'with category variants' do
        where(:variant) { [:default, :confirm, :danger] }

        let(:options) { { variant: variant, category: :tertiary } }

        with_them do
          it 'renders the button in correct variant && category' do
            expect(page).to have_css(".#{described_class::VARIANT_CLASSES[variant]}")
            expect(page).to have_css(".#{described_class::VARIANT_CLASSES[variant]}-tertiary")
          end
        end
      end

      context 'with non-category variants' do
        where(:variant) { [:dashed, :link, :reset] }

        let(:options) { { variant: variant, category: :tertiary } }

        with_them do
          it 'renders the button in correct variant && category' do
            expect(page).to have_css(".#{described_class::VARIANT_CLASSES[variant]}")
            expect(page).not_to have_css(".#{described_class::VARIANT_CLASSES[variant]}-tertiary")
          end
        end
      end

      context 'with primary category' do
        where(:variant) { [:default, :confirm, :danger] }

        let(:options) { { variant: variant, category: :primary } }

        with_them do
          it 'renders the button in correct variant && category' do
            expect(page).to have_css(".#{described_class::VARIANT_CLASSES[variant]}")
            expect(page).not_to have_css(".#{described_class::VARIANT_CLASSES[variant]}-primary")
          end
        end
      end
    end

    describe 'size' do
      context 'with defaults (medium)' do
        it 'applies medium class' do
          expect(page).to have_css ".btn-md"
        end
      end

      context 'when set to small' do
        let(:options) { { size: :small } }

        it 'applies the small class to the button' do
          expect(page).to have_css ".btn-sm"
        end
      end
    end

    describe 'icon' do
      it 'has none by default' do
        expect(page).not_to have_css ".gl-icon"
      end

      context 'with icon' do
        let(:options) { { icon: 'star-o', icon_classes: 'custom-icon' } }

        it 'renders an icon with custom CSS class' do
          expect(page).to have_css "svg.gl-icon.gl-button-icon.custom-icon[data-testid='star-o-icon']"
          expect(page).not_to have_css ".btn-icon"
        end
      end

      context 'with icon only and no content' do
        let(:content) { nil }
        let(:options) { { icon: 'star-o' } }

        it 'adds a "btn-icon" CSS class' do
          expect(page).to have_css ".btn.btn-icon"
        end
      end

      context 'with icon only and when loading' do
        let(:content) { nil }
        let(:options) { { icon: 'star-o', loading: true } }

        it 'renders only a loading icon' do
          expect(page).not_to have_css "svg.gl-icon.gl-button-icon.custom-icon[data-testid='star-o-icon']"
          expect(page).to have_css('.gl-sr-only', text: 'Loading')
        end
      end
    end

    describe 'icon_content' do
      let(:icon_content) { 'Custom icon' }

      it 'renders custom icon content' do
        expect(page).to have_text icon_content
      end
    end
  end

  context 'when button component renders a button' do
    include_examples 'basic button behavior'

    describe 'type' do
      context 'with defaults' do
        it 'has type "button"' do
          expect(page).to have_css "button[type='button']"
        end
      end

      context 'when set to known type' do
        where(:type) { [:button, :reset, :submit] }

        let(:options) { { type: type } }

        with_them do
          it 'has the correct type' do
            expect(page).to have_css "button[type='#{type}']"
          end
        end
      end

      context 'when set to unknown type' do
        let(:options) { { type: :madeup } }

        it 'has type "button"' do
          expect(page).to have_css "button[type='button']"
        end
      end
    end

    context 'when it renders a button_to form' do
      let(:button_options) { { data: { testid: 'button-form' } } }
      let(:options) do
        { href: 'some_post/path', method: :post, form: true, button_options: button_options }
      end

      it 'renders a form' do
        expect(page).to have_css "form[method='post'][action='some_post/path']"
      end

      it 'passes the data attributes to the created button' do
        expect(page).to have_css "button[data-testid='button-form']"
      end

      context 'when params are passed in as a button option' do
        let(:button_options) { { params: { some_param: true } } }

        it 'adds the params to the form as hidden inputs' do
          expect(page).to have_css "input[name='some_param'][value='true']", visible: :hidden
        end
      end
    end
  end

  context 'when button component renders a link' do
    let(:options) { { href: 'https://gitlab.com', target: '_self' } }

    it 'renders a link instead of the button' do
      expect(page).not_to have_css "button[type='button']"
      expect(page).to have_css "a[href='https://gitlab.com'][target='_self']"
    end

    context 'with target="_blank"' do
      let(:options) { { href: 'https://gitlab.com', target: '_blank' } }

      it 'adds rel="noopener noreferrer"' do
        expect(page).to have_css "a[href='https://gitlab.com'][target='_blank'][rel='noopener noreferrer']"
      end

      context 'with a value for "rel" already given' do
        let(:options) { { href: 'https://gitlab.com', target: '_blank', button_options: { rel: 'help next' } } }

        it 'keeps given value and adds "noopener noreferrer"' do
          expect(page).to have_css "a[href='https://gitlab.com'][target='_blank'][rel='help next noopener noreferrer']"
        end
      end

      context 'with "noopener noreferrer" for "rel" already given' do
        let(:options) { { href: 'https://gitlab.com', target: '_blank', button_options: { rel: 'noopener noreferrer' } } }

        it 'does not duplicate "noopener noreferrer"' do
          expect(page).to have_css "a[href='https://gitlab.com'][target='_blank'][rel='noopener noreferrer']"
        end
      end
    end

    include_examples 'basic button behavior'

    describe 'type' do
      let(:options) { { href: 'https://example.com', type: :reset } }

      it 'ignores type' do
        expect(page).not_to have_css "[type]"
      end
    end

    describe 'method' do
      where(:method) { [:get, :post, :put, :delete, :patch] }

      let(:options) { { href: 'https://gitlab.com', method: method } }

      with_them do
        it 'has the correct data-method attribute' do
          expect(page).to have_css "a[data-method='#{method}']"
        end
      end
    end
  end
end