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
|
# frozen_string_literal: true
require "spec_helper"
RSpec.describe Pajamas::BadgeComponent, type: :component do
let(:text) { "Hello" }
let(:options) { {} }
let(:html_options) { {} }
before do
render_inline(described_class.new(text, **options, **html_options))
end
describe "text param" do
it "is shown inside the badge" do
expect(page).to have_css ".gl-badge", text: text
end
end
describe "content slot" do
it "can be used instead of the text param" do
render_inline(described_class.new) do
"Slot content"
end
expect(page).to have_css ".gl-badge", text: "Slot content"
end
it "takes presendence over the text param" do
render_inline(described_class.new(text)) do
"Slot wins."
end
expect(page).to have_css ".gl-badge", text: "Slot wins."
end
end
describe "options" do
describe "icon" do
let(:options) { { icon: :tanuki } }
it "adds the correct icon and margin" do
expect(page).to have_css ".gl-icon.gl-badge-icon.gl-mr-2[data-testid='tanuki-icon']"
end
end
describe "icon_classes" do
let(:options) { { icon: :tanuki, icon_classes: icon_classes } }
context "as string" do
let(:icon_classes) { "js-special-badge-icon js-extra-special" }
it "combines custom classes and component classes" do
expect(page).to have_css \
".gl-icon.gl-badge-icon.gl-mr-2.js-special-badge-icon.js-extra-special[data-testid='tanuki-icon']"
end
end
context "as array" do
let(:icon_classes) { %w[js-special-badge-icon js-extra-special] }
it "combines custom classes and component classes" do
expect(page).to have_css \
".gl-icon.gl-badge-icon.gl-mr-2.js-special-badge-icon.js-extra-special[data-testid='tanuki-icon']"
end
end
end
describe "icon_only" do
let(:options) { { icon: :tanuki, icon_only: true } }
it "adds no extra margin to the icon" do
expect(page).not_to have_css ".gl-icon.gl-mr-2"
end
it "adds the text as ARIA label" do
expect(page).to have_css ".gl-badge[aria-label='#{text}'][role='img']"
end
end
describe "href" do
let(:options) { { href: "/foo" } }
it "makes the a badge a link" do
expect(page).to have_link text, class: "gl-badge", href: "/foo"
end
end
describe "size" do
where(:size) { [:sm, :md, :lg] }
with_them do
let(:options) { { size: size } }
it "adds size class" do
expect(page).to have_css ".gl-badge.#{size}"
end
end
context "with unknown size" do
let(:options) { { size: :xxl } }
it "adds the default size class" do
expect(page).to have_css ".gl-badge.md"
end
end
end
describe "variant" do
where(:variant) { [:muted, :neutral, :info, :success, :warning, :danger] }
with_them do
let(:options) { { variant: variant } }
it "adds variant class" do
expect(page).to have_css ".gl-badge.badge-#{variant}"
end
end
context "with unknown variant" do
let(:options) { { variant: :foo } }
it "adds the default variant class" do
expect(page).to have_css ".gl-badge.badge-muted"
end
end
end
end
describe "HTML options" do
let(:html_options) { { id: "badge-33", data: { foo: "bar" } } }
it "get added as HTML attributes" do
expect(page).to have_css ".gl-badge#badge-33[data-foo='bar']"
end
it "can be combined with component options in no particular order" do
render_inline(described_class.new(text, id: "badge-34", variant: :success, data: { foo: "baz" }, size: :sm))
expect(page).to have_css ".gl-badge.badge-success.sm#badge-34[data-foo='baz']"
end
context "with custom CSS classes" do
let(:html_options) { { id: "badge-35", class: "js-special-badge" } }
it "combines custom classes and component classes" do
expect(page).to have_css ".gl-badge.js-special-badge#badge-35"
end
end
end
end
|
