update unescaped, u, var, video, wbr, youtube components and specs

Author: Nils Henning

.byebug_history

@@ -2,3 +2,5 @@ continue
 static_output
 continue
 static_output
+continue
+static_output

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

@@ -1,7 +1,7 @@
 module Matestack::Ui::Core::Unescaped
   class Unescaped < Matestack::Ui::Core::Component::Static
     def show
-      @argument
+      @argument.html_safe
     end
   end
 end

lib/matestack/ui/core/components.rb

@@ -108,7 +108,13 @@ def self.require_core_component(name)
   require_core_component "time"
   require_core_component "tr"
   require_core_component "transition"
+  require_core_component "u"
   require_core_component "ul"
+  require_core_component "unescaped"
+  require_core_component "var"
+  require_core_component "video"
+  require_core_component "wbr"
+  require_core_component "youtube"
   require_core_component "form"
   require_core_component "form/input"
   require_core_component "form/select"
@@ -201,7 +207,13 @@ def self.require_core_component(name)
   time: Matestack::Ui::Core::Time::Time,
   tr: Matestack::Ui::Core::Tr::Tr,
   transition: Matestack::Ui::Core::Transition::Transition,
+  u: Matestack::Ui::Core::U::U,
   ul: Matestack::Ui::Core::Ul::Ul,
+  unescaped: Matestack::Ui::Core::Unescaped::Unescaped,
+  var: Matestack::Ui::Core::Var::Var,
+  video: Matestack::Ui::Core::Video::Video,
+  wbr: Matestack::Ui::Core::Wbr::Wbr,
+  youtube: Matestack::Ui::Core::Youtube::Youtube,
   form: Matestack::Ui::Core::Form::Form,
   form_input: Matestack::Ui::Core::Form::Input::Input,
   form_select: Matestack::Ui::Core::Form::Select::Select,

spec/0.8/components/u.rb renamed to spec/0.8/components/u_spec.rb

@@ -2,64 +2,45 @@
 include Utils
 
 describe 'u Component', type: :feature, js: true do
-
   it 'Example 1 - yield, no options[:text]' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple u
-          u do
-            plain 'I am simple'
-          end
-
-          # enhanced u
-          u id: 'my-id', class: 'my-class' do
-            plain 'I am enhanced'
-          end
-        }
+        # simple u
+        u do
+          plain 'I am simple'
+        end
+        # enhanced u
+        u id: 'my-id', class: 'my-class' do
+          plain 'I am enhanced'
+        end
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <u>I am simple</u>
-    <u id="my-id" class="my-class">I am enhanced</u>
+      <u>I am simple</u>
+      <u id="my-id" class="my-class">I am enhanced</u>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 
   it 'Example 2 - render options[:text]' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple u
-          u text: 'I am simple'
-
-          # enhanced u
-          u id: 'my-id', class: 'my-class', text: 'I am enhanced'
-        }
+        # simple u
+        u text: 'I am simple'
+        # enhanced u
+        u id: 'my-id', class: 'my-class', text: 'I am enhanced'
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <u>I am simple</u>
-    <u id="my-id" class="my-class">I am enhanced</u>
+      <u>I am simple</u>
+      <u id="my-id" class="my-class">I am enhanced</u>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 

spec/0.8/components/unescaped_spec.rb

@@ -1,24 +1,19 @@
 describe "Unescaped Component", type: :feature, js: true do
 
   it "allows the insertion of pure HTML: Example 1" do
-
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          unescaped <<~HTML
+        unescaped <<~HTML
           <h1>Hello World</h1>
           <script>alert('Really Hello!')</script>
-          HTML
-        }
+        HTML
       end
     end
 
     accept_alert do
       visit "/example"
     end
-
     static_output = page.html
-
     expect(static_output).to include("<h1>Hello World</h1>")
   end
 

spec/0.8/components/var_spec.rb

@@ -4,31 +4,23 @@
 describe 'Var Component', type: :feature, js: true do
 
   it 'Example 1' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # example 1
-          var id: "foo", class: "bar" do
-            plain 'I get yielded'
-          end
-          # example 2
-          var id: "foo", class: "bar", text: 'I am text'
-        }
+        # example 1
+        var id: "foo", class: "bar" do
+          plain 'I get yielded'
+        end
+        # example 2
+        var id: "foo", class: "bar", text: 'I am text'
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <var id="foo" class="bar">I get yielded</var>
-    <var id="foo" class="bar">I am text</var>
+      <var id="foo" class="bar">I get yielded</var>
+      <var id="foo" class="bar">I am text</var>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 

