Add Percy snapshot to CircleCI

Capybara instructions: https://docs.percy.io/docs/capybara

.circleci/config.yml

@@ -16,22 +16,32 @@ jobs:
     - checkout
     - restore_cache:
         keys:
-        - v1-dependencies-{{ checksum "Gemfile.lock" }}
-        - v1-dependencies-
+        - v1-bundler-{{ checksum "Gemfile.lock" }}
+        - v1-bundler-
     - run: bundle install --jobs=4 --retry=3 --path vendor/bundle
     - save_cache:
         paths:
         - ./vendor/bundle
-        key: v1-dependencies-{{ checksum "Gemfile.lock" }}
+        key: v1-bundler-{{ checksum "Gemfile.lock" }}
+    - restore_cache:
+        keys:
+          - v1-yarn-{{ checksum "yarn.lock" }}
+          - v1-yarn-
+    - run: yarn install
+    - save_cache:
+        key: v1-yarn-{{ checksum "yarn.lock" }}
+        paths:
+          - ~/.cache/yarn
+          - ./node_modules
 
   run_checks:
     <<: *defaults
     steps:
     - checkout
     - restore_cache:
         keys:
-        - v1-dependencies-{{ checksum "Gemfile.lock" }}
-        - v1-dependencies-
+        - v1-bundler-{{ checksum "Gemfile.lock" }}
+        - v1-bundler-
     - run: bundle --path vendor/bundle
     - run: bundle exec rubocop
 
@@ -43,18 +53,24 @@ jobs:
     - checkout
     - restore_cache:
         keys:
-        - v1-dependencies-{{ checksum "Gemfile.lock" }}
-        - v1-dependencies-
+        - v1-bundler-{{ checksum "Gemfile.lock" }}
+        - v1-bundler-
+    - restore_cache:
+        keys:
+        - v1-yarn-{{ checksum "yarn.lock" }}
+        - v1-yarn-
     - run: bundle --path vendor/bundle
+    - run: yarn install
     - run: mkdir /tmp/test-results
     - type: shell
       command: |
+        yarn run percy exec -- \
         bundle exec rspec --profile 10 \
                           --require ./spec/support/pre_documentation_formatter.rb \
                           --format RspecJunitFormatter \
                           --out /tmp/test-results/rspec.xml \
                           --format PreDocumentationFormatter \
-                          $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
+                          spec/**/*_spec.rb
     # collect reports
     - store_test_results:
         path: /tmp/test-results
@@ -72,4 +88,5 @@ workflows:
         - install_dependencies
     - run_tests:
         requires:
-        - install_dependencies
+        - install_dependencies
+

.gitignore

@@ -9,3 +9,6 @@
 /.idea
 /spec/test_app/tmp/
 /spec/test_app/log/
+/node_modules
+yarn-debug.log*
+.yarn-integrity

Gemfile.lock

@@ -143,6 +143,7 @@ GEM
     parallel (1.13.0)
     parser (2.6.0.0)
       ast (~> 2.4.0)
+    percy-capybara (4.0.0.pre.beta2)
     powerpack (0.1.2)
     prism-rails (1.6.0.3)
       railties (>= 4.2, < 6)
@@ -264,6 +265,7 @@ DEPENDENCIES
   capybara-selenium
   cfa-styleguide!
   github_changelog_generator
+  percy-capybara (~> 4.0.0.pre.beta2)
   pry-byebug
   rails (>= 3.1)
   rake (~> 10.0)

cfa-styleguide.gemspec

@@ -42,6 +42,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "capybara"
   spec.add_development_dependency "capybara-selenium"
   spec.add_development_dependency "github_changelog_generator"
+  spec.add_development_dependency "percy-capybara", "~> 4.0.0.pre.beta2"
   spec.add_development_dependency "pry-byebug"
   spec.add_development_dependency "rails", ">= 3.1"
   spec.add_development_dependency "rake", "~> 10.0"

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@percy/agent": "^0.1.17"
+  }
+}

spec/support/examples_helper.rb

@@ -0,0 +1,17 @@
+module ExamplesHelper
+  def each_example
+    example_files = Dir.glob File.expand_path("../../app/views/examples/**/*.html.erb", __dir__)
+
+    example_files.each do |example_file|
+      example_filepath = example_file.match(/app\/views\/examples\/(.*)\.html.erb/)[1]
+      example_path = File.dirname(example_filepath) + "/" + File.basename(example_filepath).sub(/^_/, "")
+      example_viewpath = "/cfa/styleguide/examples/#{example_path}"
+
+      yield(example_path, example_viewpath, example_file)
+    end
+  end
+end
+
+RSpec.configure do |config|
+  config.extend ExamplesHelper, type: :system
+end

spec/support/percy_snapshot.rb

@@ -0,0 +1,13 @@
+require "percy"
+
+module PercySnapshot
+  def percy_snapshot(name)
+    if ENV["PERCY_TOKEN"].present?
+      Percy.snapshot(page, name: name)
+    end
+  end
+end
+
+RSpec.configure do |config|
+  config.include PercySnapshot, type: :system
+end

spec/system/accessibility_spec.rb

@@ -39,19 +39,14 @@
 ].freeze
 
 RSpec.describe "Acessibility", js: true do
-  describe "example" do
-    example_files = Dir.glob File.expand_path("../../app/views/examples/**/*.html.erb", __dir__)
+  each_example do |example, example_path|
+    describe example do
+      it "passes Axe matchers" do
+        pending("temporarily ignoring accessibility checks") if FIXABLE_ACCESSIBILITY_EXAMPLES.include?(example)
 
-    example_files.each do |example_file|
-      example_filepath = example_file.match(/app\/views\/examples\/(.*)\.html.erb/)[1]
-      example_path = File.dirname(example_filepath) + "/" + File.basename(example_filepath).sub(/^_/, "")
+        visit example_path
 
-      it "is valid - #{example_path}" do
-        pending("temporarily ignoring accessibility checks") if FIXABLE_ACCESSIBILITY_EXAMPLES.include?(example_path)
-
-        visit "/cfa/styleguide/examples/#{example_path}"
-
-        accessibility_skips = GENERAL_ACCESSIBILITY_SKIPS + SPECIFIC_ACCESSIBILITY_SKIPS.fetch(example_path, [])
+        accessibility_skips = GENERAL_ACCESSIBILITY_SKIPS + SPECIFIC_ACCESSIBILITY_SKIPS.fetch(example, [])
         expect(page).to be_accessible.skipping(*accessibility_skips)
       end
     end

spec/system/examples_spec.rb

@@ -6,4 +6,13 @@
 
     expect(page.status_code).to eq 200
   end
+
+  each_example do |example, example_path|
+    describe example do
+      it "has a Percy snapshot", js: true do
+        visit example_path
+        percy_snapshot example
+      end
+    end
+  end
 end