Merge pull request #96 from basemate/add-onlick-docs-and-tests

Adds docs and tests for onclick component

Author: jonasjabari

docs/components/onclick.md

@@ -1,3 +1,20 @@
-# matestack core component: Action
+# matestack core component: Onclick
 
-Show [specs](../../spec/usage/components/action_spec.rb)
+Show [specs](../../spec/usage/components/onclick_spec.rb)
+
+The `onclick` component renders a div that runs a function when the user clicks on it. This is a simple component that can be used to wrap components with a onclick function that will emit a event. The event that must be emitted onclick can defined by passing a hash into the `onclick` component that has the key `emit`. See example below for more details.
+
+```ruby
+class Pages::MyPage::Home < Matestack::Ui::Page
+  def response
+    components{
+      onclick(emit: "abc") do
+        plain "Hello world"
+      end
+    }
+    async rerender_on: "abc" do
+      plain "Render this text when the 'abc' event is emitted"
+    end
+  end
+end
+```

spec/usage/components/onclick_spec.rb

@@ -0,0 +1,46 @@
+require_relative "../../support/utils"
+include Utils
+
+describe "Onclick Component", type: :feature, js: true do
+
+  it "Example 1" do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          async show_on: 'show_message' do
+            div id: 'the_message' do
+              plain "{{event.data.message}}"
+            end
+          end
+          onclick click_function do
+            div id: 'click_this' do
+              plain "Click me"
+            end
+          end
+        }
+      end
+
+      def click_function
+        return {
+          emit: 'show_message'
+        }
+      end
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <div><div id="click_this">Click me</div></div>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+    find('div', id: 'click_this').click
+
+    new_expected_static_output = <<~HTML
+    <div id="the_message">This is a cool message</div>
+    <div>Click me!</div>
+    HTML
+  end
+end