spec/0.8/components/video_spec.rb

@@ -4,32 +4,36 @@
 describe 'Video Component', type: :feature, js: true do
 
   it 'Renders a simple video tag on the page' do
-     class ExamplePage < Matestack::Ui::Page
-       def response
-         components {
-           video path: 'corgi.mp4', type: "mp4", width: 500, height: 300
-         }
-       end
-     end
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        video path: 'corgi.mp4', type: "mp4", width: 500, height: 300
+      end
+    end
 
-     visit '/example'
-
-     expect(page).to have_xpath("//video[@width='500' and @height='300']")
-     expect(page).to have_content('Your browser does not support the video tag.')
+    visit '/example'
+    expected_html_output = <<~HTML
+      <video height="300" width="500">
+        <source src="#{ActionController::Base.helpers.asset_path('corgi.mp4')}" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    HTML
   end
 
   it 'Renders a video tag with more attributes on the page' do
-     class ExamplePage < Matestack::Ui::Page
-       def response
-         components {
-           video path: 'corgi.mp4', type: "mp4", width: 500, height: 300,  autoplay: true, controls: true, loop: true, muted: true, playsinline: false, preload: 'auto'
-         }
-       end
-     end
-
-     visit '/example'
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        video path: 'corgi.mp4', type: "mp4", width: 500, height: 300,  autoplay: true, controls: true, loop: true, muted: true, playsinline: false, preload: 'auto'
+      end
+    end
 
-     expect(page).to have_xpath("//video[@width='500' and @height='300' and @autoplay and @controls and @loop and @muted and @preload='auto']")
-     expect(page).to have_content('Your browser does not support the video tag.')
+    visit '/example'
+    static_output = page.html
+    expected_html_output = <<~HTML
+      <video autoplay="autoplay" controls="controls" height="300" loop="loop" muted="muted" preload="auto" width="500">
+        <source src="#{ActionController::Base.helpers.asset_path('corgi.mp4')}" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    HTML
+    expect(stripped(static_output)).to include(stripped(expected_html_output))
   end
 end

spec/0.8/components/wbr_spec.rb

@@ -5,33 +5,27 @@
   it 'Renders a simple and enhanced wbr tag on a page' do
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          # Simple wbr
-          paragraph do
-            plain 'First part of text'
-            wbr
-            plain 'Second part of text'
-          end
-
-          # Enhanced wbr
-          paragraph do
-            plain 'First part of second text'
-            wbr id: 'special', class: 'nice-wbr'
-            plain 'Second part of second text'
-          end
-        }
+        # Simple wbr
+        paragraph do
+          plain 'First part of text'
+          wbr
+          plain 'Second part of text'
+        end
+        # Enhanced wbr
+        paragraph do
+          plain 'First part of second text'
+          wbr id: 'special', class: 'nice-wbr'
+          plain 'Second part of second text'
+        end
       end
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
       <p>First part of text<wbr/>Second part of text</p>
       <p>First part of second text<wbr id="special" class="nice-wbr"/>Second part of second text</p>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 end

spec/0.8/components/youtube_spec.rb

@@ -4,30 +4,22 @@
 describe 'Youtube Component', type: :feature, js: true do
 
   it 'Example 1' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple youtube video
-          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', class: 'iframe'
-          # youtube video with start_at and no_controls
-          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, no_controls: true
-          # youtube video with start_at and privacy_mode
-          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, privacy_mode: true
-        }
+        # simple youtube video
+        youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', class: 'iframe'
+        # youtube video with start_at and no_controls
+        youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, no_controls: true
+        # youtube video with start_at and privacy_mode
+        youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, privacy_mode: true
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expect(page).to have_selector("iframe[src='https://www.youtube.com/embed/OY5AeGhgK7I'][class='iframe']")
     expect(page).to have_selector("iframe[src='https://www.youtube.com/embed/OY5AeGhgK7I?controls=0&amp;start=30']")
     expect(page).to have_selector("iframe[src='https://www.youtube-nocookie.com/embed/OY5AeGhgK7I?start=30']")
-
   end
 
 end