Revert "chore(specs): Remove CSS Critic"

This reverts commit 7de64e4.
pivotal-cf · Jul 7, 2015 · 6c78ea3 · 6c78ea3
1 parent 3918e0f
commit 6c78ea3
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,11 @@ node_modules/
 /dist/
 *.zip
 
+## CssCritic
+
+spec/css/components/
+spec/css/regressionRunner.js
+
 ## Specific to RubyMotion:
 .dat*
 .repl_history

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -108,6 +108,10 @@ This will ensure our conversation doesn't get lost in email or slack.
    git checkout -b feature/<short_description_of_feature>
    ```
 
+1. **Before you make any changes**,
+   [setup a CssCritic test baseline](#set-a-baseline-to-test-against-before-making-any-changes).
+  This will allow you to test for regressions after you make changes.
+
 1. Commit your changes in logical chunks. Our commit conventions are very
    particular -- please read over our [commit guidelines](#commit-guidelines).
    Each commit should look something like this:
@@ -130,6 +134,8 @@ This will ensure our conversation doesn't get lost in email or slack.
 1. [Document your component](#documenting-components) in the styleguide and the
    package README.
 
+1. **Before you push**, [test for regressions with CssCritic](#rerun-the-test-suite-for-regressions-before-you-commitmake-a-pull-request).
+
 1. Rebase against upstream, and then push your changes
 
    ```bash
@@ -373,7 +379,34 @@ what you are trying to achieve and the best way to do that.
 
 ## Testing
 
-Coming soon!
+### Visual-diff regression testing
+
+(for the moment, this section is aspirational)
+
+We use CSSCritic for visual-diff regression testing. To test:
+
+#### Set a baseline to test against (before making any changes!!)
+1. Run `gulp css-critic`. This will open up Firefox and show all rendered test
+   files in a "yellow" state.
+1. Click "Accept All".
+
+#### Creating test fixtures for new components (very aspirational)
+
+Test fixtures are automatically created every time you create a `html_example`
+or `html_example_table` in the styleguide documentation.
+
+If you create a new component, re-run `gulp css-critic` to load the component in
+CssCritic, and set a baseline for it when you are happy with how it looks.
+
+#### Rerun the test suite for regressions (before you commit/make a pull request)
+1. Run `gulp css-critic`. This will open up Firefox.
+1. If there are no regressions, all components will be green.
+1. If you added any components, you'll have to click "Accept the rendered page"
+   for that component.
+1. If a component is red, this means either:
+    1. You broke something. Fix it!
+    2. You want to change the baseline. You should talk to the core Pivotal UI
+       team first, especially the designers.
 
 ## Commit guidelines
 

