add tests for declarations (#112)

Author: bartveneman

src/analyzer/declarations/importants.js

@@ -1,17 +1,8 @@
 module.exports = declarations => {
   const all = declarations.filter(value => value.important)
 
-  const share = (() => {
-    // Catch divide by zero exception
-    if (declarations.length === 0) {
-      return 0
-    }
-
-    return all.length / declarations.length
-  })()
-
   return {
     total: all.length,
-    share
+    share: declarations.length === 0 ? 0 : all.length / declarations.length
   }
 }

src/analyzer/declarations/index.js

@@ -1,13 +1,13 @@
 module.exports = declarations => {
   const all = declarations
+  const totalUnique = new Set(
+    all.map(({property, value}) => `${property} : ${value}`)
+  ).size
   const importants = require('./importants')(all)
-  const unique = [...new Set(all.map(declaration => {
-    return `${declaration.property} : ${declaration.value}`
-  }))].sort()
 
   return {
     total: all.length,
-    totalUnique: unique.length,
+    totalUnique,
     importants
   }
 }

test/analyzer/declarations/importants.js

@@ -0,0 +1,39 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/declarations/importants')
+
+const FIXTURE = [
+  {
+    property: 'color',
+    value: 'red',
+    important: true
+  },
+  {
+    property: 'border-width',
+    value: '1px',
+    important: true
+  },
+  {
+    property: 'font-size',
+    value: '16px',
+    important: false
+  }
+]
+
+test('it responds with the correct structure', t => {
+  t.deepEqual(analyze([]), {
+    total: 0,
+    share: 0
+  })
+})
+
+test('it counts !importants', t => {
+  const {total: actual} = analyze(FIXTURE)
+
+  t.is(actual, 2)
+})
+
+test('it calculates the share of !important declarations', t => {
+  const {share: actual} = analyze(FIXTURE)
+
+  t.is(actual, (1 / 3) * 2)
+})

test/analyzer/declarations/index.js

@@ -1,9 +1,64 @@
 const test = require('ava')
-const testScope = require('../../utils/scope-tester.js')
+const analyze = require('../../../src/analyzer/declarations')
 
-const SCOPE = 'declarations'
+test('it responds with the correct structure', t => {
+  const actual = analyze([])
+  const expected = {
+    total: 0,
+    totalUnique: 0,
+    importants: {
+      total: 0,
+      share: 0
+    }
+  }
 
-test(SCOPE, async t => {
-  const {actual, expected} = await testScope(SCOPE)
-  t.deepEqual(actual[SCOPE], expected)
+  t.deepEqual(actual, expected)
+})
+
+test('it counts declarations', t => {
+  const fixture = [
+    {
+      property: 'color',
+      value: 'red',
+      important: false
+    },
+    {
+      property: 'border',
+      value: '1px solid blue',
+      important: false
+    },
+    {
+      property: 'font-size',
+      value: '16px',
+      important: false
+    },
+    {
+      // Duplicate
+      property: 'font-size',
+      value: '16px',
+      important: false
+    }
+  ]
+  const {total, totalUnique} = analyze(fixture)
+
+  t.is(total, 4)
+  t.is(totalUnique, 3)
+})
+
+test('it ignores !importants when looking for unique declarations', t => {
+  const fixture = [
+    {
+      property: 'font-size',
+      value: '16px',
+      important: false
+    },
+    {
+      property: 'font-size',
+      value: '16px',
+      important: true
+    }
+  ]
+  const {totalUnique: actual} = analyze(fixture)
+
+  t.deepEqual(actual, 1)
 })

test/analyzer/declarations/input.css

@@ -1,38 +1,61 @@
 const test = require('ava')
 const parser = require('../../src/parser')
 
-let fixture
+const FIXTURE = `
+    /* FIXTURE */
+    @charset "UTF-8";
+    @import "some.css";
+    @supports (display: grid) {
+      @media screen {
+        @media (min-width: 300px) {
+        .foo { color:blue }
+        }
+      }
+    }
+  `
 
-test.beforeEach(() => {
-  fixture = '/* FIXTURE */' +
-    '@charset "UTF-8";' +
-    '@import "some.css";' +
-    '@supports (display: grid) { ' +
-      '@media screen { ' +
-        '@media (min-width: 300px) { ' +
-          '.foo { color:blue } ' +
-        '}' +
-      '}' +
-    '}'
+test('atRules are found correctly', async t => {
+  const {atRules: actual} = await parser(FIXTURE)
+  const expected = [
+    {
+      type: 'charset',
+      params: '"UTF-8"'
+    },
+    {
+      type: 'import',
+      params: '"some.css"'
+    },
+    {
+      type: 'supports',
+      params: '(display: grid)'
+    },
+    {
+      type: 'media',
+      params: 'screen'
+    },
+    {
+      type: 'media',
+      params: '(min-width: 300px)'
+    }
+  ]
+  t.deepEqual(actual, expected)
 })
 
-test('atRules are found correctly', async t => {
-  const actual = await parser(fixture)
-  const expected = [{
-    type: 'charset',
-    params: '"UTF-8"'
-  }, {
-    type: 'import',
-    params: '"some.css"'
-  }, {
-    type: 'supports',
-    params: '(display: grid)'
-  }, {
-    type: 'media',
-    params: 'screen'
-  }, {
-    type: 'media',
-    params: '(min-width: 300px)'
-  }]
-  t.deepEqual(actual.atRules, expected)
+test('descriptors in @font-face are parsed to descriptors and not declarations', async t => {
+  const fixture = `
+    @font-face {
+      src: url("http://example.com");
+      font-family: MyFont;
+    }
+  `
+  const {
+    atRules: [fontface]
+  } = await parser(fixture)
+  const expected = {
+    src: 'url("http://example.com")',
+    'font-family': 'MyFont'
+  }
+
+  t.deepEqual(fontface.descriptors, expected)
+  t.is(typeof fontface.declarations, 'undefined')
 })