Fix inconsistent published date of Article and Comment (#18412)

* Revise system specs for viewing a comment

* Add system specs for viewing comment date

* Add conditional to SetTimeZone middleware

* Revise comment_date partial

* Refactor viewing a comment system specs

* Add more system specs for viewing a comment

* Fix format of comment date with short year

* Fix edited comment date

* Fix comment date when posting new comments

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

@@ -300,6 +300,7 @@ function handleCommentSubmit(event) {
           updateCommentsCount();
           initializeCommentsPage();
           initializeCommentDate();
+          initializeDateHelpers();
           activateRunkitTags();
         })
       } else {

app/assets/javascripts/initializers/initializeDateTimeHelpers.js

@@ -15,4 +15,11 @@ function initializeDateHelpers() {
     month: 'short',
     day: 'numeric',
   });
+
+  // Date with short year: Jul 12 '20
+  localizeTimeElements(document.querySelectorAll('time.date-short-year'), {
+    year: '2-digit',
+    month: 'short',
+    day: 'numeric',
+  });
 }

app/assets/javascripts/utilities/buildCommentHTML.js.erb

@@ -57,7 +57,7 @@ function buildCommentHTML(comment) {
     <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>
 
     <a href="${ comment.url }" class="comment-date crayons-link crayons-link--secondary fs-s">
-      <time datetime="${ comment.published_timestamp }">
+      <time datetime="${ comment.published_timestamp }" class="date-no-year">
         ${ comment.readable_publish_date }
       </time>
     </a>

app/assets/javascripts/utilities/localDateTime.js

@@ -19,7 +19,13 @@ function timestampToLocalDateTime(timestamp, locale, options) {
 
   try {
     var time = new Date(timestamp);
-    return new Intl.DateTimeFormat(locale || 'default', options).format(time);
+    let formattedTime = new Intl.DateTimeFormat(
+      locale || 'default',
+      options,
+    ).format(time);
+    return options.year === '2-digit'
+      ? formattedTime.replace(', ', " '")
+      : formattedTime;
   } catch (e) {
     return '';
   }

app/lib/middlewares/set_time_zone.rb

@@ -5,7 +5,7 @@ module Middlewares
     end
 
     def call(env)
-      Time.zone = ActiveSupport::TimeZone.new(ENV["TZ"]) if ENV["TZ"]
+      Time.zone = ActiveSupport::TimeZone.new(ENV["TZ"]) if ENV["TZ"] && ENV["DESYNC_TIMEZONE"].nil?
 
       @app.call(env)
     end

app/views/comments/_comment_date.erb

@@ -1,13 +1,13 @@
 <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>
 
 <a href="<%= URL.comment(decorated_comment) %>" class="comment-date crayons-link crayons-link--secondary fs-s">
-  <time datetime="<%= decorated_comment.published_timestamp %>">
+  <time datetime="<%= decorated_comment.published_timestamp %>" class=<%= decorated_comment.created_at.year == Time.current.year ? "date-no-year" : "date-short-year" %>>
     <%= decorated_comment.readable_publish_date %>
   </time>
 
   <% if decorated_comment.edited_at.present? %>
     <%= t("views.comments.edited.text_html", 
-          on: tag.span(t("views.comments.edited.on_html", date: tag.time(decorated_comment.edited_at.strftime(t("time.formats.short")), datetime: decorated_comment.edited_timestamp), class: %w[hidden m:inline-block]))
+          on: tag.span(t("views.comments.edited.on_html", date: tag.time(decorated_comment.edited_at.strftime(t("time.formats.short")), datetime: decorated_comment.edited_timestamp, class: %w[hidden m:inline-block date-no-year])))
     ) %>
   <% end %>
 </a>

spec/system/comments/user_views_a_comment_spec.rb

@@ -7,21 +7,63 @@ RSpec.describe "Viewing a comment", type: :system, js: true do
 
   before do
     Timecop.freeze
-    sign_in user
-    visit comment.path
+    ENV["DESYNC_TIMEZONE"] = "true"
+    mock_user_tz = ActiveSupport::TimeZone[Zonebie.random_timezone].tzinfo.name
+    ENV["TZ"] = mock_user_tz
   end
 
   after do
+    ENV["TZ"] = Time.zone.tzinfo.name
+    ENV["DESYNC_TIMEZONE"] = nil
+    Capybara.current_session.quit
     Timecop.return
   end
 
-  context "when showing the date" do
-    it "shows all published data" do
-      comment_date = comment.readable_publish_date.gsub("  ", " ")
+  context "when viewing the comment date" do
+    it "contains a time tag with the correct value for the datetime attribute" do
+      sign_in user
+      visit comment.path
       timestamp = comment.decorate.published_timestamp
 
-      expect(page).to have_selector(".comment-date time", text: comment_date)
       expect(page).to have_selector(".comment-date time[datetime='#{timestamp}']")
     end
+
+    it "shows the published date in the user's local time zone" do
+      sign_in user
+      visit comment.path
+      date = comment.created_at.getlocal.strftime("%b %-d")
+
+      expect(page).to have_selector(".comment-date time", text: date)
+    end
+  end
+
+  context "when a year has passed" do
+    before do
+      comment
+      Timecop.freeze(1.year.from_now)
+    end
+
+    it "shows the published date in the correct format" do
+      sign_in user
+      visit comment.path
+      date = comment.created_at.getlocal.strftime("%b %-d '%y")
+
+      expect(page).to have_selector(".comment-date time", text: date)
+    end
+  end
+
+  context "when the comment is edited and a year has passed" do
+    before do
+      comment.update(body_markdown: "This message is edited.", edited_at: 1.day.from_now)
+      Timecop.freeze(1.year.from_now)
+    end
+
+    it "shows the edited date in the correct format" do
+      sign_in user
+      visit comment.path
+      date = comment.edited_at.getlocal.strftime("%b %-d")
+
+      expect(page).to have_content("Edited on #{date}")
+    end
   end
 end