diff --git a/hologram/css_critic_test_generator.rb b/hologram/css_critic_test_generator.rb
@@ -0,0 +1,82 @@
+# Source: https://gist.github.com/jdcantrell/b0ad9a6bcbfc2551713f
+
+require 'pry'
+
+class CssCriticTestGenerator < Hologram::Plugin
+  attr :output_dir, :tests
+
+  HTML_HEADER = <<-eos
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="pivotal-ui.css">
+    <link rel="stylesheet" href="styleguide/styleguide.css">
+    <link rel="stylesheet" href="styleguide/github.css">
+    <link rel="stylesheet" disabled href="prismjs/prism.css">
+    <link rel="stylesheet" href="prismjs/prism-okaidia.css">
+  </head>
+  <body class="pam">
+  eos
+
+  HTML_FOOTER = "\n\n</body>\n</html>"
+
+  CODE_REGEX_HTML = /^\s*```html_example(?:_table)?(.*?)\s*```/m
+  CODE_REGEX_WRAPPED_HTML = /^\s*```html_wrapped_example(.*?)\s*```/m
+
+  def initialize(config, args)
+    @name = 'css-test'
+    @tests = []
+
+    super(config, args)
+
+    if self.is_active?
+      @output_dir = setup_dir(config)
+    end
+  end
+
+  def plugin(text, block, file)
+    write_test(block.config['name'], [text])
+    return ''
+  end
+
+  def block(comment_block, file, has_plugin)
+    unwrapped_tests = comment_block.markdown.scan(CODE_REGEX_HTML).flatten
+    wrapped_tests = comment_block.markdown.scan(CODE_REGEX_WRAPPED_HTML).flatten.map do |example|
+      %Q(<div class="styleguide-component-wrapper">#{example}</div>)
+    end
+    tests = unwrapped_tests + wrapped_tests
+    write_test(comment_block.config['name'], tests) unless tests.empty?
+  end
+
+  def finalize(pages)
+    puts "Tests can be found in #{@output_dir}"
+  end
+
+  def is_active?
+    true
+  end
+
+  private
+  def write_test(name, content)
+    test_name = "#{name}.html"
+
+    fh = File.open("#{@output_dir}/#{test_name}", 'w')
+
+    fh.write(HTML_HEADER)
+    for fragment in content
+      fh.write(fragment)
+    end
+    fh.write(HTML_FOOTER)
+
+    fh.close
+
+    @tests.push(test_name)
+  end
+
+  def setup_dir(config)
+    destination = config['destination'] + '/../spec/css/components'
+    FileUtils.mkdir_p(destination)
+    return Pathname.new(destination).realpath
+  end
+
+end
diff --git a/hologram_config.yml b/hologram_config.yml
@@ -32,3 +32,6 @@ index: intro
 nav_level: section
 
 exit_on_warnings: true
+
+plugins:
+  - ./hologram/css_critic_test_generator.rb
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "classnames": "^2.1.2",
     "conventional-changelog": "0.1.0-alpha.1",
     "conventional-recommended-bump": "0.0.1",
+    "csscritic": "^1.2.0",
     "del": "^0.1.3",
     "dr-frankenstyle": "^0.2.0",
     "envify": "^1.2.1",
@@ -37,6 +38,7 @@
     "gulp-jasmine-browser": "^0.1.2",
     "gulp-load-plugins": "^0.8.1",
     "gulp-minify-css": "^0.3.11",
+    "gulp-open": "^0.3.2",
     "gulp-plumber": "^0.6.6",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.3",

diff --git a/spec/css/regressionRunner.html b/spec/css/regressionRunner.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Regression Runner</title>
+  <meta charset="utf-8"/>
+
+  <!-- TODO: is there a better way to load csscritic.js? -->
+  <script src="../../node_modules/csscritic/csscritic.js"></script>
+  <script src="regressionRunner.js"></script>
+</head>
+<body>
+<button onclick="localStorage.clear(); window.location.reload();">Reset all tests</button>
+</body>
+</html>
diff --git a/tasks/test.js b/tasks/test.js
@@ -3,6 +3,10 @@ import gulp from 'gulp';
 import runSequence from 'run-sequence';
 import loadPlugins from 'gulp-load-plugins';
 import webpack from 'webpack-stream';
+import {map, merge} from 'event-stream';
+import reduce from 'stream-reduce';
+import File from 'vinyl';
+import path from 'path';
 const plugins = loadPlugins();
 
 gulp.task('ci', callback => runSequence(
@@ -41,6 +45,34 @@ gulp.task('rspec', ['monolith-serve'], function(done) {
   });
 });
 
+gulp.task('css-critic-prepare', ['monolith'], function() {
+  const regressionRunnerJsStream = gulp.src('./spec/css/components/*.html', {read: false})
+    .pipe(reduce((memo, file) => {
+      const name = path.basename(file.path, '.html');
+      memo.push(`csscritic.add({url: 'components/${name}.html', desc: '${name}'});`);
+      return memo;
+    }, []))
+    .pipe(map((filelist, callback) => {
+      const contents = `window.onload = function() {
+  csscritic.addReporter(csscritic.NiceReporter());
+  ${filelist.join('\n  ')}
+  csscritic.execute();
+}`;
+      callback(null, new File({path: 'regressionRunner.js', contents: new Buffer(contents)}));
+    }))
+    .pipe(gulp.dest('./spec/css'));
+
+  const cssCriticAssetsStream = gulp.src('build/**/!(*.html)')
+    .pipe(gulp.dest('spec/css/components/'));
+
+  return merge(regressionRunnerJsStream, cssCriticAssetsStream);
+});
+
+gulp.task('css-critic', ['css-critic-prepare'], function() {
+  return gulp.src('./spec/css/regressionRunner.html')
+    .pipe(plugins.open('./spec/css/regressionRunner.html', {app: 'firefox'}));
+});
+
 function reactTestAssets(options = {}) {
   return gulp.src('spec/pivotal-ui-react/**/*_spec.js')
     .pipe(plugins.plumber())