spec/components/pajamas/banner_component_spec.rb


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

# frozen_string_literal: true
require "spec_helper"

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

  let(:title) { "Banner title" }
  let(:content) { "Banner content"}
  let(:options) { {} }

  describe 'basic usage' do
    before do
      render_inline(subject) do |c|
        c.title { title }
        content
      end
    end

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

    it 'renders its title' do
      expect(rendered_component).to have_css "h1[class='gl-banner-title']", text: title
    end

    it 'renders a close button' do
      expect(rendered_component).to have_css "button.gl-banner-close"
    end

    describe 'button_text and button_link' do
      let(:options) { { button_text: 'Learn more', button_link: '/learn-more' } }

      it 'define the primary action' do
        expect(rendered_component).to have_css "a.btn-confirm.gl-button[href='/learn-more']", text: 'Learn more'
      end
    end

    describe 'banner_options' do
      let(:options) { { banner_options: { class: "baz", data: { foo: "bar" } } } }

      it 'are on the banner' do
        expect(rendered_component).to have_css ".gl-banner.baz[data-foo='bar']"
      end

      context 'with custom classes' do
        let(:options) { { variant: :introduction, banner_options: { class: 'extra special' } } }

        it 'don\'t conflict with internal banner_classes' do
          expect(rendered_component).to have_css '.extra.special.gl-banner-introduction.gl-banner'
        end
      end
    end

    describe 'close_options' do
      let(:options) { { close_options: { class: "js-foo", data: { uid: "123" } } } }

      it 'are on the close button' do
        expect(rendered_component).to have_css "button.gl-banner-close.js-foo[data-uid='123']"
      end
    end

    describe 'embedded' do
      context 'by default (false)' do
        it 'keeps the banner\'s borders' do
          expect(rendered_component).not_to have_css ".gl-banner.gl-border-none"
        end
      end

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

        it 'removes the banner\'s borders' do
          expect(rendered_component).to have_css ".gl-banner.gl-border-none"
        end
      end
    end

    describe 'variant' do
      context 'by default (promotion)' do
        it 'applies no variant class' do
          expect(rendered_component).to have_css "[class='gl-banner']"
        end
      end

      context 'when set to introduction' do
        let(:options) { { variant: :introduction } }

        it "applies the introduction class to the banner" do
          expect(rendered_component).to have_css ".gl-banner.gl-banner-introduction"
        end

        it "applies the confirm class to the close button" do
          expect(rendered_component).to have_css ".gl-banner-close.btn-confirm.btn-confirm-tertiary"
        end
      end

      context 'when set to unknown variant' do
        let(:options) { { variant: :foobar } }

        it 'ignores the unknown variant' do
          expect(rendered_component).to have_css "[class='gl-banner']"
        end
      end
    end

    describe 'illustration' do
      it 'has none by default' do
        expect(rendered_component).not_to have_css ".gl-banner-illustration"
      end

      context 'with svg_path' do
        let(:options) { { svg_path: 'logo.svg' } }

        it 'renders an image as illustration' do
          expect(rendered_component).to have_css ".gl-banner-illustration img"
        end
      end
    end
  end

  context 'with illustration slot' do
    before do
      render_inline(subject) do |c|
        c.title { title }
        c.illustration { "<svg></svg>".html_safe }
        content
      end
    end

    it 'renders the slot content as illustration' do
      expect(rendered_component).to have_css ".gl-banner-illustration svg"
    end

    context 'and conflicting svg_path' do
      let(:options) { { svg_path: 'logo.svg' } }

      it 'uses the slot content' do
        expect(rendered_component).to have_css ".gl-banner-illustration svg"
        expect(rendered_component).not_to have_css ".gl-banner-illustration img"
      end
    end
  end

  context 'with primary_action slot' do
    before do
      render_inline(subject) do |c|
        c.title { title }
        c.primary_action { "<a class='special' href='#'>Special</a>".html_safe }
        content
      end
    end

    it 'renders the slot content as the primary action' do
      expect(rendered_component).to have_css "a.special", text: 'Special'
    end

    context 'and conflicting button_text and button_link' do
      let(:options) { { button_text: 'Not special', button_link: '/' } }

      it 'uses the slot content' do
        expect(rendered_component).to have_css "a.special[href='#']", text: 'Special'
        expect(rendered_component).not_to have_css "a.btn[href='/']"
      end
    end
  end
end