[15 min fix] Initialize follow buttons on comment index page (#14416)

* [15 min fix] Initialize follow buttons on comment index page

* add init for newly added comments

app/views/comments/index.html.erb

@@ -42,9 +42,9 @@
   <% end %>
 <% end %>
 
-<%= javascript_packs_with_chunks_tag "commentDropdowns", defer: true %>
+<%= javascript_packs_with_chunks_tag "commentDropdowns", "followButtons", defer: true %>
 
-<div class="crayons-layout crayons-layout--limited-l gap-0">
+<div class="crayons-layout crayons-layout--limited-l gap-0" data-follow-button-container="true">
   <% if @commentable.class.name == "Article" %>
     <%= render "shared/payment_pointer", user: @commentable.user %>
     <span id="comment-article-indicator" data-article-id="<%= @commentable.id %>"></span>
@@ -159,5 +159,6 @@
   <%== YoutubeTag.script %>
   <%== PodcastTag.script %>
   <%== GistTag.script %>
+  <%== RunkitTag.script %>
 </script>
 <%== TwitterTimelineTag.script %>

cypress/integration/seededFlows/articleFlows/viewArticleDiscussion.spec.js

@@ -0,0 +1,49 @@
+describe('View article discussion', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/articleEditorV1User.json').as('user');
+
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/admin_mcadmin/test-article-slug/comments');
+      // Make sure the page has loaded
+      cy.findByRole('heading', { name: 'Test article' });
+    });
+  });
+
+  it('follows and unfollows a user from a comment preview card', () => {
+    // Make sure the preview card is ready to be interacted with
+    cy.get('[data-initialized]');
+    cy.findByRole('button', { name: 'Admin McAdmin profile details' }).click();
+
+    cy.findByTestId('profile-preview-card').within(() => {
+      cy.findByRole('button', { name: 'Follow' }).as('userFollowButton');
+      cy.get('@userFollowButton').click();
+
+      // Confirm the follow button has been updated
+      cy.get('@userFollowButton').should('have.text', 'Following');
+
+      // Repeat and check the button changes back to 'Follow'
+      cy.get('@userFollowButton').click();
+      cy.get('@userFollowButton').should('have.text', 'Follow');
+    });
+  });
+
+  it('initializes the follow button when a new comment is added', () => {
+    cy.findByRole('textbox', { name: 'Add a comment to the discussion' }).type(
+      'New comment',
+    );
+    cy.findByRole('button', { name: 'Submit' }).click();
+
+    cy.findByRole('button', {
+      name: 'Article Editor v1 User profile details',
+    }).as('previewButton');
+
+    // Make sure the newly added button is ready for interaction
+    cy.get('@previewButton').should('have.attr', 'data-initialized');
+    cy.get('@previewButton').click();
+
+    cy.findAllByTestId('profile-preview-card')
+      .first()
+      .findByRole('button', { name: 'Edit profile' });
+  });
+});

spec/support/seeds/seeds_e2e.rb

@@ -342,6 +342,7 @@ seeder.create_if_doesnt_exist(Article, "title", "Test article") do
     featured: true,
     show_comments: true,
     user_id: admin_user.id,
+    slug: "test-article-slug",
   )
 
   comment_attributes = {