Improve specs

Author: blocknotes

spec/dummy/app/admin/authors.rb

@@ -53,7 +53,8 @@
               hint: (object.avatar.attached? ? "Current: #{object.avatar.filename}" : nil)
     end
     f.has_many :profile, allow_destroy: true do |ff|
-      ff.input :description
+      dyn_description = { if: 'not_blank', then: 'addClass red', gtarget: 'body' }
+      ff.input :description, input_html: { data: dyn_description }
     end
     f.actions
   end

spec/dummy/app/admin/posts.rb

@@ -38,14 +38,112 @@
   end
 
   form do |f|
+    def add_field(form, name, type, data, override_options = {})
+      options = { as: type, input_html: { data: data }, hint: data.inspect }
+      options.merge! override_options
+      form.input name, options
+    end
+
     f.inputs 'Post' do
       f.input :author
       f.input :title
-      f.input :description, input_html: { data: { if: 'blank', then: 'setValue no title', target: '#post_category' } }
-      f.input :category
-      f.input :published, input_html: { data: { if: 'not_checked', then: 'hide', target: '.group1' } }
-      f.input :dt, wrapper_html: { class: 'group1' }
-      f.input :position, wrapper_html: { class: 'group1' }
+
+      f.input :data_test, as: :string
+
+      # --- if
+      df111 = { if: 'checked', then: 'addClass red', target: '#post_data_field_111_input label' }
+      add_field(f, :data_field_111, :boolean, df111)
+
+      df121 = { if: 'not_checked', then: 'addClass red', target: '#post_data_field_121_input label' }
+      add_field(f, :data_field_121, :boolean, df121)
+
+      df131 = { if: 'blank', then: 'addClass red', target: '#post_data_field_131_input label' }
+      add_field(f, :data_field_131, :string, df131)
+
+      df132 = { if: 'blank', then: 'addClass red', target: '#post_data_field_132_input label' }
+      add_field(f, :data_field_132, :text, df132)
+
+      df141 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_141_input label' }
+      add_field(f, :data_field_141, :string, df141)
+
+      df142 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_142_input label' }
+      add_field(f, :data_field_142, :text, df142)
+
+      df151 = { if: 'changed', then: 'addClass red', target: '#post_data_field_151_input label' }
+      add_field(f, :data_field_151, :boolean, df151)
+
+      df152 = { if: 'changed', then: 'addClass red', target: '#post_data_field_152_input label' }
+      add_field(f, :data_field_152, :string, df152)
+
+      df153 = { if: 'changed', then: 'addClass red', target: '#post_data_field_153_input label' }
+      add_field(f, :data_field_153, :text, df153)
+
+      # --- eq
+      df161 = { eq: '161', then: 'addClass red', target: '#post_data_field_161_input label' }
+      add_field(f, :data_field_161, :string, df161)
+
+      df162 = { eq: '162', then: 'addClass red', target: '#post_data_field_162_input label' }
+      add_field(f, :data_field_162, :select, df162, collection: [161, 162, 163])
+
+      df163 = { eq: '163', then: 'addClass red', target: '#post_data_field_163_input label' }
+      add_field(f, :data_field_163, :text, df163)
+
+      # --- not
+      df181 = { not: '181', then: 'addClass red', target: '#post_data_field_181_input label' }
+      add_field(f, :data_field_181, :string, df181)
+
+      df182 = { not: '182', then: 'addClass red', target: '#post_data_field_182_input label' }
+      add_field(f, :data_field_182, :select, df182, collection: [181, 182, 183])
+
+      df183 = { not: '183', then: 'addClass red', target: '#post_data_field_183_input label' }
+      add_field(f, :data_field_183, :text, df183)
+
+      # --- function
+      df201 = { function: 'test_fun', then: 'addClass red', target: '#post_data_field_201_input label' }
+      add_field(f, :data_field_201, :string, df201)
+
+      df202 = { function: 'missing_fun', then: 'addClass red', target: '#post_data_field_202_input label' }
+      add_field(f, :data_field_202, :string, df202)
+
+      df203 = { function: 'test_fun2' }
+      add_field(f, :data_field_203, :boolean, df203)
+
+      # --- addClass
+      df211 = { if: 'checked', then: 'addClass red', target: '#post_data_field_211_input label' }
+      add_field(f, :data_field_211, :boolean, df211)
+
+      # --- callback
+      df221 = { if: 'checked', then: 'callback test_callback', args: 'test_callback_arg' }
+      add_field(f, :data_field_221, :boolean, df221)
+
+      df222 = { if: 'checked', then: 'callback missing_callback', args: 'callback arg' }
+      add_field(f, :data_field_222, :boolean, df222)
+
+      # --- setValue
+      df231 = { if: 'checked', then: 'setValue data test', target: '#post_data_test' }
+      add_field(f, :data_field_231, :boolean, df231)
+
+      # --- hide
+      df241 = { if: 'checked', then: 'hide', target: '#post_data_field_241_input .inline-hints' }
+      add_field(f, :data_field_241, :boolean, df241)
+
+      # --- fade
+      df251 = { if: 'checked', then: 'fade', target: '#post_data_field_251_input .inline-hints' }
+      add_field(f, :data_field_251, :boolean, df251)
+
+      # --- slide
+      df261 = { if: 'checked', then: 'slide', target: '#post_data_field_261_input .inline-hints' }
+      add_field(f, :data_field_261, :boolean, df261)
+
+      # --- gtarget
+      df301 = { if: 'checked', then: 'addClass red', gtarget: 'body.active_admin' }
+      add_field(f, :data_field_301, :boolean, df301)
+
+      # This will not work - here only for testing:
+      df302 = { if: 'checked', then: 'addClass red', target: 'body.active_admin' }
+      add_field(f, :data_field_302, :boolean, df302)
+
+      # ---
     end
 
     f.inputs 'Tags' do

