diff options
Diffstat (limited to 'spec/components')
-rw-r--r-- | spec/components/layouts/horizontal_section_component_spec.rb | 88 | ||||
-rw-r--r-- | spec/components/previews/layouts/horizontal_section_component_preview.rb | 22 |
2 files changed, 110 insertions, 0 deletions
diff --git a/spec/components/layouts/horizontal_section_component_spec.rb b/spec/components/layouts/horizontal_section_component_spec.rb new file mode 100644 index 00000000000..efc48213911 --- /dev/null +++ b/spec/components/layouts/horizontal_section_component_spec.rb @@ -0,0 +1,88 @@ +# frozen_string_literal: true +require "spec_helper" + +RSpec.describe Layouts::HorizontalSectionComponent, type: :component do + let(:title) { 'Naming, visibility' } + let(:description) { 'Update your group name, description, avatar, and visibility.' } + let(:body) { 'This is where the settings go' } + + describe 'slots' do + it 'renders title' do + render_inline described_class.new do |c| + c.title { title } + c.body { body } + end + + expect(page).to have_css('h4', text: title) + end + + it 'renders body slot' do + render_inline described_class.new do |c| + c.title { title } + c.body { body } + end + + expect(page).to have_content(body) + end + + context 'when description slot is provided' do + before do + render_inline described_class.new do |c| + c.title { title } + c.description { description } + c.body { body } + end + end + + it 'renders description' do + expect(page).to have_css('p', text: description) + end + end + + context 'when description slot is not provided' do + before do + render_inline described_class.new do |c| + c.title { title } + c.body { body } + end + end + + it 'does not render description' do + expect(page).not_to have_css('p', text: description) + end + end + end + + describe 'arguments' do + describe 'border' do + it 'defaults to true and adds gl-border-b CSS class' do + render_inline described_class.new do |c| + c.title { title } + c.body { body } + end + + expect(page).to have_css('.gl-border-b') + end + + it 'does not add gl-border-b CSS class when set to false' do + render_inline described_class.new(border: false) do |c| + c.title { title } + c.body { body } + end + + expect(page).not_to have_css('.gl-border-b') + end + end + + describe 'options' do + it 'adds options to wrapping element' do + render_inline described_class.new(options: { data: { testid: 'foo-bar' }, class: 'foo-bar' }) do |c| + c.title { title } + c.body { body } + end + + expect(page).to have_css('.foo-bar[data-testid="foo-bar"]') + end + end + end +end diff --git a/spec/components/previews/layouts/horizontal_section_component_preview.rb b/spec/components/previews/layouts/horizontal_section_component_preview.rb new file mode 100644 index 00000000000..cc7e8c8c2b1 --- /dev/null +++ b/spec/components/previews/layouts/horizontal_section_component_preview.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +module Layouts + class HorizontalSectionComponentPreview < ViewComponent::Preview + # @param border toggle + # @param title text + # @param description text + # @param body text + def default( + border: true, + title: 'Naming, visibility', + description: 'Update your group name, description, avatar, and visibility.', + body: 'Settings fields here.' + ) + render(::Layouts::HorizontalSectionComponent.new(border: border, options: { class: 'gl-mb-6 gl-pb-3' })) do |c| + c.title { title } + c.description { description } + c.body { body } + end + end + end +end |