it(`should have CSS that contains an img selector @product-description-component-css2`, async(() => {
   since('The ProductDescriptionComponent hasn\'t been created yet.').expect(productDescriptionCssFileExists).toBe(true);
   if(productDescriptionCssFileExists) {
     let parsed = CSSOM.parse(productDescriptionCssFile);
     since('There isn\'t an image tag selector in the ProductDescriptionComponent\'s CSS file right now.').expect(_.find(parsed.cssRules, {selectorText: 'img'})).not.toBeUndefined();
   }
 }));

 it(`should have CSS that contains an li selector @product-tracklisting-component-css3`, async(() => {
   since('The ProductTracklistingComponent hasn\'t been created yet.').expect(productTracklistingCssFileExists).toBe(true);
   if(productTracklistingCssFileExists) {
     let parsed = CSSOM.parse(productTracklistingCssFile);
     since('There isn\'t an `li` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(_.find(parsed.cssRules, {selectorText: 'li'})).not.toBeUndefined();
   }
 }));

  it(`should have CSS with a rule setting the font-family to Helvetica, Arial, sans-serif on the paragraph selector @product-description-component-css1`, async(() => {
    since('The ProductDescriptionComponent hasn\'t been created yet.').expect(productDescriptionCssFileExists).toBe(true);
    if(productDescriptionCssFileExists) {
      let parsed = CSSOM.parse(productDescriptionCssFile);

      let pRule = _.find(parsed.cssRules, { selectorText: 'p' })

      since('There isn\'t a paragraph selector in the ProductDescriptionComponent\'s CSS file right now.').expect(pRule).not.toBeUndefined();
      since('There isn\'t a paragraph selector in the ProductDescriptionComponent\'s CSS file right now.').expect(pRule.style.parentRule.selectorText).toBe('p');
      let fontRule;
      if (pRule.style['font'] != undefined) {
        fontRule = pRule.style['font'];
      } else if (pRule.style['font-family'] != undefined) {
        fontRule = pRule.style['font-family'];
      } else {
        since('Your paragraph selector doesn\'t have a `font-family` property.').expect(0).toBe(1);
      }

      if (fontRule != undefined) {
        let split = fontRule.split(',');
        for (let i = 0; i < split.length; i++) {
          split[i] = split[i].trim();
        }
        since('Your paragraph selector doesn\'t have a `font-family` property that\'s equal to `Helvetica, Arial, sans-serif`.').expect(split[0]).toBe('Helvetica');
        since('Your paragraph selector doesn\'t have a `font-family` property that\'s equal to `Helvetica, Arial, sans-serif`.').expect(split[1]).toBe('Arial');
        since('Your paragraph selector doesn\'t have a `font-family` property that\'s equal to `Helvetica, Arial, sans-serif`.').expect(split[2]).toBe('sans-serif');        
      }
    }
  }));

  it(`should have CSS with a rule setting the list-style-type to none on the ul selector @product-tracklisting-component-css2`, async(() => {
    since('The ProductTracklistingComponent hasn\'t been created yet.').expect(productTracklistingCssFileExists).toBe(true);
    if(productTracklistingCssFileExists) {
      let parsed = CSSOM.parse(productTracklistingCssFile);

      let ulRule = _.find(parsed.cssRules, { selectorText: 'ul' })

      since('There isn\'t a `ul` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(ulRule).not.toBeUndefined();
      since('There isn\'t a `ul` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(ulRule.style.parentRule.selectorText).toBe('ul');
      since('Your `ul` selector doesn\'t have a `list-style-type` property that\'s equal to `none`.').expect(ulRule.style['list-style-type']).toBe('none');
    }
  }));

  it(`should have CSS with a rule setting the line-height to 1 on the button selector @product-tracklisting-component-css4`, async(() => {
    since('The ProductTracklistingComponent hasn\'t been created yet.').expect(productTracklistingCssFileExists).toBe(true);
    if(productTracklistingCssFileExists) {
      let parsed = CSSOM.parse(productTracklistingCssFile);

      let buttonRule = _.find(parsed.cssRules, { selectorText: 'button' })

      since('There isn\'t a `button` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(buttonRule).not.toBeUndefined();
      since('There isn\'t a `button` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(buttonRule.style.parentRule.selectorText).toBe('button');
      since('Your `button` selector doesn\'t have a `line-height` property that\'s equal to `1`.').expect(buttonRule.style['line-height']).toBe('1');
    }
  }));

  it(`should have CSS with a rule setting the font-size to 16px and the padding-top to 10px on the .tracklisting selector @product-tracklisting-component-css1`, async(() => {
    since('The ProductTracklistingComponent hasn\'t been created yet.').expect(productTracklistingCssFileExists).toBe(true);
    if(productTracklistingCssFileExists) {
      let parsed = CSSOM.parse(productTracklistingCssFile);

      let tRule = _.find(parsed.cssRules, { selectorText: '.tracklisting' })

      since('There isn\'t a `.tracklisting` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(tRule).not.toBeUndefined();
      since('There isn\'t a `.tracklisting` selector in the ProductTracklistingComponent\'s CSS file right now.').expect(tRule.style.parentRule.selectorText).toBe('.tracklisting');
      since('Your `.tracklisting` selector doesn\'t have a `font-size` property that\'s equal to `16px`.').expect(tRule.style['font-size']).toBe('16px');
      if (tRule.style['padding-top']) {
        since('Your `.tracklisting` selector isn\'t setting the top padding to be `10px`.').expect(tRule.style['padding-top']).toBe('10px');
      } else if (tRule.style['padding']) {
        let padding = tRule.style['padding'];
        since('Your `.tracklisting` selector isn\'t setting the top padding to be `10px`.').expect(tRule.style['padding']).toBe('10px 0 0 0');
      } else {
        since('It doesn\'t look like you\'re setting the padding property in your `.tracklisting` selector.').expect(1).toBe(0);
      }
    }
  }));

test('RuleRenderer attach', t => {
  let renderer = createRuleRenderer(rule, 1, createClassNameGenerator());
  const styleSheet: CSSStyleSheet = cssom.parse([
    'p {font-size: 12px;}',
    '.a {font-size: 13px; background-color: blue;}',
    '.a:hover{background-color: red;}',
    '@media screen and (max-width: 700px){',
      '.a{background-color: yellow;}',
      '.a:hover{background-color: blue;}',
    '}',
    '.a:firstChild{ font-family: arial; }',
    '@media screen and (max-width: 700px){',
      '.a:firstChild{font-family: helvetica;}',
    '}',
  ].join('\n'));

  renderer.connect(styleSheet, 1);
  renderer.setRuleOverrideCount(1);
  
  t.equal(
    styleSheet.toString().replace(/\s/g, ''),
    [
      'p {font-size: 12px;}',
      '.a, .a.b {font-size: 13px; background-color: blue;}',
      '.a:hover, .a.b:hover{background-color: red;}',
      '@media screen and (max-width: 700px){',
        '.a, .a.b{background-color: yellow;}',
        '.a:hover, .a.b:hover{background-color: blue;}',
      '}',
      '.a:firstChild, .a.b:firstChild{ font-family: arial; }',
      '@media screen and (max-width: 700px){',
        '.a:firstChild, .a.b:firstChild{font-family: helvetica;}',
      '}',
    ].join('').replace(/\s/g, ''),
    'should connect renderer to existing cssRules in the stylesheet'
  );
  t.end();
});