spec/dummy/app/assets/javascripts/active_admin.js

@@ -1,3 +1,15 @@
 //= require active_admin/base
 
 //= require activeadmin/dynamic_fields
+
+function test_fun(el) {
+  return el.val() == 'test'
+}
+
+function test_fun2(el) {
+  el.toggleClass('red', !el.is(':checked'))
+}
+
+function test_callback(args) {
+  $('body').addClass(args)
+}

spec/dummy/app/models/post.rb

@@ -10,11 +10,34 @@ class Post < ApplicationRecord
   has_many :post_tags, inverse_of: :post, dependent: :destroy
   has_many :tags, through: :post_tags
 
+  serialize :description, JSON
+
+  after_initialize -> { self.description = {} if description.nil? }
+
   validates :title, allow_blank: false, presence: true
 
   scope :published, -> { where(published: true) }
   scope :recents, -> { where('created_at > ?', Date.today - 8.month) }
 
+  def method_missing(method_name, *arguments, &_block)
+    method = method_name.to_s
+    if method.start_with? 'data_'
+      method.gsub! /\Adata_/, ''
+      if method.end_with? '='
+        self.description ||= {}
+        description.send(:[]=, method.chop, arguments.any? ? arguments[0] : nil)
+      else
+        description&.send(:[], method)
+      end
+    else
+      super
+    end
+  end
+
+  def respond_to_missing?(method_name, _include_private = false) # rubocop:disable Style/OptionalBooleanParameter
+    method_name.to_s.start_with?('data_') ? true : super
+  end
+
   def short_title
     title.truncate 10
   end

spec/system/dynamic_fields_spec.rb

@@ -14,36 +14,150 @@
   end
 
   context 'with some dynamic fields' do
-    it 'toggles the .group1 elements when clicking on the checkbox' do
+    it 'checks the conditions and actions' do
       visit "/admin/posts/#{post.id}/edit"
 
-      expect(page).to have_css('#post_published[data-if="not_checked"][data-then="hide"][data-target=".group1"]')
+      expect(page).to have_css('#post_data_field_111[data-if="checked"][data-then="addClass red"][data-target="#post_data_field_111_input label"]') # rubocop:disable Layout/LineLength
 
-      expect(find('#post_published')).not_to be_checked
-      expect(page).to have_css('#post_dt_input', visible: :hidden)
-      expect(page).to have_css('#post_position_input', visible: :hidden)
+      # --- if
+      expect(page).not_to have_css('#post_data_field_111_input label.red')
+      find('#post_data_field_111').click
+      expect(page).to have_css('#post_data_field_111_input label.red')
 
-      find('#post_published').set(true)
-      expect(page).to have_css('#post_dt_input', visible: :visible)
-      expect(page).to have_css('#post_position_input', visible: :visible)
+      expect(page).to have_css('#post_data_field_121_input label.red')
+      find('#post_data_field_121').click
+      expect(page).not_to have_css('#post_data_field_121_input label.red')
 
