Rewrite selector tests (#115)

refs #81

Author: bartveneman

readme.md

@@ -1,7 +1,13 @@
 # css-analyzer
 
 [![NPM Version](https://img.shields.io/npm/v/@projectwallace/css-analyzer.svg)](https://www.npmjs.com/package/@projectwallace/css-analyzer)
-[![Build Status](https://travis-ci.org/projectwallace/css-analyzer.svg?branch=master)](https://travis-ci.org/projectwallace/css-analyzer) [![Known Vulnerabilities](https://snyk.io/test/github/projectwallace/css-analyzer/badge.svg)](https://snyk.io/test/github/projectwallace/css-analyzer) [![Coverage Status](https://coveralls.io/repos/github/projectwallace/css-analyzer/badge.svg?branch=master)](https://coveralls.io/github/projectwallace/css-analyzer?branch=master) ![Dependencies Status](https://img.shields.io/david/projectwallace/css-analyzer.svg) ![Dependencies Status](https://img.shields.io/david/dev/projectwallace/css-analyzer.svg) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
+[![Build Status](https://travis-ci.org/projectwallace/css-analyzer.svg?branch=master)](https://travis-ci.org/projectwallace/css-analyzer)
+[![Known Vulnerabilities](https://snyk.io/test/github/projectwallace/css-analyzer/badge.svg)](https://snyk.io/test/github/projectwallace/css-analyzer)
+[![Coverage Status](https://coveralls.io/repos/github/projectwallace/css-analyzer/badge.svg?branch=master)](https://coveralls.io/github/projectwallace/css-analyzer?branch=master)
+![Dependencies Status](https://img.shields.io/david/projectwallace/css-analyzer.svg)
+![Dependencies Status](https://img.shields.io/david/dev/projectwallace/css-analyzer.svg)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
+[![Project: Wallace](https://img.shields.io/badge/Project-Wallace-29c87d.svg)](https://www.projectwallace.com/oss)
 
 > Analyze your CSS
 

src/analyzer/selectors/identifiers.js

@@ -1,10 +1,10 @@
 const specificity = require('specificity')
 const {caseInsensitive: stringCompare} = require('string-natural-compare')
 
-// Sort by identifiers count, then by alphabet
+// Sort by identifiers count (high to low), then by alphabet (A-Z)
 function sortByIdentifiersCount(a, b) {
   if (a.count === b.count) {
-    return stringCompare(a, b)
+    return stringCompare(a.value, b.value)
   }
 
   return b.count - a.count
@@ -15,27 +15,33 @@ function getSelectorSpecificity(selector) {
 }
 
 module.exports = selectors => {
+  if (selectors.length === 0) {
+    return {
+      average: 0,
+      top: [],
+      max: {
+        value: null,
+        count: null
+      }
+    }
+  }
+
   const identifiersPerSelector = selectors
     .map(getSelectorSpecificity)
-    .map(specificity => {
-      return {
-        value: specificity.selector,
-        count: specificity.parts.length
-      }
-    })
+    .map(specificity => ({
+      value: specificity.selector,
+      count: specificity.parts.length
+    }))
 
   const totalIdentifiers = identifiersPerSelector
-    .map(selector => selector.count)
+    .map(({count}) => count)
     .reduce((prev, curr) => prev + curr, 0)
 
-  const totalSelectors = selectors.length
-  const average = totalIdentifiers / totalSelectors
-
   const sorted = identifiersPerSelector.sort(sortByIdentifiersCount)
   const [max] = sorted
 
   return {
-    average,
+    average: totalIdentifiers / selectors.length,
     max,
     top: sorted.slice(0, 5)
   }

src/analyzer/selectors/specificity.js

@@ -1,8 +1,9 @@
 const specificity = require('specificity')
 
 module.exports = selectors => {
-  const all = [...new Set(selectors)]
+  const all = [...selectors]
     .sort()
+    .reverse()
     .sort(specificity.compare)
     .reverse()
 
@@ -14,12 +15,7 @@ module.exports = selectors => {
 
       return {
         value: selector,
-        specificity: {
-          a,
-          b,
-          c,
-          d
-        }
+        specificity: {a, b, c, d}
       }
     })
   }

src/utils/uniquer.js

@@ -8,14 +8,7 @@ module.exports = (values, sortFn) => {
     ...values.reduce((map, value) => {
       return map.set(value, map.get(value) + 1 || 1)
     }, new Map())
-  ]
-    // Create an array of [{value, count}]
-    .map(value => {
-      return {
-        value: value[0],
-        count: value[1]
-      }
-    })
+  ].map(([value, count]) => ({value, count}))
 
   const sorted = reduced.map(el => el.value).sort(sortFn)
   const unique = sorted.map(value => reduced.find(r => r.value === value))

test/analyzer/selectors/accessibility.js

@@ -0,0 +1,53 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/selectors/accessibility')
+
+test('it responds with the correct structure', t => {
+  const fixture = []
+  const {total, totalUnique, unique} = analyze(fixture)
+
+  t.is(total, 0)
+  t.is(totalUnique, 0)
+  t.deepEqual(unique, [])
+})
+
+test('it counts the total of all accessibility selectors', t => {
+  const fixture = ['[aria-hidden]', '[aria-hidden]', 'img[role="presentation"]']
+  const {total: actual} = analyze(fixture)
+  const expected = 3
+
+  t.is(actual, expected)
+})
+
+test('it counts the total of all unique accessibility selectors', t => {
+  const fixture = ['[aria-hidden]', '[aria-hidden]', 'img[role="presentation"]']
+  const {totalUnique: actual} = analyze(fixture)
+  const expected = 2
+
+  t.is(actual, expected)
+})
+
+test('it finds all unique accessibility selectors, sorts them and adds a count', t => {
+  const fixture = ['[aria-hidden]', '[aria-hidden]', 'img[role="presentation"]']
+  const {unique: actual} = analyze(fixture)
+  const expected = [
+    {
+      value: '[aria-hidden]',
+      count: 2
+    },
+    {
+      value: 'img[role="presentation"]',
+      count: 1
+    }
+  ]
+
+  t.deepEqual(actual, expected)
+})
+
+test('it does not report selectors that are not accessibility selectors', t => {
+  const fixture = ['img[data-lazy]', '[hidden]']
+  const {total, totalUnique, unique} = analyze(fixture)
+
+  t.is(total, 0)
+  t.is(totalUnique, 0)
+  t.deepEqual(unique, [])
+})

test/analyzer/selectors/browserhacks.js

@@ -1,5 +1,5 @@
 const test = require('ava')
-const analyze = require('../../../src/analyzer/selectors/browserhacks.js')
+const analyze = require('../../../src/analyzer/selectors/browserhacks')
 
 test('It responds with the correct structure', t => {
   const actual = analyze([])

test/analyzer/selectors/id.js

@@ -0,0 +1,57 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/selectors/id')
+
+test('it responds with the correct structure', t => {
+  const fixture = []
+  const {total, totalUnique, unique} = analyze(fixture)
+
+  t.is(total, 0)
+  t.is(totalUnique, 0)
+  t.deepEqual(unique, [])
+})
+
+test('it counts the total of all id selectors', t => {
+  const fixture = ['#myId', '#myId', 'element#id', '.class #id #plus #two']
+  const {total: actual} = analyze(fixture)
+  const expected = 4
+
+  t.is(actual, expected)
+})
+
+test('it counts the total of all unique id selectors', t => {
+  const fixture = ['#myId', '#myId', 'element#id', '.class #id #plus #two']
+  const {totalUnique: actual} = analyze(fixture)
+  const expected = 3
+
+  t.is(actual, expected)
+})
+
+test('it finds all unique id selectors, sorts them and adds a count', t => {
+  const fixture = ['#myId', '#myId', 'element#id', '.class #id']
+  const {unique: actual} = analyze(fixture)
+  const expected = [
+    {
+      value: '#myId',
+      count: 2
+    },
+    {
+      value: '.class #id',
+      count: 1
+    },
+    {
+      value: 'element#id',
+      count: 1
+    }
+  ]
+
+  t.deepEqual(actual, expected)
+})
+
+test('it does not report selectors that are not id selectors', t => {
+  const fixture = ['class[href="#hash"]']
+  const {total, totalUnique, unique} = analyze(fixture)
+
+  t.is(total, 0)
+  t.is(totalUnique, 0)
+  t.deepEqual(unique, [])
+})

test/analyzer/selectors/identifiers.js

@@ -0,0 +1,90 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/selectors/identifiers')
+
+test('it responds with the correct structure', t => {
+  const fixture = []
+  const actual = analyze(fixture)
+  const expected = {
+    max: {
+      value: null,
+      count: null
+    },
+    top: [],
+    average: 0
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+const FIXTURE = ['a b c', 'a b', 'a b c d', 'a b c d e', 'a b c d e f']
+
+test('it finds the selectors with the most identifiers and it sorts them by count', t => {
+  const {top: actual} = analyze(FIXTURE)
+  const expected = [
+    {
+      value: 'a b c d e f',
+      count: 6
+    },
+    {
+      value: 'a b c d e',
+      count: 5
+    },
+    {
+      value: 'a b c d',
+      count: 4
+    },
+    {
+      value: 'a b c',
+      count: 3
+    },
+    {
+      value: 'a b',
+      count: 2
+    }
+  ]
+
+  t.deepEqual(actual, expected)
+  t.is(actual.length, 5)
+})
+
+test('if selectors with the same identifier count are found, they are sorted alphabetically', t => {
+  const fixture = ['y z', 'a b c', 'a b', 'a b c d', 'a b c d e', 'a b c d e f']
+  const {top: actual} = analyze(fixture)
+  const expected = [
+    {
+      value: 'a b c d e f',
+      count: 6
+    },
+    {
+      value: 'a b c d e',
+      count: 5
+    },
+    {
+      value: 'a b c d',
+      count: 4
+    },
+    {
+      value: 'a b c',
+      count: 3
+    },
+    {
+      value: 'a b',
+      count: 2
+    }
+  ]
+
+  t.deepEqual(actual, expected)
+})
+
+test('it finds the selector with the most identifiers', t => {
+  const {max: actual} = analyze(FIXTURE)
+
+  t.is(actual.count, 6)
+  t.is(actual.value, 'a b c d e f')
+})
+
+test('it calculates the average amount of identifiers per selector', t => {
+  const {average: actual} = analyze(FIXTURE)
+
+  t.is(actual, 24 / 6)
+})

test/analyzer/selectors/index.js

@@ -1,9 +1,33 @@
 const test = require('ava')
-const testScope = require('../../utils/scope-tester.js')
+const analyze = require('../../../src/analyzer/selectors')
 
-const SCOPE = 'selectors'
+test('it responds with the correct structure', t => {
+  const fixture = []
+  const actual = analyze(fixture)
 
-test(SCOPE, async t => {
-  const {actual, expected} = await testScope(SCOPE)
-  t.deepEqual(actual[SCOPE], expected)
+  t.is(actual.total, 0)
+  t.is(actual.totalUnique, 0)
+
+  t.is(typeof actual.accessibility, 'object')
+  t.is(typeof actual.specificity, 'object')
+  t.is(typeof actual.identifiers, 'object')
+  t.is(typeof actual.js, 'object')
+  t.is(typeof actual.id, 'object')
+  t.is(typeof actual.universal, 'object')
+})
+
+test('it counts the total of all selectors', t => {
+  const fixture = ['a', 'b', 'c', 'c']
+  const {total: actual} = analyze(fixture)
+  const expected = 4
+
+  t.is(actual, expected)
+})
+
+test('it counts the total of all unique selectors', t => {
+  const fixture = ['a', 'b', 'c', 'c']
+  const {totalUnique: actual} = analyze(fixture)
+  const expected = 3
+
+  t.is(actual, expected)
 })