Updated techniques, retagged tools

thingsinjars · Aug 3, 2013 · d369ba2 · d369ba2
1 parent d560e29
commit d369ba2
Show file tree

Hide file tree

Showing 13 changed files with 343 additions and 34 deletions.
diff --git a/guides/declarative-languages.html b/guides/declarative-languages.html
@@ -26,8 +26,20 @@ <h2>The why and how of CSS testing.</h2>
       </nav>
     </header>
     <div class="contain">
-      <section><h3>Testing declarative languages</h3>
-<p>Unlike most other web technologies you may use (JS, PHP, Ruby, etc.), CSS is a <a href="http://en.wikipedia.org/wiki/Declarative_programming">declarative language</a>.</p>
+      <section><h2>Testing declarative languages</h2>
+<p>Unlike most other web technologies you may use (JS, PHP, Ruby, etc.), CSS is a <a href="http://en.wikipedia.org/wiki/Declarative_programming">declarative language</a>.
+
+</p>
+<h3>Imperative</h3>
+<p>With an imperative or procedural language, the developer is essentially telling the computer what to do, &quot;I give you this number, you add two to it, give me the result&quot;. This approach lends itself well to creating small, testable little units where the developer can modify the input, measure the output and as long as the thing that comes out is what was expected, the test passes. The developer can have confidence the code inside is doing its job.
+
+</p>
+<h3>Declarative</h3>
+<p>With a declarative language such as CSS or HTML, the developer says &quot;This is what I want out. I don&apos;t care how you make it happen&quot;. If you ask for an element to be blue, you&apos;re not explicitly giving the computer instructions on how to make that element blue, you just want it to be blue. The bits that would be testable in a traditional sense are the bits covered by the browser&apos;s internals.
+
+</p>
+<h3>Change the focus</h3>
+<p>It is not, however, impossible to test declarative languages, it just means we need to be a bit cunning about what we&apos;re testing. The <a href="/techniques/">techniques listed</a> cover a variety of methods. Some test the rules of the cascade and precedence, some compare purely visual output.</p>
 
       </section>
     </div>

diff --git a/source/contents/techniques/computed-style.md b/source/contents/techniques/computed-style.md
@@ -5,9 +5,14 @@ section: techniques
 
 ## Computed style
 
-This is related to the [Frozen DOM](/techniques/frozen-dom.html) but aims to hold slightly fewer variables fixed to increase the flexibility of the tools. With this technique, the
+This is related to the [Frozen DOM](/techniques/frozen-dom.html) but aims to hold slightly fewer variables fixed to increase the flexibility of the tools. With this technique, the test unit contains the CSS selector required to access the element under test and a list of styles which should be applied to the element. Unlike the Frozen DOM, this technique does not keep a local copy of the project DOM. This means that it can be more reliable. If the selector is specific enough to refer to a single element but generic enough to match it anywhere, the page can be restructured or the content modifed without requiring a rewrite of all tests.
+
+This technique is called 'Computed Style' because most of the tools rely on measuring applied styles at runtime via the <code>[window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle)</code> function of JavaScript.
 
 ### Tools
 
   * [GhostStory](/tools/ghoststory.html)
   * [Needle](/tools/needle.html)
+  * [CSSunit](/tools/cssunit.html)
+  * [cssUnit](/tools/cssunit-shepard.html)
+  * [CSS Test](/tools/css-test.html)
diff --git a/source/contents/techniques/frozen-dom.md b/source/contents/techniques/frozen-dom.md
@@ -5,7 +5,7 @@ section: techniques
 
 ## Frozen DOM
 
-In each of the different [techniques](/techniques/) available, there is always something kept the same so that other things can be modified. With Frozen DOM tests, the idea is to take a snapshot of the DOM structure of the page you wish to test and the styles that are currently applied to those DOM elements. When you make a change in your CSS, you apply the new stylesheet to the (old) Frozen DOM. If the styles that are applied to the element via the cascade are the ones measured earlier and expected, it counts as a pass. If not, it's a fail.
+In each of the different [techniques](/techniques/) available, there is always something kept the same so that other things can be modified. With Frozen DOM tests, the idea is to take a snapshot of the DOM structure of the page you wish to test and the styles that are currently applied to those DOM elements. You also record the CSS selector of the element so that the test can find it. When you make a change in your CSS, you apply the new stylesheet to the (old) Frozen DOM. If the styles that are applied to the element via the cascade are the ones measured earlier and expected, it counts as a pass. If not, it's a fail.
 
 This technique has a few flaws and most of the benefits it provides are more easily and dependably available with [Computed Style](/techniques/computed-style.html) tests.
 
