Add basic specs for all components

magma-labs · Feb 26, 2024 · 3a30977 · 3a30977
1 parent 4df21f5
commit 3a30977
Show file tree

Hide file tree

Showing 39 changed files with 512 additions and 221 deletions.
diff --git a/Gemfile b/Gemfile
@@ -5,7 +5,13 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 gemspec
 
 group :development, :test do
+  # gems needed by the dummy app
+  gem "sprockets-rails"
+  gem "importmap-rails"
+  gem "sqlite3"
+
   gem "rspec-rails"
   gem "silent_stream"
   gem "debug", ">= 1.0.0"
+  gem "capybara"
 end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -2,11 +2,12 @@ PATH
   remote: .
   specs:
     mcm (0.1.0)
+      activestorage (>= 6.0.0)
       bootstrap_form (~> 4.0)
       haml-rails
-      image_processing
+      image_processing (~> 1.2)
       rails (>= 6.0.0)
-      view_component
+      view_component (>= 2.7.0)
 
 GEM
   remote: https://rubygems.org/
@@ -85,12 +86,23 @@ GEM
       minitest (>= 5.1)
       mutex_m
       tzinfo (~> 2.0)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
     base64 (0.2.0)
     bigdecimal (3.1.5)
     bootstrap_form (4.5.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
     builder (3.2.4)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
     concurrent-ruby (1.2.2)
     connection_pool (2.4.1)
     crass (1.0.6)
@@ -119,6 +131,10 @@ GEM
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (2.0.1)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.7.1)
     irb (1.11.1)
       rdoc
@@ -132,6 +148,7 @@ GEM
       net-pop
       net-smtp
     marcel (1.0.2)
+    matrix (0.4.2)
     method_source (1.0.0)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
@@ -161,6 +178,7 @@ GEM
       racc (~> 1.4)
     psych (5.1.2)
       stringio
+    public_suffix (5.0.4)
     racc (1.7.3)
     rack (3.0.8)
     rack-session (2.0.0)
@@ -202,6 +220,7 @@ GEM
     rake (13.1.0)
     rdoc (6.6.2)
       psych (>= 4.0.0)
+    regexp_parser (2.9.0)
     reline (0.4.2)
       io-console (~> 0.5)
     rspec-core (3.12.2)
@@ -225,6 +244,19 @@ GEM
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     silent_stream (1.0.6)
+    sprockets (4.2.1)
+      concurrent-ruby (~> 1.0)
+      rack (>= 2.2.4, < 4)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.7.2-aarch64-linux)
+    sqlite3 (1.7.2-arm-linux)
+    sqlite3 (1.7.2-arm64-darwin)
+    sqlite3 (1.7.2-x86-linux)
+    sqlite3 (1.7.2-x86_64-darwin)
+    sqlite3 (1.7.2-x86_64-linux)
     stringio (3.1.0)
     temple (0.10.3)
     thor (1.3.0)
@@ -240,6 +272,8 @@ GEM
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
     zeitwerk (2.6.12)
 
 PLATFORMS
@@ -251,10 +285,14 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  capybara
   debug (>= 1.0.0)
+  importmap-rails
   mcm!
   rspec-rails
   silent_stream
+  sprockets-rails
+  sqlite3
 
 BUNDLED WITH
    2.5.4
diff --git a/app/components/mcm/banner_component.rb b/app/components/mcm/banner_component.rb
@@ -14,11 +14,11 @@ def variant_for(index)
     end
 
     def background_image
-      @component.assets.first.attachment
+      @component.assets.first&.attachment
     end
 
     def cta_image
-      @component.assets.second.attachment
+      @component.assets.second&.attachment
     end
   end
 end
diff --git a/app/components/mcm/banner_component/banner_component.html+admin.haml b/app/components/mcm/banner_component/banner_component.html+admin.haml
@@ -1,30 +1,31 @@
-- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
-  .row
-    .col-6= metadata_form.text_field :title, required: true
-    .col-6= metadata_form.select :title_color, available_text_colors, required: true
+- render "mcm/component_form", component: @component do |component_form|
+  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
+    .row
+      .col-6= metadata_form.text_field :title, required: true
+      .col-6= metadata_form.select :title_color, available_text_colors, required: true
 
-  = metadata_form.label :content
-  = metadata_form.hidden_field :content, required: true
-  %trix-editor{ input: 'components_page_metadata_content' }
+    = metadata_form.label :content
+    = metadata_form.hidden_field :content, required: true
+    %trix-editor{ input: 'components_page_metadata_content' }
 
