[FEATURE] added cable component, updated async, added/fixed tests

Author: Nils Henning

app/concepts/matestack/ui/core/cable/cable.haml

@@ -1,6 +1,4 @@
-%component{dynamic_tag_attributes}
+%component{dynamic_tag_attributes.merge('initial-template': "#{render_content}")}
   %div{class: "matestack-cable-component-container", "v-bind:class": "{ 'loading': loading === true }"}
-    %div{class: "matestack-cable-component-wrapper", "v-if": "cableTemplate == null", "v-bind:class": "{ 'loading': loading === true }"}
-      = render_content
     %div{class: "matestack-cable-component-wrapper", "v-if": "cableTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
       %v-runtime-template{":template":"cableTemplate"}

app/concepts/matestack/ui/core/cable/cable.js

@@ -5,6 +5,9 @@ import componentMixin from '../component/component'
 
 const componentDef = {
   mixins: [componentMixin],
+  props: {
+    initialTemplate: String,
+  },
   data: function(){
     return {
       cableTemplate: null,
@@ -66,11 +69,12 @@ const componentDef = {
       return payload.data
     },
   },
-  created: function () {
-    this.cableTemplateDomElement = document.querySelector("#" + this.componentConfig["id"])
-    this.cableTemplate = this.cableTemplateDomElement.outerHTML
+  mounted: function() {
     const self = this
-    var events = this.componentConfig['append_on']
+    var dom_elem = document.createElement('div')
+    dom_elem.innerHTML = this.initialTemplate
+    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.componentConfig["id"])
+    this.cableTemplate = this.cableTemplateDomElement.outerHTML
     this.registerEvents(this.componentConfig['append_on'], self.append)
     this.registerEvents(this.componentConfig['prepend_on'], self.prepend)
     this.registerEvents(this.componentConfig['delete_on'], self.delete)
@@ -79,6 +83,7 @@ const componentDef = {
   },
   beforeDestroy: function() {
     const self = this
+    this.cableTemplate = null
     this.removeEvents(this.componentConfig['append_on'], self.append)
     this.removeEvents(this.componentConfig['prepend_on'], self.prepend)
     this.removeEvents(this.componentConfig['delete_on'], self.delete)

app/concepts/matestack/ui/core/cable/cable.rb

@@ -4,10 +4,10 @@ class Cable < Matestack::Ui::Core::Component::Dynamic
 
     requires :id
 
-    def response
+    def setup
       component_config[:component_key] = id
     end
-
+    
     def show
       render :cable
     end

app/concepts/matestack/ui/core/component/base.rb

@@ -165,8 +165,10 @@ def prepare
     def params
       if @matestack_context.present? && @matestack_context[:controller].present?
         @matestack_context[:controller].params
-      else
+      elsif context.present? && context[:params]
         context[:params]
+      else
+        ActionController::Parameters.new({})
       end
     end
 

app/helpers/matestack/ui/core/application_helper.rb

@@ -99,7 +99,8 @@ def responder_for(*args)
         end
 
         def matestack_component(component, options = {}, &block)
-          context = (options[:matestack_context] ||= {}).merge(controller: @_controller || self)
+          controller = (self.class <= ActionController::Base) ? self : @_controller
+          context = (options[:matestack_context] ||= {}).merge(controller: controller)
           Matestack::Ui::Core::Component::Base
             .new(options.merge(matestack_context: context))
             .send(component, options.merge(matestack_context: context), &block).to_s

spec/dummy/app/matestack/components/legacy_views/pages/isolated.rb

@@ -1,12 +1,13 @@
 class Components::LegacyViews::Pages::Isolated < Matestack::Ui::IsolatedComponent
 
   def response
+    time = DateTime.now.strftime('%Q')
     div class: 'my-isolated' do
-      plain DateTime.now.strftime('%Q')
+      plain time
     end
     hr
     async rerender_on: 'async_update_time', id: 'foobar' do
-      paragraph id: 'async-time', text: DateTime.now.strftime('%Q')
+      paragraph id: 'async-time', text: time
     end
   end
 

spec/dummy/app/matestack/demo/pages/my_first_page.rb

@@ -10,17 +10,17 @@ def prepare
   end
 
   def response
-    heading size: 2, text: "This is Page 1"
+    # heading size: 2, text: "This is Page 1"
 
-    div id: "some-id", class: "some-class" do
-      plain "hello from page 1"
-    end
+    # div id: "some-id", class: "some-class" do
+    #   plain "hello from page 1"
+    # end
 
 
-    my_card
-    my_demo_card
+    # my_card
+    # my_demo_card
 
-    foo_fancy_stuff title: 'Huhu'
+    # foo_fancy_stuff title: 'Huhu'
 
 
     # ul do

spec/spec_helper.rb

@@ -145,6 +145,7 @@
     unless Rails.application.routes.url_helpers.method_defined?(:matestack_components_test_path)
       Rails.application.routes.append do
         get '/matestack_components_test', to: 'matestack_components#matestack_components_test', as: :matestack_components_test 
+        get '/matestack_transition_test', to: 'matestack_components#matestack_transition_test', as: :matestack_transition_test 
       end
       Rails.application.reload_routes!
     end

spec/test/components/dynamic/cable/cable_spec.rb

@@ -1,7 +1,8 @@
 require 'rails_helper'
 
-describe "Cable Component - append", type: :feature, js: true do
+describe "Cable Component", type: :feature, js: true do
   include Utils
+  include Matestack::Ui::Core::ApplicationHelper
 
   it 'should have the typical matestack wrapping classes' do
     matestack_render do
@@ -24,8 +25,46 @@
   end
 
   it 'should work after a page transition' do
-    pending
-    fail
+    matestack_render(reset_app: false, page: MatestackTransitionPage) do
+      cable id: 'cable-replace', replace_on: 'replace' do
+        paragraph id: 'id', text: 'Paragraph'
+      end
+    end
+    matestack_render(reset_app: false) do
+      transition path: :matestack_transition_test_path, text: 'Transition'
+    end
+    expect(page).to have_content('Transition')
+    expect(page).not_to have_content('Paragraph')
+    click_on 'Transition'
+    expect(page).not_to have_content('Transition')
+    expect(page).to have_selector('p#id', text: 'Paragraph')
+    page.execute_script('MatestackUiCore.matestackEventHub.$emit("replace", { data: "<h1 id=\"id\">replaced</h1>" })')
+    expect(page).to have_selector('h1#id', text: 'replaced')
+    reset_matestack_app
+  end
+  
+  it 'should be possible to add vue.js components' do
+    matestack_render do
+      cable id: 'cable-replace', replace_on: 'replace' do
+        paragraph text: 'paragraph', id: 'id'
+      end
+      toggle show_on: 'test' do
+        plain 'event successful emitted'
+      end
+    end
+    expect(page).to have_selector('p#id', text: 'paragraph')
+    expect(page).not_to have_selector('button', text: 'Click')
+    expect(page).not_to have_content('event successful emitted')
+    # onclick = matestack_component(:heading, text: 'test')
+    onclick = matestack_component(:onclick, emit: :test) { button text: 'Click' }
+    script = "MatestackUiCore.matestackEventHub.$emit('replace', { data: \"#{onclick}\" })".gsub("\n", "")
+    page.execute_script(script)
+    expect(page).not_to have_selector('p#id', text: 'paragraph')
+    expect(page).to have_selector('button', text: 'Click')
+    expect(page).not_to have_content('event successful emitted')
+
+    click_on 'Click'
+    expect(page).to have_content('event successful emitted')
   end
 
 end

spec/test/components/dynamic/isolated/isolated_spec.rb

@@ -370,7 +370,7 @@ def response
     visit "/example"
 
     page_timestamp = page.find('#page-timestamp').text.to_i
-    component_timestamp = page.find('#isolated-component-timestamp').text.to_i
+    component_timestamp = page.find('#isolated-component-timestamp', wait: 3).text.to_i
 
     expect(component_timestamp-page_timestamp).to be >= 2