-      find('#post_published').set(false)
-      expect(page).to have_css('#post_dt_input', visible: :hidden)
-      expect(page).to have_css('#post_position_input', visible: :hidden)
+      expect(page).to have_css('#post_data_field_132_input label.red')
+      fill_in('post_data_field_132', with: 'something')
+      find('body').click
+      expect(page).not_to have_css('#post_data_field_132_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_141_input label.red')
+      fill_in('post_data_field_141', with: 'something')
+      find('body').click
+      expect(page).to have_css('#post_data_field_141_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_142_input label.red')
+      fill_in('post_data_field_142', with: 'something')
+      find('body').click
+      expect(page).to have_css('#post_data_field_142_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_151_input label.red')
+      find('#post_data_field_151').click
+      expect(page).to have_css('#post_data_field_151_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_152_input label.red')
+      fill_in('post_data_field_152', with: 'something')
+      find('body').click
+      expect(page).to have_css('#post_data_field_152_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_153_input label.red')
+      fill_in('post_data_field_153', with: 'something')
+      find('body').click
+      expect(page).to have_css('#post_data_field_153_input label.red')
+
+      # --- eq
+      expect(page).not_to have_css('#post_data_field_161_input label.red')
+      fill_in('post_data_field_161', with: '161')
+      find('body').click
+      expect(page).to have_css('#post_data_field_161_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_162_input label.red')
+      select('162', from: 'post_data_field_162')
+      expect(page).to have_css('#post_data_field_162_input label.red')
+
+      expect(page).not_to have_css('#post_data_field_163_input label.red')
+      fill_in('post_data_field_163', with: '163')
+      find('body').click
+      expect(page).to have_css('#post_data_field_163_input label.red')
+
+      # --- not
+      expect(page).to have_css('#post_data_field_181_input label.red')
+      fill_in('post_data_field_181', with: '181')
+      find('body').click
+      expect(page).not_to have_css('#post_data_field_181_input label.red')
+
+      expect(page).to have_css('#post_data_field_182_input label.red')
+      select('182', from: 'post_data_field_182')
+      expect(page).not_to have_css('#post_data_field_182_input label.red')
+
+      expect(page).to have_css('#post_data_field_183_input label.red')
+      fill_in('post_data_field_183', with: '183')
+      find('body').click
+      expect(page).not_to have_css('#post_data_field_183_input label.red')
+
+      # --- function
+      expect(page).not_to have_css('#post_data_field_201_input label.red')
+      fill_in('post_data_field_201', with: 'test')
+      find('body').click
+      expect(page).to have_css('#post_data_field_201_input label.red')
+
+      expect(page).to have_css('#post_data_field_202[data-df-errors="custom function not found"]')
+
+      expect(page).to have_css('#post_data_field_203.red')
+      find('#post_data_field_203').click
+      expect(page).not_to have_css('#post_data_field_203.red')
+
+      # --- addClass
+      expect(page).not_to have_css('#post_data_field_211_input label.red')
+      find('#post_data_field_211').click
+      expect(page).to have_css('#post_data_field_211_input label.red')
+      find('#post_data_field_211').click
+      expect(page).not_to have_css('#post_data_field_211_input label.red')
+
+      # --- callback
+      expect(page).not_to have_css('body.test_callback_arg')
+      find('#post_data_field_221').click
+      expect(page).to have_css('body.test_callback_arg')
+
+      find('#post_data_field_222').click
+      expect(page).to have_css('#post_data_field_222[data-df-errors="callback function not found"]')
+
+      # --- setValue
+      expect(find('#post_data_test').value).to be_empty
+      find('#post_data_field_231').click
+      expect(find('#post_data_test').value).to eq 'data test'
+
+      # --- hide
+      expect(page).to have_css('#post_data_field_241_input .inline-hints', visible: :visible)
+      find('#post_data_field_241').click
+      expect(page).to have_css('#post_data_field_241_input .inline-hints', visible: :hidden)
+
+      # --- fade
+      expect(page).to have_css('#post_data_field_251_input .inline-hints', visible: :visible)
+      find('#post_data_field_251').click
+      expect(page).to have_css('#post_data_field_251_input .inline-hints', visible: :hidden)
+
+      # --- slide
+      expect(page).to have_css('#post_data_field_261_input .inline-hints', visible: :visible)
+      find('#post_data_field_261').click
+      expect(page).to have_css('#post_data_field_261_input .inline-hints', visible: :hidden)
+
+      # --- gtarget
+      expect(page).not_to have_css('body.active_admin.red')
+      find('#post_data_field_301').click
+      expect(page).to have_css('body.active_admin.red')
+      find('#post_data_field_301').click
+      expect(page).not_to have_css('body.active_admin.red')
+
+      find('#post_data_field_302').click # checks that using simply "target" will not work
+      expect(page).not_to have_css('body.active_admin.red')
     end
+  end
 
-    it 'changes the value of target when the source element is blank' do
-      visit "/admin/posts/#{post.id}/edit"
+  context 'with some dynamic fields on a nested resource' do
+    it 'checks the conditions and actions' do
+      visit '/admin/authors/new'
 
-      expect(page).to have_css(
-        '#post_description[data-if="blank"][data-then="setValue no title"][data-target="#post_category"]'
-      )
-      expect(find('#post_category').value).to eq 'no title'
-      find('#post_category').set('...')
-      find('#post_description').set('...')
-      expect(find('#post_category').value).to eq '...'
-      find('#post_description').set('')
-      expect(find('#post_category').value).to eq 'no title'
+      expect(page).not_to have_css('body.active_admin.red')
+      find('body.active_admin .profile.has_many_container .button.has_many_add').click
+      fill_in('author_profile_attributes_description', with: 'Some content')
+      find('body').click
+      expect(page).to have_css('body.active_admin.red')
+      fill_in('author_profile_attributes_description', with: '   ')
+      find('body').click
+      expect(page).not_to have_css('body.active_admin.red')
     end
   end
 end