Add Percy 🦔 (#7783) [deploy]

* Add Percy to Gemfile, rails helper

* Percy snapshots for using the editor

* Add PERCY_TOKEN to sample_application.yml

* Percy snapshots for visiting the homepage

* Percy snapshots for viewing an article's comments

* Percy snapshots for creating an article

* Percy snapshots for editing an article

* Percy snapshots for logged in/out user

* Remove empty spec file

* Percy snapshots for settings page

* Percy snapshots for reading list

* Percy snapshots for admin view

* Percy snapshots for moderator view

* Percy snapshots for authentication views

* Percy snapshots for article and tag views

* Percy snapshots for editing/deleting comment views

* Percy snapshots for admin views

* Percy snapshots for comment views

* Percy snapshots for organization views

* Percy snapshots for pro membership views

* Percy snapshots for podcast views

* Percy snapshots for user views

* Percy snapshots for dashboard views

* Percy snapshots for homepage views

* Percy snapshots for video views

* Add js: true in tests that require it for Percy

* Percy dependency cleanup

* Add the Percy agent
* Remove the PERCY_TOKEN from sample_application.yml
* Move the Percy gem into the "test" group in the Gemfile

* Remove duplicate snapshots, provide unique names to snapshots

* Set seed on Faker::Config for deterministic Percy snapshots

* Freeze time in js: true tests for determinstic snapshots

* Upgrade Percy to v0.26.3

* Add percy: true flag for Percy snapshotting tests

* Add more percy: true flags

Gemfile

@@ -147,6 +147,7 @@ group :test do
   gem "exifr", ">= 1.3.6" # EXIF Reader is a module to read EXIF from JPEG and TIFF images
   gem "factory_bot_rails", "~> 5.2" # factory_bot is a fixtures replacement with a straightforward definition syntax, support for multiple build strategies
   gem "launchy", "~> 2.5" # Launchy is helper class for launching cross-platform applications in a fire and forget manner.
+  gem "percy-capybara", "~> 4.0.0" # A tool for visual testing
   gem "pundit-matchers", "~> 1.6" # A set of RSpec matchers for testing Pundit authorisation policies
   gem "rspec-retry", "~> 0.6" # retry intermittently failing rspec examples
   gem "ruby-prof", "~> 1.3", require: false # ruby-prof is a fast code profiler for Ruby

Gemfile.lock

@@ -515,6 +515,7 @@ GEM
     parser (2.7.1.2)
       ast (~> 2.4.0)
     patron (0.13.3)
+    percy-capybara (4.0.2)
     pg (1.2.3)
     polyamorous (2.3.2)
       activerecord (>= 5.2.1)
@@ -918,6 +919,7 @@ DEPENDENCIES
   omniauth-twitter (~> 1.4)
   parallel_tests (~> 2.32)
   patron (~> 0.13.3)
+  percy-capybara (~> 4.0.0)
   pg (~> 1.2)
   pry (~> 0.13)
   pry-byebug (~> 3.8)

package.json

@@ -79,6 +79,7 @@
   },
   "homepage": "https://github.com/thepracticaldev/dev.to#readme",
   "devDependencies": {
+    "@percy/agent": "^0.26.3",
     "@stoplight/spectral": "5.3.0",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",

spec/rails_helper.rb

@@ -7,6 +7,7 @@ abort("The Rails environment is running in production mode!") if Rails.env.produ
 
 # Add additional requires below this line. Rails is not loaded until this point!
 
+require "percy"
 require "pundit/matchers"
 require "pundit/rspec"
 require "webmock/rspec"
@@ -153,4 +154,16 @@ RSpec.configure do |config|
   config.filter_rails_from_backtrace!
   # arbitrary gems may also be filtered via:
   # config.filter_gems_from_backtrace("gem name")
+
+  # Explicitly set a seed and time to ensure deterministic Percy snapshots.
+  config.around(:each, percy: true) do |example|
+    Timecop.freeze("2020-05-13T10:00:00Z")
+    prev_random_seed = Faker::Config.random
+    Faker::Config.random = Random.new(42)
+
+    example.run
+
+    Faker::Config.random = prev_random_seed
+    Timecop.return
+  end
 end

spec/system/admin/admin_dashboard_presented_spec.rb

@@ -8,12 +8,17 @@ RSpec.describe "Admin dashboard is presented", type: :system do
 
   after { Bullet.raise = true }
 
-  it "loads the admin dashboard view" do
+  it "loads the admin dashboard articles view", js: true, percy: true do
     sign_in admin
     visit "/admin"
+    Percy.snapshot(page, name: "Admin dashboard: renders articles")
     expect(page).to have_content("Articles")
+  end
 
+  it "loads the admin dashboard podcasts view", js: true, percy: true do
+    sign_in admin
     visit "/admin/podcasts"
+    Percy.snapshot(page, name: "Admin dashboard: renders podcasts")
     expect(page).to have_content("Podcast Episodes")
   end
 

spec/system/articles/moderator_moderates_an_article.rb

@@ -11,13 +11,19 @@ RSpec.describe "Views an article", type: :system do
     visit "/#{user.username}/#{article.slug}/mod"
   end
 
-  it "shows an article" do
+  it "shows an article", js: true, percy: true do
     visit "/#{user.username}/#{article.slug}"
+
+    Percy.snapshot(page, name: "Moderators: renders an article")
+
     expect(page).to have_content(article.title)
   end
 
-  it "lets moderators visit /mod" do
+  it "lets moderators visit /mod", js: true, percy: true do
     visit "/#{user.username}/#{article.slug}/mod"
+
+    Percy.snapshot(page, name: "Moderators: renders /mod")
+
     expect(page).to have_content("Moderate: #{article.title}")
     expect(page).to have_selector('button[data-category="thumbsdown"][data-reactable-type="Article"]')
     expect(page).to have_selector('button[data-category="vomit"][data-reactable-type="Article"]')

spec/system/articles/user_creates_an_article_spec.rb

@@ -13,6 +13,13 @@ RSpec.describe "Creating an article with the editor", type: :system do
     sign_in user
   end
 
+  it "renders the page", js: true, percy: true do
+    visit new_path
+    fill_in "article_body_markdown", with: template
+    click_button "SAVE CHANGES"
+    Percy.snapshot(page, name: "Creating an article: shows the title")
+  end
+
   it "creates a new article", js: true, retry: 3 do
     visit new_path
     fill_in "article_body_markdown", with: template

spec/system/articles/user_deletes_an_article_spec.rb

@@ -3,11 +3,19 @@ require "rails_helper"
 RSpec.describe "Deleting Article", type: :system do
   let(:article) { create(:article) }
 
-  it "author of article deletes own article" do
+  before do
     sign_in article.user
     visit "/dashboard"
     click_on "MANAGE"
     click_on "DELETE"
+  end
+
+  it "renders the page", js: true, percy: true do
+    # Take snapshot before confirming deletion
+    Percy.snapshot(page, name: "Article: confirm deletion")
+  end
+
+  it "author of article deletes own article", js: true do
     click_on "DELETE" # This is for confirming deletion
     expect(page).to have_text("Write your first post now")
   end

spec/system/articles/user_edits_an_article_spec.rb

@@ -9,10 +9,18 @@ RSpec.describe "Editing with an editor", type: :system, js: true do
     sign_in user
   end
 
+  it "renders the page when user previews their changes", percy: true do
+    visit "/#{user.username}/#{article.slug}/edit"
+    fill_in "article_body_markdown", with: template.gsub("Suspendisse", "Yooo")
+    click_button("PREVIEW")
+    Percy.snapshot(page, name: "Editing an article: shows the title")
+  end
+
   it "user previews their changes" do
     visit "/#{user.username}/#{article.slug}/edit"
     fill_in "article_body_markdown", with: template.gsub("Suspendisse", "Yooo")
     click_button("PREVIEW")
+
     expect(page).to have_text("Yooo")
     expect(find(".active").text).to have_text("EDIT")
   end
@@ -28,6 +36,14 @@ RSpec.describe "Editing with an editor", type: :system, js: true do
     visit "/#{user.username}/#{article.slug}/edit"
     fill_in "article_body_markdown", with: template.gsub("true", "false")
     click_button("SAVE CHANGES")
+
     expect(page).to have_text("Unpublished Post.")
   end
+
+  it "renders the page when user unpublishes their post", percy: true do
+    visit "/#{user.username}/#{article.slug}/edit"
+    fill_in "article_body_markdown", with: template.gsub("true", "false")
+    click_button("SAVE CHANGES")
+    Percy.snapshot(page, name: "Editing an article: shows when unpublished")
+  end
 end

spec/system/articles/user_visits_an_article_spec.rb

@@ -11,15 +11,17 @@ RSpec.describe "Views an article", type: :system do
     sign_in user
   end
 
-  it "shows an article" do
+  it "shows an article", js: true, percy: true do
     visit article.path
+    Percy.snapshot(page, name: "Article: renders")
     expect(page).to have_content(article.title)
   end
 
-  it "shows comments", js: true do
+  it "shows comments", js: true, percy: true do
     create_list(:comment, 3, commentable: article)
 
     visit article.path
+    Percy.snapshot(page, name: "Article: shows comments")
     expect(page).to have_selector(".single-comment-node", visible: :visible, count: 3)
   end
 
@@ -64,12 +66,17 @@ RSpec.describe "Views an article", type: :system do
     end
 
     context "when a crossposted article is between two regular articles" do
+      let(:article1) { create(:article) }
+      let(:crossposted_article) { create(:article) }
+      let(:article2) { create(:article) }
+
+      it "renders the articles in ascending order considering crossposted_at", js: true, percy: true do
+        visit article1.path
+        Percy.snapshot(page, name: "Articles: renders crossposted articles")
+      end
+
       # rubocop:disable RSpec/ExampleLength
       it "lists the articles in ascending order considering crossposted_at" do
-        article1 = create(:article)
-        crossposted_article = create(:article)
-        article2 = create(:article)
-
         article1.update_columns(
           collection_id: collection.id,
           published_at: Time.zone.parse("2020-03-15T13:50:09Z"),

spec/system/articles/user_visits_article_stats_spec.rb

@@ -4,11 +4,14 @@ RSpec.describe "Viewing an article stats", type: :system, js: true do
   let_it_be(:user) { create(:user) }
   let_it_be(:article, reload: true) { create(:article, user: user) }
 
-  it "shows stats for pro users by clicking on the stats button" do
+  it "shows stats for pro users by clicking on the stats button", percy: true do
     path = "/#{user.username}/#{article.slug}/stats"
     user.add_role(:pro)
     sign_in user
     visit path
+
+    Percy.snapshot(page, name: "Article: renders stats")
+
     expect(page).to have_current_path(path)
     expect(page).to have_selector(".summary-stats")
   end

spec/system/articles/user_visits_articles_by_tag_spec.rb

@@ -14,7 +14,9 @@ RSpec.describe "User visits articles by tag", type: :system do
     context "when 2 articles" do
       before { visit "/t/javascript" }
 
-      it "shows the header", js: true do
+      it "shows the header", js: true, percy: true do
+        Percy.snapshot(page, name: "Tags: logged out user")
+
         within("h1") { expect(page).to have_text("javascript") }
       end
 
@@ -42,8 +44,9 @@ RSpec.describe "User visits articles by tag", type: :system do
         end
       end
 
-      it "when user clicks 'week'" do
+      it "when user clicks 'week'", js: true do
         click_on "WEEK"
+
         within("#articles-list") do
           expect(page).to have_text(article.title)
           expect(page).not_to have_text(article3.title)
@@ -70,6 +73,7 @@ RSpec.describe "User visits articles by tag", type: :system do
     end
 
     it "shows the following button", js: true do
+      # TODO: Add Percy snapshot?
       wait_for_javascript
 
       within("h1") { expect(page).to have_button("✓ FOLLOWING") }

spec/system/articles/user_visits_articles_by_timeframe_spec.rb

@@ -12,6 +12,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for week" do
       before { visit "/top/week" }
 
+      it "renders the page", js: true, percy: true do
+        Percy.snapshot(page, name: "Articles: /top/week logged out user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_selector(".crayons-story", visible: :visible, count: 2)
       end
@@ -31,6 +35,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for month" do
       before { visit "/top/month" }
 
+      it "renders the page", js: true, percy: true do
+        Percy.snapshot(page, name: "Articles: /top/month logged out user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_selector(".crayons-story", visible: :visible, count: 3)
       end
@@ -51,6 +59,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for year" do
       before { visit "/top/year" }
 
+      it "renders the page", js: true, percy: true do
+        Percy.snapshot(page, name: "Articles: /top/year logged out user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_selector(".crayons-story", visible: :visible, count: 4)
       end
@@ -72,6 +84,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for infinity" do
       before { visit "/top/infinity" }
 
+      it "renders the page", js: true, percy: true do
+        Percy.snapshot(page, name: "Articles: /top/infinity logged out user")
+      end
+
       it "shows correct articles and cta count" do
         expect(page).to have_selector(".crayons-story", visible: :visible, count: 5)
         expect(page).to have_selector(".feed-cta", count: 1)
@@ -95,6 +111,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for latest" do
       before { visit "/latest" }
 
+      it "renders the page", js: true, percy: true do
+        Percy.snapshot(page, name: "Articles: /latest logged out user")
+      end
+
       it "shows correct articles and cta count" do
         expect(page).to have_selector(".crayons-story", visible: :visible, count: 5)
         expect(page).to have_selector(".feed-cta", count: 1)
@@ -124,6 +144,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
       visit "/top/week"
     end
 
+    it "renders the page", percy: true do
+      Percy.snapshot(page, name: "Articles: /top/week logged in user")
+    end
+
     it "shows correct articles count" do
       expect(page).to have_xpath("//article[contains(@class, 'crayons-story') and contains(@class, 'false')]", count: 1)
     end
@@ -142,6 +166,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for month" do
       before { visit "/top/month" }
 
+      it "renders the page", percy: true do
+        Percy.snapshot(page, name: "Articles: /top/month logged in user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_xpath("//article[contains(@class, 'crayons-story') and contains(@class, 'false')]", count: 2)
       end
@@ -162,6 +190,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for year" do
       before { visit "/top/year" }
 
+      it "renders the page", percy: true do
+        Percy.snapshot(page, name: "Articles: /top/year logged in user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_xpath("//article[contains(@class, 'crayons-story') and contains(@class, 'false')]", count: 3)
       end
@@ -183,6 +215,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for infinity" do
       before { visit "/top/infinity" }
 
+      it "renders the page", percy: true do
+        Percy.snapshot(page, name: "Articles: /top/infinity logged in user")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_xpath("//article[contains(@class, 'crayons-story') and contains(@class, 'false')]", count: 4)
       end
@@ -205,6 +241,10 @@ RSpec.describe "User visits articles by timeframe", type: :system do
     context "when viewing articles for latest" do
       before { visit "/latest" }
 
+      it "renders the page", percy: true do
+        Percy.snapshot(page, name: "Articles: /latest logged in user")
+      end
+
       it "shows correct articles" do
         expect(page).to have_xpath("//article[contains(@class, 'crayons-story') and contains(@class, 'false')]", count: 4)
       end

spec/system/comments/user_delete_a_comment_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe "Deleting Comment", type: :system, js: true do
   end
 
   it "works" do
+    # TODO: Add Percy snapshot?
     visit "/"
     visit comment.path + "/delete_confirm"
 

spec/system/comments/user_edits_a_comment_spec.rb

@@ -23,9 +23,13 @@ RSpec.describe "Editing A Comment", type: :system, js: true do
   end
 
   context "when user edits comment on the bottom of the article" do
+    it "renders the page", percy: true do
+      visit article.path.to_s
+      Percy.snapshot(page, name: "Edit comment: renders")
+    end
+
     it "updates" do
       visit article.path.to_s
-
       wait_for_javascript
 
       click_link("EDIT")

spec/system/comments/user_fills_out_comment_spec.rb

@@ -16,8 +16,8 @@ RSpec.describe "Creating Comment", type: :system, js: true do
   end
 
   it "User fills out comment box normally" do
+    # TODO: Add Percy snapshot?
     visit article.path.to_s
-
     wait_for_javascript
 
     fill_in "text-area", with: raw_comment
@@ -61,7 +61,6 @@ RSpec.describe "Creating Comment", type: :system, js: true do
 
   it "User fill out comment box then click previews and submit" do
     visit article.path.to_s
-
     wait_for_javascript
 
     fill_in "text-area", with: raw_comment
@@ -101,7 +100,7 @@ RSpec.describe "Creating Comment", type: :system, js: true do
     expect(page).to have_no_css("div.file-upload-error")
   end
 
-  it "User attaches a large image" do
+  it "User attaches a large image", percy: true do
     visit article.path.to_s
 
     reduce_max_file_size = 'document.querySelector("#image-upload-main").setAttribute("data-max-file-size-mb", "0")'
@@ -114,6 +113,8 @@ RSpec.describe "Creating Comment", type: :system, js: true do
       visible: :hidden,
     )
 
+    Percy.snapshot(page, name: "Image: upload error")
+
     expect(page).to have_css("div.file-upload-error")
     expect(page).to have_css(
       "div.file-upload-error",

spec/system/comments/user_views_a_comment_spec.rb

@@ -17,7 +17,9 @@ RSpec.describe "Viewing a comment", type: :system, js: true do
   end
 
   context "when showing the date" do
-    it "shows the readable publish date" do
+    it "shows the readable publish date", percy: true do
+      Percy.snapshot(page, name: "Comment: can render")
+
       expect(page).to have_selector(".comment-date time", text: "Mar 4")
     end
 

spec/system/comments/user_views_article_comments_spec.rb

@@ -25,7 +25,9 @@ RSpec.describe "Visiting article comments", type: :system, js: true do
       expect(page).to have_selector(".comment-deep-1", visible: :visible, count: 3)
     end
 
-    it "displays grandchild comments" do
+    it "displays grandchild comments", percy: true do
+      Percy.snapshot(page, name: "Comment: /:article/comments nested comments")
+
       expect(page).to have_selector("#comment-node-#{grandchild_comment.id}.comment-deep-2", visible: :visible, count: 1)
     end
   end
@@ -41,7 +43,9 @@ RSpec.describe "Visiting article comments", type: :system, js: true do
       expect(page).to have_selector(".comment-deep-1", visible: :visible, count: 2)
     end
 
-    it "displays grandchild comments" do
+    it "displays grandchild comments", percy: true do
+      Percy.snapshot(page, name: "Comment: /:article/comments/:comment_id nested comments")
+
       expect(page).to have_selector("#comment-node-#{grandchild_comment.id}.comment-deep-2", visible: :visible, count: 1)
     end
   end

spec/system/comments/user_views_podcast_comments_spec.rb

@@ -11,7 +11,9 @@ RSpec.describe "viewing podcast comments", type: :system, js: true do
     visit "/#{podcast.slug}/#{podcast_episode.slug}/comments"
   end
 
-  it "renders comment" do
+  it "renders comment", percy: true do
+    Percy.snapshot(page, name: "Comment: /:podcast_slug/:podcast_episode_slug/comments")
+
     expect(page).to have_content(comment.body_html)
   end
 end

spec/system/dashboards/user_scrolls_down_dashboard_follows_spec.rb

@@ -18,10 +18,15 @@ RSpec.describe "Infinite scroll on dashboard", type: :system, js: true do
       users.each do |u|
         create(:follow, follower: u, followable: user)
       end
+
+      visit "/dashboard/user_followers?per_page=#{default_per_page}"
+    end
+
+    it "renders the page", percy: true do
+      Percy.snapshot(page, name: "Homepage: /dashboard/user_followers?per_page= infinite scroll")
     end
 
     it "scrolls through all users" do
-      visit "/dashboard/user_followers?per_page=#{default_per_page}"
       page.execute_script("window.scrollTo(0, 100000)")
       page.assert_selector('div[id^="follows"]', count: total_records)
     end
@@ -33,6 +38,7 @@ RSpec.describe "Infinite scroll on dashboard", type: :system, js: true do
         create(:follow, follower: user, followable: tag)
       end
       visit dashboard_following_tags_path(per_page: default_per_page)
+
       page.execute_script("window.scrollTo(0, 100000)")
     end
 
@@ -58,10 +64,15 @@ RSpec.describe "Infinite scroll on dashboard", type: :system, js: true do
       users.each do |u|
         create(:follow, follower: user, followable: u)
       end
+
+      visit dashboard_following_users_path(per_page: default_per_page)
+    end
+
+    it "renders the page", percy: true do
+      Percy.snapshot(page, name: "Homepage: /dashboard/following_users infinite scroll")
     end
 
     it "scrolls through all users" do
-      visit dashboard_following_users_path(per_page: default_per_page)
       page.execute_script("window.scrollTo(0, 100000)")
       page.assert_selector('div[id^="follows"]', count: total_records)
     end
@@ -72,10 +83,15 @@ RSpec.describe "Infinite scroll on dashboard", type: :system, js: true do
       organizations.each do |organization|
         create(:follow, follower: user, followable: organization)
       end
+
+      visit dashboard_following_organizations_path(per_page: default_per_page)
+    end
+
+    it "renders the page", percy: true do
+      Percy.snapshot(page, name: "Homepage: /dashboard/following_organizations infinite scroll")
     end
 
     it "scrolls through all users" do
-      visit dashboard_following_organizations_path(per_page: default_per_page)
       page.execute_script("window.scrollTo(0, 100000)")
       page.assert_selector('div[id^="follows"]', count: total_records)
     end
@@ -87,6 +103,7 @@ RSpec.describe "Infinite scroll on dashboard", type: :system, js: true do
         create(:follow, follower: user, followable: podcast)
       end
       visit dashboard_following_podcasts_path(per_page: default_per_page)
+
       page.execute_script("window.scrollTo(0, 100000)")
     end
 

spec/system/homepage/user_visits_homepage_spec.rb

@@ -8,6 +8,10 @@ RSpec.describe "User visits a homepage", type: :system do
   context "when user hasn't logged in" do
     before { visit "/" }
 
+    it "renders the page", js: true, percy: true do
+      Percy.snapshot(page, name: "Visits homepage: logged out user")
+    end
+
     it "shows the sign-in block" do
       within ".signin-cta-widget" do
         expect(page).to have_text("Sign In With Twitter")
@@ -40,8 +44,13 @@ RSpec.describe "User visits a homepage", type: :system do
       sign_in(user)
     end
 
+    it "renders the page", js: true, percy: true do
+      Percy.snapshot(page, name: "Visits homepage: logged in user")
+    end
+
     it "offers to follow tags", js: true do
       visit "/"
+
       within("#sidebar-nav-default-tags") do
         expect(page).to have_text("Follow tags to improve your feed")
       end

spec/system/internal/admin_awards_badges_spec.rb

@@ -25,6 +25,10 @@ RSpec.describe "Admin awards badges", type: :system do
     visit "/internal/badges"
   end
 
+  it "renders the page", js: true, percy: true do
+    Percy.snapshot(page, name: "Admin: /internal/badges")
+  end
+
   it "loads the view" do
     expect(page).to have_content("Badges")
   end
@@ -53,8 +57,11 @@ RSpec.describe "Admin awards badges", type: :system do
     end
   end
 
-  it "does not award badges if no badge is selected" do
+  it "does not award badges if no badge is selected", js: true, percy: true do
     expect { award_no_badges }.to change { user.badges.count }.by(0)
+
+    Percy.snapshot(page, name: "Admin: /internal/badges error")
+
     expect(page).to have_content("Please choose a badge to award")
   end
 end

spec/system/internal/admin_bans_or_warns_user_spec.rb

@@ -38,10 +38,15 @@ RSpec.describe "Admin bans user", type: :system do
     expect(page).to have_content("User has been updated")
   end
 
+  it "renders the page", js: true, percy: true do
+    Percy.snapshot(page, name: "Admin: /internal/users/:user_id/edit")
+  end
+
   it "checks that the user is warned, has a note, and privileges are removed" do
     user.add_role :trusted
     add_tag_moderator_role
     warn_user
+
     expect(user.warned).to eq(true)
     expect(Note.last.reason).to eq "Warn"
     expect(user.has_role?(:tag_moderator)).to eq(false)
@@ -59,6 +64,7 @@ RSpec.describe "Admin bans user", type: :system do
     user.add_role :video_permission
     add_tag_moderator_role
     ban_user
+
     expect(user.banned).to eq(true)
     expect(user.trusted).to eq(false)
     expect(user.warned).to eq(false)
@@ -69,6 +75,7 @@ RSpec.describe "Admin bans user", type: :system do
   it "unbans user" do
     user.add_role :banned
     unban_user
+
     expect(user.has_role?(:banned)).to eq(false)
   end
 end

spec/system/internal/admin_creates_new_event_spec.rb

@@ -29,9 +29,14 @@ RSpec.describe "Admin creates new event", type: :system do
     expect(page).to have_content("Create New Event")
   end
 
+  it "renders the page", js: true, percy: true do
+    Percy.snapshot(page, name: "Admin: /internal/events shows published events")
+  end
+
   it "loads published events on /events" do
     create_and_publish_event
     visit "/events"
+
     expect(page).to have_content("Workshop Title")
   end
 end

spec/system/internal/admin_manages_reports_spec.rb

@@ -14,6 +14,10 @@ RSpec.describe "Admin manages reports", type: :system do
     visit internal_feedback_messages_path
   end
 
+  it "renders the page", js: true, percy: true do
+    Percy.snapshot(page, name: "Admin: /internal/feedback_messages")
+  end
+
   it "loads the view" do
     expect(page).to have_content("Feedback Messages")
     expect(page).to have_content("Suspicious Activity")
@@ -30,9 +34,17 @@ RSpec.describe "Admin manages reports", type: :system do
       clear_search_boxes
     end
 
+    it "renders the page when searching reports", js: true, percy: true do
+      fill_in "q_reporter_username_cont", with: user.username.to_s
+      click_on "Search"
+
+      Percy.snapshot(page, name: "Admin: /internal/feedback_messages search")
+    end
+
     it "searches reports" do
       fill_in "q_reporter_username_cont", with: user.username.to_s
       click_on "Search"
+
       expect(page).to have_css("#edit_feedback_message_#{feedback_message.id}")
       expect(page).not_to have_css("#edit_feedback_message_#{feedback_message3.id}")
 
@@ -43,9 +55,17 @@ RSpec.describe "Admin manages reports", type: :system do
       expect(page).to have_css("#edit_feedback_message_#{feedback_message3.id}")
     end
 
+    it "renders the page when filtering", js: true, percy: true do
+      select "Invalid", from: "q[status_eq]"
+      click_on "Search"
+
+      Percy.snapshot(page, name: "Admin: /internal/feedback_messages filter")
+    end
+
     it "filters by reports by status" do
       select "Invalid", from: "q[status_eq]"
       click_on "Search"
+
       expect(page).not_to have_css("#edit_feedback_message_#{feedback_message.id}")
       expect(page).not_to have_css("#edit_feedback_message_#{feedback_message3.id}")
       expect(page).to have_css("#edit_feedback_message_#{feedback_message2.id}")

spec/system/link_for_tags_in_posts_in_notifications_spec.rb

@@ -13,7 +13,8 @@ RSpec.describe "Link on tags for post in notifications", type: :system do
       visit "/dashboard"
     end
 
-    it "shows the sign-with page" do
+    it "shows the sign-with page", js: true, percy: true do
+      Percy.snapshot(page, name: "Logged out user: sign-in page")
       expect(page).to have_content(/Sign In With/i, count: 2)
     end
   end
@@ -23,9 +24,10 @@ RSpec.describe "Link on tags for post in notifications", type: :system do
       sign_in article.user
     end
 
-    it "shows articles with tags" do
+    it "shows articles with tags", js: true, percy: true do
       visit "/dashboard"
 
+      Percy.snapshot(page, name: "Logged in user: dashboard")
       expect(page).to have_selector("div.single-article", count: 1)
       expect(page).to have_link("#ruby", href: "/t/ruby")
       expect(page).to have_link("#javascript", href: "/t/javascript")

spec/system/organization/user_leaves_an_organization_spec.rb

@@ -10,7 +10,9 @@ RSpec.describe "User leaves an organization", type: :system do
   end
 
   context "when user visits member organization settings" do
-    it "shows the leave oranization button" do
+    it "shows the leave oranization button", js: true, percy: true do
+      Percy.snapshot(page, name: "Settings: /settings/organization/:organization_id")
+
       expect(page).to have_button("Leave Organization")
     end
   end
@@ -18,6 +20,7 @@ RSpec.describe "User leaves an organization", type: :system do
   context "when user leaves member organization" do
     it "leaves organization and shows confirmation" do
       click_button("Leave Organization")
+
       expect(page).to have_content("You have left your organization.")
     end
   end

spec/system/organization/user_updates_org_settings_spec.rb

@@ -32,6 +32,14 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
     )
   end
 
+  it "renders the page", js: true, percy: true do
+    visit "/settings/organization"
+    fill_in_org_form
+    click_button "Create Organization"
+
+    Percy.snapshot(page, name: "Settings: /settings/organization create organization")
+  end
+
   it "user creates an organization" do
     visit "/settings/organization"
     fill_in_org_form
@@ -47,6 +55,7 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
     visit "settings/organization"
     click_button("Make admin")
     page.driver.browser.switch_to.alert.accept
+
     expect(page).to have_text("#{user2.name} is now an admin.")
   end
 

spec/system/organization/user_views_an_organization_spec.rb

@@ -8,7 +8,7 @@ RSpec.describe "Organization index", type: :system do
     create_list(:article, 2, organization: organization)
   end
 
-  context "when user is unauthorized" do
+  context "when user does not follow organization" do
     context "when 2 articles" do
       before { visit "/#{organization.slug}" }
 
@@ -36,9 +36,11 @@ RSpec.describe "Organization index", type: :system do
     end
 
     context "when more articles" do
-      it "visits ok" do
+      it "visits ok", js: true, percy: true do
         create_list(:article, 3, organization: organization)
         visit "/#{organization.slug}"
+
+        Percy.snapshot(page, name: "Organization: /:organization_slug renders when user is not following org")
       end
     end
   end
@@ -53,6 +55,7 @@ RSpec.describe "Organization index", type: :system do
 
     it "shows the correct button", js: true do
       visit "/#{organization.slug}"
+
       within(".profile-details") do
         expect(page).to have_button("✓ FOLLOWING")
       end

spec/system/podcasts/user_visits_podcast_episode_spec.rb

@@ -5,8 +5,11 @@ RSpec.describe "User visits podcast show page", type: :system do
   let(:podcast_episode) { create(:podcast_episode, podcast_id: podcast.id) }
   let(:single_quote_episode) { create(:podcast_episode, title: "What's up doc?!") }
 
-  it "they see the content of the hero", retry: 3 do
+  it "they see the content of the hero", js: true, percy: true, retry: 3 do
     visit podcast_episode.path.to_s
+
+    Percy.snapshot(page, name: "Podcast: /:podcast_slug/:episode_slug renders")
+
     expect(page).to have_text(podcast_episode.title)
     expect(page).to have_css ".record"
     expect(page).not_to have_css ".published-at"
@@ -38,9 +41,12 @@ RSpec.describe "User visits podcast show page", type: :system do
   end
 
   context "when episode may not be playable" do
-    it "displays status when episode is not reachable by https" do
+    it "displays status when episode is not reachable by https", js: true, percy: true do
       podcast_episode = create(:podcast_episode, https: false)
       visit podcast_episode.path.to_s
+
+      Percy.snapshot(page, name: "Podcast: /:podcast_slug/:episode_slug renders when not reachable by https")
+
       expect(page).to have_text(I18n.t("podcasts.statuses.unplayable"))
       expect(page).to have_text("Click here to download")
     end
@@ -67,13 +73,16 @@ RSpec.describe "User visits podcast show page", type: :system do
     end
   end
 
-  context "when there're existing comments" do
+  context "when there are existing comments" do
     let(:user) { create(:user) }
     let(:comment) { create(:comment, user_id: user.id, commentable: podcast_episode) }
     let!(:comment2) { create(:comment, user_id: user.id, commentable: podcast_episode, parent: comment) }
 
-    it "sees the comments", js: true do
+    it "sees the comments", js: true, percy: true do
       visit podcast_episode.path.to_s
+
+      Percy.snapshot(page, name: "Podcast: /:podcast_slug/:episode_slug renders with comments")
+
       expect(page).to have_selector(".comment-deep-0#comment-node-#{comment.id}", visible: :visible, count: 1)
       expect(page).to have_selector(".comment-deep-1#comment-node-#{comment2.id}", visible: :visible, count: 1)
     end

spec/system/podcasts/user_visits_podcast_page_spec.rb

@@ -15,7 +15,9 @@ RSpec.describe "User visits a podcast page", type: :system do
     end
   end
 
-  it "displays podcast episodes" do
+  it "displays podcast episodes", js: true, percy: true do
+    Percy.snapshot(page, name: "Podcast: /:podcast_slug renders")
+
     expect(page).to have_selector("div.single-article", visible: :visible, count: 2)
   end
 

spec/system/podcasts/user_visits_podcasts_root_page_spec.rb

@@ -11,7 +11,9 @@ RSpec.describe "User visits /pod page", type: :system do
 
   before { visit "/pod" }
 
-  it "displays the podcasts" do
+  it "displays the podcasts", js: true, percy: true do
+    Percy.snapshot(page, name: "Podcast: /pod renders")
+
     within "#articles-list" do
       expect(page).to have_link(nil, href: podcast_episode1.path)
       expect(page).to have_link(nil, href: podcast_episode2.path)

spec/system/pro_memberships/user_creates_a_pro_membership_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe "Creates a Pro Membership", type: :system do
       visit "/settings/pro-membership"
       label = "Become a Pro member"
       click_on label
+
       expect(page).to have_content("You are now a Pro!")
     end
   end

spec/system/pro_memberships/user_visits_pro_page_spec.rb

@@ -11,6 +11,7 @@ RSpec.describe "Visits Pro Memberships page", type: :system do
 
     it "does not ask to become a pro member" do
       visit "/pro"
+
       expect(page).not_to have_content("Become a Pro member")
     end
   end
@@ -27,6 +28,7 @@ RSpec.describe "Visits Pro Memberships page", type: :system do
 
     it "asks to become a pro member" do
       visit "/pro"
+
       expect(page).to have_content("Become a Pro member")
     end
   end

spec/system/pro_memberships/user_visits_settings_pro_membership_page_spec.rb

@@ -48,9 +48,11 @@ RSpec.describe "Visits Pro Membership settings page", type: :system do
       sign_in user
     end
 
-    it "shows the status of the membership" do
+    it "shows the status of the membership", js: true, percy: true do
       visit "/settings/pro-membership"
 
+      Percy.snapshot(page, name: "Settings: /settings/pro-membership renders for pro role")
+
       expect(page).to have_content("Status")
       expect(page).to have_content("Expiration date")
       expect(page).to have_content("Never")
@@ -64,9 +66,11 @@ RSpec.describe "Visits Pro Membership settings page", type: :system do
       sign_in user
     end
 
-    it "shows the status of the membership" do
+    it "shows the status of the membership", js: true, percy: true do
       visit "/settings/pro-membership"
 
+      Percy.snapshot(page, name: "Settings: /settings/pro-membership renders for pro membership")
+
       expect(page).to have_content("Status")
       expect(page).to have_content("Expiration date")
       expect(page).to have_content(user.pro_membership.expires_at.to_date.to_s(:long))

spec/system/user/user_edits_integrations_spec.rb

@@ -23,8 +23,15 @@ RSpec.describe "User edits their integrations", type: :system, js: true do
       visit "/settings"
     end
 
+    it "renders the page", percy: true do
+      click_link "Integrations"
+
+      Percy.snapshot(page, name: "Settings: /settings renders integrations")
+    end
+
     it "has connect-to-stackbit prompt" do
       click_link "Integrations"
+
       expect(page).to have_text("Connect to Stackbit")
     end
 

spec/system/user/user_settings_response_templates_spec.rb

@@ -11,15 +11,34 @@ RSpec.describe "User uses response templates settings", type: :system do
     end
 
     context "when user has a response template already" do
-      it "can go to the edit page of the response template" do
+      it "renders the page", js: true, percy: true do
+        visit "/settings/response-templates"
+
+        Percy.snapshot(page, name: "Settings: /response-templates renders")
+
+        click_link "Edit"
+
+        Percy.snapshot(page, name: "Settings: /response-templates can edit")
+      end
+
+      it "can go to the edit page of the response template", js: true do
         visit "/settings/response-templates"
         click_link "Edit"
+
         expect(page).to have_current_path "/settings/response-templates/#{response_template.id}", ignore_query: true
       end
 
+      it "renders the page when deleting a response template", js: true, percy: true do
+        visit "/settings/response-templates"
+        accept_confirm { click_button "Remove" }
+
+        Percy.snapshot(page, name: "Settings: /response-templates can delete")
+      end
+
       it "shows the proper message when deleting a reponse template", js: true do
         visit "/settings/response-templates"
         accept_confirm { click_button "Remove" }
+
         expect(page).to have_text "was deleted."
       end
     end

spec/system/user/view_user_comments_spec.rb

@@ -15,7 +15,9 @@ RSpec.describe "User comments", type: :system do
       end
     end
 
-    it "shows user's comments" do
+    it "shows user's comments", js: true, percy: true do
+      Percy.snapshot(page, name: "Comments: /:user_id/comments renders")
+
       within("#substories div.index-comments") do
         expect(page).to have_content("All 2 Comments")
         expect(page).to have_link(nil, href: comment.path)

spec/system/user/view_user_index_spec.rb

@@ -11,7 +11,9 @@ RSpec.describe "User index", type: :system do
     context "when 1 article" do
       before { visit "/user3000" }
 
-      it "shows the header", js: true do
+      it "shows the header", js: true, percy: true do
+        Percy.snapshot(page, name: "User: /:user_id renders")
+
         within("h1") { expect(page).to have_content(user.name) }
         within(".profile-details") do
           expect(page).to have_button("+ FOLLOW")
@@ -63,10 +65,14 @@ RSpec.describe "User index", type: :system do
   context "when user has an organization membership" do
     before do
       user.organization_memberships.create(organization: organization, type_of_user: "member")
+      visit "/user3000"
     end
 
-    it "shows organizations" do
-      visit "/user3000"
+    it "renders the page", js: true, percy: true do
+      Percy.snapshot(page, name: "User: /:user_id renders with organization membership")
+    end
+
+    it "shows organizations", js: true do
       expect(page).to have_css("#sidebar-wrapper-right h4", text: "organizations")
     end
   end
@@ -77,6 +83,10 @@ RSpec.describe "User index", type: :system do
       visit "/user3000"
     end
 
+    it "renders the page", js: true, percy: true do
+      Percy.snapshot(page, name: "User: /:user_id for logged in user's own profile")
+    end
+
     it "shows the header", js: true do
       within("h1") { expect(page).to have_content(user.name) }
       within(".profile-details") do

spec/system/user_selects_looking_for_work_spec.rb

@@ -2,15 +2,18 @@ require "rails_helper"
 
 RSpec.describe "Looking For Work", type: :system do
   let(:user) { create(:user) }
-  let(:tag) { create(:tag, name: "hiring") }
 
   before do
+    create(:tag, name: "hiring")
     sign_in(user)
-    tag
+    visit "/settings"
   end
 
-  it "user selects looking for work and autofollows hiring tag" do
-    visit "/settings"
+  it "renders the page", js: true, percy: true do
+    Percy.snapshot(page, name: "Logged in user: settings page")
+  end
+
+  it "user selects looking for work and autofollows hiring tag", js: true do
     page.check "Looking for work"
     sidekiq_perform_enqueued_jobs do
       click_button("Save")

spec/system/user_uses_the_editor_spec.rb

@@ -23,26 +23,41 @@ RSpec.describe "Using the editor", type: :system do
   end
 
   describe "Previewing an article", js: true do
+    before do
+      fill_markdown_with(read_from_file(raw_text))
+      page.execute_script("window.scrollTo(0, -100000)")
+      find("button", text: /\APREVIEW\z/).click
+    end
+
     after do
       page.evaluate_script("window.onbeforeunload = function(){}")
     end
 
-    it "fill out form with rich content and click preview" do
-      fill_markdown_with(read_from_file(raw_text))
-      page.execute_script("window.scrollTo(0, -100000)")
-      find("button", text: /\APREVIEW\z/).click
+    it "renders the page", percy: true do
+      Percy.snapshot(page, name: "Using the editor: preview an article")
+    end
+
+    it "fills out form with rich content and click preview" do
       article_body = find("div.body")["innerHTML"]
       article_body.gsub!(/"https:\/\/res\.cloudinary\.com\/.{1,}"/, "cloudinary_link")
+
       Approvals.verify(article_body, name: "user_preview_article_body", format: :html)
     end
   end
 
   describe "Submitting an article", js: true do
+    it "renders the page", percy: true do
+      fill_markdown_with(read_from_file(raw_text))
+      find("button", text: /\ASAVE CHANGES\z/).click
+      Percy.snapshot(page, name: "Using the editor: submit an article")
+    end
+
     it "fill out form and submit" do
       fill_markdown_with(read_from_file(raw_text))
       find("button", text: /\ASAVE CHANGES\z/).click
       article_body = find(:xpath, "//div[@id='article-body']")["innerHTML"]
       article_body.gsub!(/"https:\/\/res\.cloudinary\.com\/.{1,}"/, "cloudinary_link")
+
       Approvals.verify(article_body, name: "user_preview_article_body", format: :html)
     end
 
@@ -54,10 +69,19 @@ RSpec.describe "Using the editor", type: :system do
       end
     end
 
-    it "user write and publish an article without a title" do
-      fill_markdown_with(template.gsub("Sample Article", ""))
-      find("button", text: /\ASAVE CHANGES\z/).click
-      expect(page).to have_text(/title:  can't be blank/)
+    context "without a title", js: true do
+      before do
+        fill_markdown_with(template.gsub("Sample Article", ""))
+        find("button", text: /\ASAVE CHANGES\z/).click
+      end
+
+      it "renders the page", percy: true do
+        Percy.snapshot(page, name: "Using the editor: publishing an article without a title")
+      end
+
+      it "shows a message that the title cannot be blank" do
+        expect(page).to have_text(/title:  can't be blank/)
+      end
     end
   end
 end

spec/system/user_views_a_reading_list_spec.rb

@@ -8,11 +8,14 @@ RSpec.describe "Reading list", type: :system do
   end
 
   context "without tags" do
-    context "when large readinglist" do
+    context "when large reading list" do
       before { create_list(:reading_reaction, 46, user: user) }
 
-      it "shows the large reading list" do
+      it "shows the large reading list", js: true, percy: true do
         visit "/readinglist"
+
+        Percy.snapshot(page, name: "Viewing a reading list: shows a large list")
+
         expect(page).to have_selector("#reading-list", visible: :visible)
       end
     end

spec/system/user_visits_a_comments_page_spec.rb

@@ -7,14 +7,20 @@ RSpec.describe "Views an article", type: :system, js: true do
   let!(:comment) { create(:comment, commentable: article) }
   let!(:child_comment) { create(:comment, parent: comment, commentable: article) }
 
-  it "shows all comments" do
+  it "shows all comments", percy: true do
     create(:comment, commentable: article)
     visit "#{article.path}/comments"
+
+    Percy.snapshot(page, name: "Viewing an article: shows all comments")
+
     expect(page).to have_selector(".single-comment-node", visible: :visible, count: 3)
   end
 
-  it "shows a thread" do
+  it "shows a thread", percy: true do
     visit "#{article.path}/comments/#{comment.id_code_generated}"
+
+    Percy.snapshot(page, name: "Viewing an article: shows a thread")
+
     expect(page).to have_selector(".single-comment-node", visible: :visible, count: 2)
     expect(page).to have_selector(".comment-deep-0#comment-node-#{comment.id}", visible: :visible, count: 1)
     expect(page).to have_selector(".comment-deep-1#comment-node-#{child_comment.id}", visible: :visible, count: 1)

spec/system/videos/user_visits_videos_spec.rb

@@ -5,8 +5,11 @@ RSpec.describe "User visits the videos page", type: :system do
     before { visit "/videos" }
 
     describe "meta tags" do
-      it "contains the qualified community name in og:site_name" do
+      it "contains the qualified community name in og:site_name", js: true, percy: true do
         selector = "meta[property='og:site_name'][content='#{community_qualified_name}']"
+
+        Percy.snapshot(page, name: "Videos: /videos renders")
+
         expect(page).to have_selector(selector, visible: :hidden)
       end
     end