jdcantrell/css_critic_test_generator.rb

## css_critic_test_generator.rb
class CssTestGenerator < Hologram::Plugin
  attr :output_dir, :tests

  HTML_HEADER = <<-eos
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="/build/css/screen.css">
  </head>
  <body class="pam">
eos

  HTML_FOOTER = "\n\n</body>\n</html>"

  CODE_REGEX = /^\s*```html_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)
    #We create tests based of html_examples if a comment has the test
    #config and no plugin block
    if comment_block.config.has_key?('test') and !has_plugin
      tests = comment_block.markdown.scan(CODE_REGEX)
      write_test(comment_block.config['name'], tests.flatten) unless tests.empty?
    end
  end

  def finalize(pages)
    puts "Tests can be found in #{@output_dir}"
  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'] + '/../tests/'
    FileUtils.mkdir_p(destination)
    return Pathname.new(destination).realpath
  end

end

## example_doc_block.scss
/*doc
---
title: Buttons
name: button
category: Base CSS
author: Derek Reynolds
test: true
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnDefault" href="http://www.trulia.com/">Trulia</a>
```
If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

##Button Sizes
There are three 3 sizes for buttons: Large, medium (default)
and small. Simply apply the size modifier class for the desired size.


There are two other additional modifiers - `btnFullWidth` and `btnActive`. If the
names are not self-explanatory see the examples below.

Button                                                                |  Modifier Class
--------------------------------------------------------------------- | -----------------
<button class="btn btnDefault btnLrg">Large</button>                  | `btn btnDefault btnLrg`
<button class="btn btnDefault">Default</button>                       | `btn btnDefault`
<button class="btn btnDefault btnSml">Small</button>                  | `btn btnDefault btnSml`
<button class="btn btnDefault btnFullWidth">Full width</button>       | `btn btnDefault btnFullWidth`
<button class="btn btnDefault btnActive">Active Button State</button> | `btn btnDefault btnActive`

[[[plugin:css-test
<button class="btn btnDefault btnLrg">Large</button>
<button class="btn btnDefault">Default</button>
<button class="btn btnDefault btnSml">Small</button>
<button class="btn btnDefault btnFullWidth">Full width</button>
<button class="btn btnDefault btnActive">Active Button State</button>
]]]

*/
	class CssTestGenerator < Hologram::Plugin
	attr :output_dir, :tests

	HTML_HEADER = <<-eos
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="/build/css/screen.css">
	</head>
	<body class="pam">
	eos

	HTML_FOOTER = "\n\n</body>\n</html>"

	CODE_REGEX = /^\s```html_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)
	#We create tests based of html_examples if a comment has the test
	#config and no plugin block
	if comment_block.config.has_key?('test') and !has_plugin
	tests = comment_block.markdown.scan(CODE_REGEX)
	write_test(comment_block.config['name'], tests.flatten) unless tests.empty?
	end
	end

	def finalize(pages)
	puts "Tests can be found in #{@output_dir}"
	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'] + '/../tests/'
	FileUtils.mkdir_p(destination)
	return Pathname.new(destination).realpath
	end

	end
	/*doc
	---
	title: Buttons
	name: button
	category: Base CSS
	author: Derek Reynolds
	test: true
	---

	Button styles can be applied to any element. Typically you'll want to
	use either a `<button>` or an `<a>` element:

	```html_example
	<button class="btn btnDefault">Click</button>
	<a class="btn btnDefault" href="http://www.trulia.com/">Trulia</a>
	```
	If your button is actually a link to another page, please use the
	`<a>` element, while if your button performs an action, such as submitting
	a form or triggering some javascript event, then use a `<button>` element.

	##Button Sizes
	There are three 3 sizes for buttons: Large, medium (default)
	and small. Simply apply the size modifier class for the desired size.


	There are two other additional modifiers - `btnFullWidth` and `btnActive`. If the
	names are not self-explanatory see the examples below.

	Button \| Modifier Class
	--------------------------------------------------------------------- \| -----------------
	<button class="btn btnDefault btnLrg">Large</button> \| `btn btnDefault btnLrg`
	<button class="btn btnDefault">Default</button> \| `btn btnDefault`
	<button class="btn btnDefault btnSml">Small</button> \| `btn btnDefault btnSml`
	<button class="btn btnDefault btnFullWidth">Full width</button> \| `btn btnDefault btnFullWidth`
	<button class="btn btnDefault btnActive">Active Button State</button> \| `btn btnDefault btnActive`

	[[[plugin:css-test
	<button class="btn btnDefault btnLrg">Large</button>
	<button class="btn btnDefault">Default</button>
	<button class="btn btnDefault btnSml">Small</button>
	<button class="btn btnDefault btnFullWidth">Full width</button>
	<button class="btn btnDefault btnActive">Active Button State</button>
	]]]

	*/