@@ -15,6 +15,4 @@ On the plus side, they are easy to automate and, if the project DOM structure do
 
 ### Tools
 
-  * [cssert](/tools/cssert.html)
-  * [cssunit](/tools/cssunit.html)
-  * [css-test](/tools/css-test.html)
+  * [cssert](/tools/cssert.html)
diff --git a/source/contents/tools/cssunit.md b/source/contents/tools/cssunit.md
@@ -10,7 +10,7 @@ _Note: One of at least two tools with the same name._
 This runs via [QUnit](http://qunitjs.com/).
 
 ### Techniques
-  * [Frozen DOM](/techniques/frozen-dom.html)
+  * [Computed Style](/techniques/computed-style.html)
 
 ### Links
 

diff --git a/techniques/computed-style.html b/techniques/computed-style.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="/images/favicon.png" rel="shortcut icon" type="image/png">
+    <link href="http://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="/styles/main.css">
+    <link rel="stylesheet" type="text/css" href="/styles/prism.css">
+  </head>
+  <body class="techniques">
+    <header>
+      <div class="contain">
+        <h1><a href="/">csste.st</a></h1>
+        <h2>The why and how of CSS testing.</h2>
+      </div>
+      <nav>
+        <ul>
+          <li class="techniques-nav"><a href="/techniques/">Techniques</a></li>
+          <li class="tools-nav"><a href="/tools/">Tools</a></li>
+          <li class="guides-nav"><a href="/guides/">Guides</a></li>
+          <li class="getting-started-nav"><a href="/getting-started/">Getting started</a></li>
+        </ul>
+        <p>This site is a work in progress. Until it's ready, please <a href="http://csste.st/slides/">check out the slides</a>.</p>
+        <p>If you want to help out, <a href="https://github.com/thingsinjars/csstest">fork the project.</a></p>
+      </nav>
+    </header>
+    <div class="contain">
+      <section><h2>Computed style</h2>
+<p>This is related to the <a href="/techniques/frozen-dom.html">Frozen DOM</a> but aims to hold slightly fewer variables fixed to increase the flexibility of the tools. With this technique, the test unit contains the CSS selector required to access the element under test and a list of styles which should be applied to the element. Unlike the Frozen DOM, this technique does not keep a local copy of the project DOM. This means that it can be more reliable. If the selector is specific enough to refer to a single element but generic enough to match it anywhere, the page can be restructured or the content modifed without requiring a rewrite of all tests.
+
+</p>
+<p>This technique is called &apos;Computed Style&apos; because most of the tools rely on measuring applied styles at runtime via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle">window.getComputedStyle</a></code> function of JavaScript.
+
+</p>
+<h3>Tools</h3>
+<ul>
+<li><a href="/tools/ghoststory.html">GhostStory</a></li>
+<li><a href="/tools/needle.html">Needle</a></li>
+<li><a href="/tools/cssunit.html">CSSunit</a></li>
+<li><a href="/tools/cssunit-shepard.html">cssUnit</a></li>
+<li><a href="/tools/css-test.html">CSS Test</a></li>
+</ul>
+
+      </section>
+    </div>
+    <footer>
+      <div class="contain">
+        <p>Curated by <a href="http://twitter.com/thingsinjars">Simon Madine</a></p>
+      </div>
+    </footer>
+    <script src="/scripts/prism.js"></script>
+    <script src="/scripts/prism.gherkin.js"></script>
+  </body>
+</html>
diff --git a/techniques/frozen-dom.html b/techniques/frozen-dom.html
@@ -27,6 +27,22 @@ <h2>The why and how of CSS testing.</h2>
     </header>
     <div class="contain">
       <section><h2>Frozen DOM</h2>
+<p>In each of the different <a href="/techniques/">techniques</a> available, there is always something kept the same so that other things can be modified. With Frozen DOM tests, the idea is to take a snapshot of the DOM structure of the page you wish to test and the styles that are currently applied to those DOM elements. You also record the CSS selector of the element so that the test can find it. When you make a change in your CSS, you apply the new stylesheet to the (old) Frozen DOM. If the styles that are applied to the element via the cascade are the ones measured earlier and expected, it counts as a pass. If not, it&apos;s a fail.
+
+</p>
+<p>This technique has a few flaws and most of the benefits it provides are more easily and dependably available with <a href="/techniques/computed-style.html">Computed Style</a> tests.
+
+</p>
+<p>One drawback is that tests using this tend to require a lot of maintenance. They don&apos;t automatically match your structure so if you change the site, you must also change the test. This can lead to tests being abandoned due to little return for lots of effort. The main problem with this technique, however, is that the tests can still be run successfully even when out-of-date. They can cause a false sense of security by not actually representing the live state of the site.
+
+</p>
+<p>On the plus side, they are easy to automate and, if the project DOM structure doesn&apos;t change often, easy to set up.
+
+</p>
+<h3>Tools</h3>
+<ul>
+<li><a href="/tools/cssert.html">cssert</a></li>
+</ul>
 
       </section>
     </div>

diff --git a/techniques/index.html b/techniques/index.html
@@ -31,18 +31,13 @@ <h2>The why and how of CSS testing.</h2>
 
 </p>
 <ul>
-<li><p><a href="/techniques/syntax-checks.html">Syntax checks</a></p>
-</li>
-<li><p><a href="/techniques/house-styleguide.html">House styleguide</a></p>
-</li>
-<li><p><a href="/techniques/project-styleguide.html">Project styleguide</a></p>
-</li>
-<li><p><a href="/techniques/reference-comparison.html">Reference browser comparison</a></p>
-</li>
-<li><p><a href="/techniques/image-diff.html">Image diff</a></p>
-</li>
-<li><p><a href="/techniques/frozen-dom.html">Frozen DOM</a></p>
-</li>
+<li><a href="/techniques/computed-style.html">Computed Style</a></li>
+<li><a href="/techniques/frozen-dom.html">Frozen DOM</a></li>
+<li><a href="/techniques/house-styleguide.html">House styleguide</a></li>
+<li><a href="/techniques/image-diff.html">Image diff</a></li>
+<li><a href="/techniques/project-styleguide.html">Project styleguide</a></li>
+<li><a href="/techniques/reference-comparison.html">Reference browser comparison</a></li>
+<li><a href="/techniques/syntax-checks.html">Syntax checks</a></li>
 </ul>
 
       </section>

diff --git a/tools/cactus.html b/tools/cactus.html
@@ -1,5 +1,35 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><link href="/images/favicon.png" rel="shortcut icon" type="image/png"><link href="http://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet" type="text/css"><link rel="stylesheet" type="text/css" href="/styles/main.css"><link rel="stylesheet" type="text/css" href="/styles/prism.css"></head><body class="tools"><header><div class="contain"><h1><a href="/">csste.st</a></h1><h2>The why and how of CSS testing.</h2></div><nav><ul><li class="techniques-nav"><a href="/techniques/">Techniques</a></li><li class="tools-nav"><a href="/tools/">Tools</a></li><li class="guides-nav"><a href="/guides/">Guides</a></li><li class="getting-started-nav"><a href="/getting-started/">Getting started</a></li></ul><p>This site is a work in progress. Until it's ready, please <a href="http://csste.st/slides/">check out the slides</a>.</p><p>If you want to help out, <a href="https://github.com/thingsinjars/csstest">fork the project.</a></p></nav></header><div class="contain"><section><h2>Cactus</h2>
-<p>CSS Testing Framework Proof of Concept</p>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="/images/favicon.png" rel="shortcut icon" type="image/png">
+    <link href="http://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="/styles/main.css">
+    <link rel="stylesheet" type="text/css" href="/styles/prism.css">
+  </head>
+  <body class="tools">
+    <header>
+      <div class="contain">
+        <h1><a href="/">csste.st</a></h1>
+        <h2>The why and how of CSS testing.</h2>
+      </div>
+      <nav>
+        <ul>
+          <li class="techniques-nav"><a href="/techniques/">Techniques</a></li>
+          <li class="tools-nav"><a href="/tools/">Tools</a></li>
+          <li class="guides-nav"><a href="/guides/">Guides</a></li>
+          <li class="getting-started-nav"><a href="/getting-started/">Getting started</a></li>
+        </ul>
+        <p>This site is a work in progress. Until it's ready, please <a href="http://csste.st/slides/">check out the slides</a>.</p>
+        <p>If you want to help out, <a href="https://github.com/thingsinjars/csstest">fork the project.</a></p>
+      </nav>
+    </header>
+    <div class="contain">
+      <section><h2>Cactus</h2>
+<p>CSS Testing Framework Proof of Concept
+
+</p>
 <h3>Presentation</h3>
 <ul>
 <li><a href="https://speakerdeck.com/winston/wah-lau-css-can-be-tested-too">WAH LAU! CSS Can Be Tested Too!</a></li>
@@ -8,4 +38,15 @@ <h3>Links</h3>
 <ul>
 <li><a href="https://github.com/winston/cactus">Source</a></li>
 </ul>
-</section></div><footer><div class="contain"><p>Curated by <a href="http://twitter.com/thingsinjars">Simon Madine</a></p></div></footer><script src="/scripts/prism.js"></script><script src="/scripts/prism.gherkin.js"></script></body></html>
+
+      </section>
+    </div>
+    <footer>
+      <div class="contain">
+        <p>Curated by <a href="http://twitter.com/thingsinjars">Simon Madine</a></p>
+      </div>
+    </footer>
+    <script src="/scripts/prism.js"></script>
+    <script src="/scripts/prism.gherkin.js"></script>
+  </body>
+</html>
diff --git a/tools/cssunit.html b/tools/cssunit.html
@@ -35,7 +35,7 @@ <h2>The why and how of CSS testing.</h2>
 </p>
 <h3>Techniques</h3>
 <ul>
-<li><a href="/techniques/frozen-dom.html">Frozen DOM</a></li>
+<li><a href="/techniques/computed-style.html">Computed Style</a></li>
 </ul>
 <h3>Links</h3>
 <ul>

diff --git a/tools/huxley.html b/tools/huxley.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="/images/favicon.png" rel="shortcut icon" type="image/png">
+    <link href="http://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="/styles/main.css">
+    <link rel="stylesheet" type="text/css" href="/styles/prism.css">
+  </head>
+  <body class="tools">
+    <header>
+      <div class="contain">
+        <h1><a href="/">csste.st</a></h1>
+        <h2>The why and how of CSS testing.</h2>
+      </div>
+      <nav>
+        <ul>
+          <li class="techniques-nav"><a href="/techniques/">Techniques</a></li>
+          <li class="tools-nav"><a href="/tools/">Tools</a></li>
+          <li class="guides-nav"><a href="/guides/">Guides</a></li>
+          <li class="getting-started-nav"><a href="/getting-started/">Getting started</a></li>
+        </ul>
+        <p>This site is a work in progress. Until it's ready, please <a href="http://csste.st/slides/">check out the slides</a>.</p>
+        <p>If you want to help out, <a href="https://github.com/thingsinjars/csstest">fork the project.</a></p>
+      </nav>
+    </header>
+    <div class="contain">
+      <section><h2>Huxley</h2>
+<p>Huxley is a test-like system for catching visual regressions in Web applications using <a href="/techniques/image-diff.html">image diff</a> tests.
+
+</p>
+<p>An key feature of this tool is that the testing framework can be run in &apos;record&apos; mode to capture test scenarios automatically. This greatly simplifies the process of creating the initial test cases.
+
+
+</p>
+<h3>Links</h3>
+<ul>
+<li><a href="https://github.com/facebook/huxley">Project site</a></li>
+</ul>
+
+      </section>
+    </div>
+    <footer>
+      <div class="contain">
+        <p>Curated by <a href="http://twitter.com/thingsinjars">Simon Madine</a></p>
+      </div>
+    </footer>
+    <script src="/scripts/prism.js"></script>
+    <script src="/scripts/prism.gherkin.js"></script>
+  </body>
+</html>