-  .row.mt-3
-    .col-6
-      = metadata_form.select :content_color, available_text_colors
-    .col-6
-      = metadata_form.select :content_alignment, text_alignments, required: true
-  .row
-    .col-6
-      = metadata_form.text_field :cta, required: true, label: 'CTA'
-    .col-6
-      = metadata_form.text_field :cta_url, required: true, label: 'URL'
-  .row
-    .col-6
-      = metadata_form.select :button_color, available_button_colors
+    .row.mt-3
+      .col-6
+        = metadata_form.select :content_color, available_text_colors
+      .col-6
+        = metadata_form.select :content_alignment, text_alignments, required: true
+    .row
+      .col-6
+        = metadata_form.text_field :cta, required: true, label: 'CTA'
+      .col-6
+        = metadata_form.text_field :cta_url, required: true, label: 'URL'
+    .row
+      .col-6
+        = metadata_form.select :button_color, available_button_colors
 
-- 2.times { @component_form.object.assets.build } if @component_form.object.assets.empty?
-- @component_form.fields_for :assets do |assets_form|
-  = assets_form.hidden_field :position, value: assets_form.index + 1
-  = render Mcm::ImageComponent.new(form: assets_form,
-                                   styles: image_preview_styles(variant_for(assets_form.index)),
-                                   variant: variant_for(assets_form.index),
-                                   label: t("custom_pages.components.banner.image_#{assets_form.index + 1}"))
+  - 2.times { @component.assets.build } if @component.assets.empty?
+  - component_form.fields_for :assets do |assets_form|
+    = assets_form.hidden_field :position, value: assets_form.index + 1
+    = render Mcm::ImageComponent.new(form: assets_form,
+                                     styles: image_preview_styles(variant_for(assets_form.index)),
+                                     variant: variant_for(assets_form.index),
+                                     label: t("custom_pages.components.banner.image_#{assets_form.index + 1}"))
diff --git a/app/components/mcm/base_component.rb b/app/components/mcm/base_component.rb
@@ -4,9 +4,8 @@ def self.component_type
       "content"
     end
 
-    def initialize(component:, component_form: nil)
+    def initialize(component:)
       @component = component
-      @component_form = component_form
     end
 
     def defaults
@@ -18,6 +17,14 @@ def image_preview_styles
       "max-width:400px;max-height:400px;"
     end
 
+    def height
+      @component.metadata.height.to_i.positive? ? "#{@component.metadata.height}px" : 'auto'
+    end
+
+    def background_color
+      @component.metadata.background_color
+    end
+
     def title_classes
       @component.metadata.values(:title_color, :title_alignment).join(' ')
     end

diff --git a/app/components/mcm/columns_component.rb b/app/components/mcm/columns_component.rb
@@ -8,10 +8,6 @@ def full_width?
       @component.metadata.full_width.eql?('1')
     end
 
-    def height
-      @component.metadata.height.to_i.positive? ? "#{@component.metadata.height}px" : 'auto'
-    end
-
     def title_classes
       @component.metadata.values(:section_title_color, :section_title_alignment).join(' ')
     end

diff --git a/app/components/mcm/columns_component/columns_component.html+admin.haml b/app/components/mcm/columns_component/columns_component.html+admin.haml
@@ -1,14 +1,15 @@
-- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
-  = metadata_form.text_field :section_title, help: t('custom_pages.messages.leave_empty')
-  .row
-    .col-6
-      = metadata_form.select :section_title_alignment, text_alignments, required: true
-    .col-6
-      = metadata_form.select :section_title_color, available_text_colors, required: true
+- render "mcm/component_form", component: @component do |component_form|
+  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
+    = metadata_form.text_field :section_title, help: t('custom_pages.messages.leave_empty')
+    .row
+      .col-6
+        = metadata_form.select :section_title_alignment, text_alignments, required: true
+      .col-6
+        = metadata_form.select :section_title_color, available_text_colors, required: true
 
-  .row
-    .col-6
-      = metadata_form.text_field :background_color, label: t('custom_pages.components.background_color'), help: '#ffffff'
-    .col-6
-      = metadata_form.number_field :height, label: t('custom_pages.components.height.label'), help: t('custom_pages.components.height.help')
-  = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch
+    .row
+      .col-6
+        = metadata_form.text_field :background_color, label: t('custom_pages.components.background_color'), help: '#ffffff'
+      .col-6
+        = metadata_form.number_field :height, label: t('custom_pages.components.height.label'), help: t('custom_pages.components.height.help')
+    = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch
diff --git a/app/components/mcm/columns_component/columns_component.html.haml b/app/components/mcm/columns_component/columns_component.html.haml
@@ -1,26 +1,8 @@
-.py-5{ class: @component.full_width? ? 'container-fluid' : 'container' }
+%section{ class: @component.full_width? ? "container-fluid" : "container", style: "background:#{background_color}" }
   - if @component.metadata.section_title.present?
