DVX-6275 Export Embedded elements for Facebook Instant Articles

Export embedded elements (tweets, youtube videos, etc) for Instant Articles
following the reference document:
https://developers.facebook.com/docs/instant-articles/reference/embeds

lib/article_json/export/facebook_instant_article/elements/embed.rb

@@ -3,7 +3,40 @@ module Export
     module FacebookInstantArticle
       module Elements
         class Embed < Base
-          include ArticleJSON::Export::Common::HTML::Elements::Embed
+          include ArticleJSON::Export::Common::HTML::Elements::Shared::Caption
+
+          # Generate the embedded element node
+          # @return [Nokogiri::XML::NodeSet]
+          def export
+            create_element(:figure, class: 'op-interactive') do |figure|
+              figure.add_child(embed_node)
+              if @element.caption&.any?
+                figure.add_child(caption_node(:figcaption))
+              end
+            end
+          end
+
+          private
+
+          # Type specific object that should be embedded
+          # @return [Nokogiri::XML::Element]
+          def embed_node
+            if %i(facebook_video tweet).include? @element.embed_type.to_sym
+              iframe_node
+            else
+              embedded_object
+            end
+          end
+
+          def iframe_node
+            create_element(:iframe) do |div|
+              div.add_child(embedded_object)
+            end
+          end
+
+          def embedded_object
+            Nokogiri::HTML.fragment(@element.oembed_data[:html])
+          end
         end
       end
     end

spec/article_json/export/facebook_instant_article/elements/base_spec.rb

@@ -83,7 +83,7 @@
         )
       end
       let(:expected_html) do
-        '<figure><div class="embed">Embedded Object: something-666</div>' \
+        '<figure class="op-interactive">Embedded Object: something-666' \
           '<figcaption>Foo Bar</figcaption></figure>'
       end
       let(:oembed_data) { { html: 'Embedded Object: something-666' } }

spec/article_json/export/facebook_instant_article/elements/embed_spec.rb

@@ -1,9 +1,10 @@
 describe ArticleJSON::Export::FacebookInstantArticle::Elements::Embed do
   subject(:element) { described_class.new(source_element) }
+  let(:type) { :youtube_video }
 
   let(:source_element) do
     ArticleJSON::Elements::Embed.new(
-      embed_type: :something,
+      embed_type: type,
       embed_id: 666,
       caption: caption,
       tags: %w(test)
@@ -18,20 +19,46 @@
       allow(source_element).to receive(:oembed_data).and_return(oembed_data)
     end
 
-    context 'with a proper caption' do
-      let(:expected_html) do
-        '<figure><div class="embed">Embedded Object: something-666</div>' \
+    context 'when the element it is not a facebook video nor a tweet' do
+      context 'with a proper caption' do
+        let(:expected_html) do
+          '<figure class="op-interactive">Embedded Object: something-666' \
           '<figcaption>Foo Bar</figcaption></figure>'
+        end
+
+        it { should eq expected_html }
       end
+
+      context 'without a proper caption' do
+        let(:caption) { [] }
+        let(:expected_html) do
+          '<figure class="op-interactive">Embedded Object: something-666' \
+          '</figure>'
+        end
+
+        it { should eq expected_html }
+      end
+    end
+
+    context 'with a tweet' do
+      let(:type) { :tweet }
+      let(:expected_html) do
+        '<figure class="op-interactive">' \
+        '<iframe>Embedded Object: something-666</iframe>' \
+        '<figcaption>Foo Bar</figcaption></figure>'
+      end
+
       it { should eq expected_html }
     end
 
-    context 'without a proper caption' do
-      let(:caption) { [] }
+    context 'with a facebook video' do
+      let(:type) { :facebook_video }
       let(:expected_html) do
-        '<figure><div class="embed">Embedded Object: something-666</div>' \
-          '</figure>'
+        '<figure class="op-interactive">' \
+        '<iframe>Embedded Object: something-666</iframe>' \
+        '<figcaption>Foo Bar</figcaption></figure>'
       end
+
       it { should eq expected_html }
     end
   end