Bug Fix: Article Posted Date and Author Card Posted Date do not match (#9272)

* Refactor: move has_long_markdown from view to helper, and change it from variable to method

* Fix: Article Posted Date and Author Card Posted Date do not match #8789

* Add test case for Article Posted Date and Author Card Posted Date do not match #8789

* Use our custom URL helper module instead of manually constructing URL

* Move long_markdown? from ArticlesHelper to ArticleDecorator

* Change method name from has_long_markdown? to long_markdown?

* Add test suites for long_markdown? method to ArticleDecorator spec

* Use << over +=

* Fix typo

* Remove unnecessary cache

app/decorators/article_decorator.rb

@@ -1,4 +1,6 @@
 class ArticleDecorator < ApplicationDecorator
+  LONG_MARKDOWN_THRESHOLD = 900
+
   def current_state_path
     published ? "/#{username}/#{slug}" : "/#{username}/#{slug}?preview=#{password}"
   end
@@ -80,4 +82,8 @@ class ArticleDecorator < ApplicationDecorator
       video_closed_caption_track_url: video_closed_caption_track_url
     }
   end
+
+  def long_markdown?
+    body_markdown.present? && body_markdown.size > LONG_MARKDOWN_THRESHOLD
+  end
 end

app/views/articles/_about_author.html.erb

@@ -1,14 +1,16 @@
 <div>
-  <p class="mb-4 color-base-60 fs-s">Posted on <%= published %> by:</p>
+  <p class="mb-4 color-base-60 fs-s">
+    Posted on <time datetime="<%= @article.published_timestamp %>"><%= @article.readable_publish_date %></time> by:
+  </p>
 
   <div class="flex">
-    <a href="/<%= @user.username %>" class="crayons-avatar crayons-avatar--2xl shrink-0 mr-4">
+    <a href="<%= URL.user(@user) %>" class="crayons-avatar crayons-avatar--2xl shrink-0 mr-4">
       <img class="crayons-avatar__image" src="<%= ProfileImage.new(@user).get(width: 180) %>" alt="<%= @user.username %> profile" />
     </a>
     <div>
-      <h3 class="fs-l s:fs-xl m:fs-2xl l:fs-3xl fw-medium"><a href="/<%= @user.username %>" class="crayons-link"><%= @user.name %></a></h3>
+      <h3 class="fs-l s:fs-xl m:fs-2xl l:fs-3xl fw-medium"><a href="<%= URL.user(@user) %>" class="crayons-link"><%= @user.name %></a></h3>
       <p class="fw-medium mb-2">
-        <a href="/<%= @user.username %>" class="crayons-link crayons-link--secondary">
+        <a href="<%= URL.user(@user) %>" class="crayons-link crayons-link--secondary">
           @<%= @user.username %>
         </a>
       </p>

app/views/articles/show.html.erb

@@ -85,8 +85,6 @@
   <% end %>
 <% end %>
 
-<% has_long_markdown = @article.body_markdown && @article.body_markdown.size > 900 %>
-
 <div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
   <aside class="crayons-layout__sidebar-left" aria-label="Article actions">
     <%= render "articles/actions" %>
@@ -194,7 +192,7 @@
           <%= @article.processed_html.html_safe %>
         </div>
 
-        <% if has_long_markdown && @collection %>
+        <% if @article.long_markdown? && @collection %>
           <%= render "articles/collection",
                      rendered_article: @article,
                      collection: @collection,
@@ -203,12 +201,12 @@
         <% end %>
       </article>
 
-      <% if has_long_markdown || @organization %>
+      <% if @article.long_markdown? || @organization %>
         <section class="crayons-card crayons-card--secondary text-padding mb-4">
-          <% if has_long_markdown %>
+          <% if @article.long_markdown? %>
             <%= render "articles/about_author", published: @article.readable_publish_date %>
           <% end %>
-          <%= render "articles/org_branding", organization: @organization, author: has_long_markdown %>
+          <%= render "articles/org_branding", organization: @organization, author: @article.long_markdown? %>
         </section>
       <% end %>
 

spec/decorators/article_decorator_spec.rb

@@ -203,4 +203,22 @@ RSpec.describe ArticleDecorator, type: :decorator do
       )
     end
   end
+
+  describe "#long_markdown?" do
+    it "returns false if body_markdown is nil" do
+      article.body_markdown = nil
+      expect(article.decorate.long_markdown?).to eq false
+    end
+
+    it "returns false if body_markdown has fewer characters than LONG_MARKDOWN_THRESHOLD" do
+      article.body_markdown = "---\ntitle: Title\n---\n\nHey this is the article"
+      expect(article.decorate.long_markdown?).to eq false
+    end
+
+    it "returns true if body_markdown has more characters than LONG_MARKDOWN_THRESHOLD" do
+      additional_characters_length = (ArticleDecorator::LONG_MARKDOWN_THRESHOLD + 1) - article.body_markdown.length
+      article.body_markdown << Faker::Hipster.paragraph_by_chars(characters: additional_characters_length)
+      expect(article.decorate.long_markdown?).to eq true
+    end
+  end
 end

spec/system/articles/user_visits_an_article_spec.rb

@@ -42,6 +42,28 @@ RSpec.describe "Views an article", type: :system do
       selector = "article time[datetime='#{timestamp}']"
       expect(page).to have_selector(selector)
     end
+
+    context "when articles have long markdowns and different published dates" do
+      let(:first_article) { build(:article, published_at: "2019-03-04T10:00:00Z") }
+      let(:second_article) { build(:article, published_at: "2019-03-05T10:00:00Z") }
+
+      before do
+        [first_article, second_article].each do |article|
+          additional_characters_length = (ArticleDecorator::LONG_MARKDOWN_THRESHOLD + 1) - article.body_markdown.length
+          article.body_markdown << Faker::Hipster.paragraph_by_chars(characters: additional_characters_length)
+          article.save!
+        end
+      end
+
+      it "shows the identical readable publish dates in each page", js: true do
+        visit first_article.path
+        expect(page).to have_selector("article time", text: "Mar 4")
+        expect(page).to have_selector(".crayons-card--secondary time", text: "Mar 4")
+        visit second_article.path
+        expect(page).to have_selector("article time", text: "Mar 5")
+        expect(page).to have_selector(".crayons-card--secondary time", text: "Mar 5")
+      end
+    end
   end
 
   describe "when articles belong to a collection" do