-    %h2{ class: title_classes }
-      = @component.section_title
-  .row.align-content-center.d-flex{ id: "row-#{@component.id}" }
-    - @component.children.active.each do |component|
-      .col-12.col-md.align-items-center.d-flex.flex-wrap
-        - begin
-          = render component.view_component
-        - rescue ActionView::Template::Error => e
-          - Rails.logger.error(e)
-          .container
-            %h4= t('custom_pages.messages.something_went_wrong')
-            = link_to t('custom_pages.actions.edit_component'),
-                main_app.edit_admin_custom_page_component_component_path(@component.page,
-                                                                        @component, component)
-- if @component.metadata.background_color.present?
-  :css
-    #section-#{@component.id} {
-      background-color: #{@component.metadata.background_color};
-    }
+    %h2{ class: title_classes }= @component.metadata.section_title
 
-:css
-  #row-#{@component.id} {
-    height: #{height};
-  }
+  .d-flex.align-content-center{ style: "height:#{height}px" }
+    - @component.children.active.each do |component|
+      .d-flex.align-items-center.flex-wrap
+        = render "mcm/child_component", component: component
diff --git a/app/components/mcm/hero_image_component/hero_image_component.html+admin.haml b/app/components/mcm/hero_image_component/hero_image_component.html+admin.haml
@@ -1,3 +1,4 @@
-- @component.assets.first_or_initialize
-- @component_form.fields_for :assets do |assets_form|
-  = render Mcm::ImageComponent.new(form: assets_form, variant: :desktop, styles: image_preview_styles)
+- render "mcm/component_form", component: @component do |component_form|
+  - @component.assets.first_or_initialize
+  - component_form.fields_for :assets do |assets_form|
+    = render Mcm::ImageComponent.new(form: assets_form, variant: :desktop, styles: image_preview_styles)
diff --git a/app/components/mcm/hero_image_component/hero_image_component.html.haml b/app/components/mcm/hero_image_component/hero_image_component.html.haml
@@ -1,2 +1,4 @@
 .p-0.w-100{ class: "image_hero_#{@component.assets.first.id}" }
-= render Mcm::ImageComponent.new(asset: @component.assets.first, class_name: "image_hero_#{@component.assets.first.id}", height: @component.parent.height)
+= render Mcm::ImageComponent.new(asset: @component.assets.first,
+                                 class_name: "image_hero_#{@component.assets.first.id}",
+                                 height: @component.parent.metadata.height)
diff --git a/..._image_title_content_cta_component/hero_image_title_content_cta_component.html+admin.haml b/..._image_title_content_cta_component/hero_image_title_content_cta_component.html+admin.haml
@@ -1,35 +1,36 @@
-- @component.assets.first_or_initialize
-- @component_form.fields_for :assets do |assets_form|
-  = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles)
+- render "mcm/component_form", component: @component do |component_form|
+  - @component.assets.first_or_initialize
+  - component_form.fields_for :assets do |assets_form|
+    = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles)
 
-- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
-  .row
-    .col-6
-      = metadata_form.text_field :title, required: true
-    .col-6
-      = metadata_form.select :title_color, available_text_colors, required: true
+  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
+    .row
+      .col-6
+        = metadata_form.text_field :title, required: true
+      .col-6
+        = metadata_form.select :title_color, available_text_colors, required: true
 
-  = metadata_form.label :content
-  = metadata_form.hidden_field :content, required: true
-  %trix-editor{ input: 'components_page_metadata_content' }
+    = metadata_form.label :content
+    = metadata_form.hidden_field :content, required: true
+    %trix-editor{ input: 'components_page_metadata_content' }
 
-  .row.mt-3
-    .col-6
-      = metadata_form.select :content_alignment, text_alignments, required: true
-    .col-6
-      = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true
-  .row
-    .col-6
-      = metadata_form.select :content_color, available_text_colors, required: true
-    .col-6
-      = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true
-  .row
-    .col-6
-      = metadata_form.text_field :cta
-    .col-6
-      = metadata_form.text_field :cta_url
-  .row
-    .col-6
-      = metadata_form.select :button_color, available_button_colors
-    .col-6
-      = metadata_form.select :button_alignment, text_alignments, required: true
+    .row.mt-3
+      .col-6
+        = metadata_form.select :content_alignment, text_alignments, required: true
+      .col-6
+        = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true
+    .row
+      .col-6
+        = metadata_form.select :content_color, available_text_colors, required: true
+      .col-6
+        = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true
+    .row
+      .col-6
+        = metadata_form.text_field :cta
+      .col-6
+        = metadata_form.text_field :cta_url
+    .row
+      .col-6
+        = metadata_form.select :button_color, available_button_colors
+      .col-6
+        = metadata_form.select :button_alignment, text_alignments, required: true