Create unit tests that test css syles

With the use of css selectors to apply styles (for example the background image of the '#footer #footer-img #si-logo' in the about page), we need to also test actual css that is being applied to the page

Based on a test I wrote for NWR I was able to use juice to create an html string with the CSS stylesheets inlined, which when parsed with cheerio provides a really nice way to test css (and to ensure that the UI is still as expected (with every code push)

Here is the first test that shows this in action (from /QA/tests/jade-anonymous-users.coffee)

extract_Style_Data = (styleCss)->
    items = {}
    for item in styleCss.split(';')
      if (item)
        items[item.split(':').first().trim()] =item.split(':').second().trim()
    return items

  check_Generic_Footer_Css = (html, baseUrl, next)->
    juice   = require('juice')
    cheerio = require('cheerio')
    juice.juiceContent html, { url: baseUrl}, (err, cssHtml)->
      $css = cheerio.load(cssHtml)
      footer_Attr = $css('#footer #footer-img #si-logo').attr()
      footer_Attr.assert_Is {  id: 'si-logo'
                             , style: 'background: url(../assets/logos/logos.jpg) no-repeat; background-position: 0px -50px; height: 50px; width: 250px; margin: 0 auto;' }

      items = extract_Style_Data(footer_Attr.style)

      items['background'].assert_Is('url(../assets/logos/logos.jpg) no-repeat' )
      next()

Next we need to expand this and start testing the main CSS components of each page.

This GH Issue should track the beginning of that workflow and the existence of helper classes to do this (once that is done, we can create other issues to track specific gaps).

We should also start using this technique from now on when writing regression tests

So far juice is working great, but if there are issues (like https://github.com/Automattic/juice/issues/83) we could also try Styliner

TeamMentor / TM_4_0_Design

Create unit tests that test css syles #188