test: add tests for common color utility fns

dequelabs · Apr 4, 2019 · 1fe5a34 · 1fe5a34
1 parent a9ae29c
commit 1fe5a34
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 2 deletions.
diff --git a/lib/commons/color/element-has-background-image.js b/lib/commons/color/element-has-background-image.js
@@ -28,7 +28,7 @@ color.elementHasBackgroundImage = function elementHasBackgroundImage(
 	const hasBgImage = bgImageStyle !== 'none';
 
 	if (hasBgImage) {
-		var hasGradient = /gradient/.test(bgImageStyle);
+		const hasGradient = /gradient/.test(bgImageStyle);
 		axe.commons.color.incompleteData.set(
 			'bgColor',
 			hasGradient ? 'bgGradient' : 'bgImage'

diff --git a/lib/commons/color/get-non-alpha-blended-background-color.js b/lib/commons/color/get-non-alpha-blended-background-color.js
@@ -19,7 +19,7 @@ color.getNonAlphaBlendedBackgroundColor = function getNonAlphaBlendedBackgroundC
 	bgColor.parseRgbString(elmStyle.getPropertyValue('background-color'));
 
 	if (bgColor.alpha !== 0) {
-		let opacity = elmStyle.getPropertyValue('opacity');
+		const opacity = elmStyle.getPropertyValue('opacity');
 		bgColor.alpha = bgColor.alpha * opacity;
 	}
 

diff --git a/test/commons/color/element-has-background-image.js b/test/commons/color/element-has-background-image.js
@@ -0,0 +1,62 @@
+describe('color.elementHasBackgroundImage', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var queryFixture = axe.testUtils.queryFixture;
+	var elementHasBackgroundImage = axe.commons.color.elementHasBackgroundImage;
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+		axe._tree = undefined;
+	});
+
+	it('returns true when `HTMLElement` is of graphical type', function() {
+		['img', 'canvas', 'object', 'iframe', 'video', 'svg'].forEach(function(
+			nodeName
+		) {
+			var vNode = queryFixture(
+				'<' + nodeName + ' id="target"></' + nodeName + '>'
+			);
+			var actual = elementHasBackgroundImage(vNode.actualNode);
+			assert.isTrue(actual);
+		});
+	});
+
+	it('returns false when `HTMLElement` has no background-image style set', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px;">No background style</div>'
+		);
+		var actual = elementHasBackgroundImage(vNode.actualNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when `HTMLElement` has background-image style set to none', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px; background-image: none "> Some text... </div>'
+		);
+		var actual = elementHasBackgroundImage(vNode.actualNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns true when `HTMLElement` has background-image (url)', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px; background-image: url(london.png)"> Some text... </div>'
+		);
+		var actual = elementHasBackgroundImage(vNode.actualNode);
+		assert.isTrue(actual);
+
+		var bgColorIncompleteData = axe.commons.color.incompleteData.get('bgColor');
+		assert.equal(bgColorIncompleteData, 'bgImage');
+	});
+
+	it('returns true when `HTMLElement` has background-image (gradient)', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px; background-image: linear-gradient(red, orange);"> Some text... </div>'
+		);
+		var actual = elementHasBackgroundImage(vNode.actualNode);
+		assert.isTrue(actual);
+
+		var bgColorIncompleteData = axe.commons.color.incompleteData.get('bgColor');
+		assert.equal(bgColorIncompleteData, 'bgGradient');
+	});
+});
diff --git a/test/commons/color/get-non-alpha-blended-background-color.js b/test/commons/color/get-non-alpha-blended-background-color.js
@@ -0,0 +1,69 @@
+describe('color.getNonAlphaBlendedBackgroundColor', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var queryFixture = axe.testUtils.queryFixture;
+	var getNonAlphaBlendedBackgroundColor =
+		axe.commons.color.getNonAlphaBlendedBackgroundColor;
+	var isPhantom = window.PHANTOMJS ? true : false;
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+		axe._tree = undefined;
+	});
+
+	it('returns `new axe.commons.color.Color` instance when no background is set', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px;">' + '</div>'
+		);
+		var actual = getNonAlphaBlendedBackgroundColor(vNode.actualNode);
+		assert.equal(actual.red, 0);
+		assert.equal(actual.green, 0);
+		assert.equal(actual.blue, 0);
+		if (!isPhantom) {
+			assert.equal(actual.alpha, 0);
+		}
+	});
+
+	it('returns the non-blended color with rgba values of specified background-color value', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 40px; width: 30px; background-color: pink;">' +
+				'</div>'
+		);
+		var actual = getNonAlphaBlendedBackgroundColor(vNode.actualNode);
+		assert.equal(actual.red, 255);
+		assert.equal(actual.green, 192);
+		assert.equal(actual.blue, 203);
+		if (!isPhantom) {
+			assert.equal(actual.alpha, 1);
+		}
+	});
+
+	it('returns the non-blended color with rgba values excluding alpha (for blending)', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 20px; width: 15px; background-color: rgba(0, 128, 0, 0.5);">' +
+				'</div>'
+		);
+		var actual = getNonAlphaBlendedBackgroundColor(vNode.actualNode);
+		assert.equal(actual.red, 0);
+		assert.equal(actual.green, 128);
+		assert.equal(actual.blue, 0);
+		if (!isPhantom) {
+			assert.equal(actual.alpha, 0.5);
+		}
+	});
+
+	it('returns the non-blended color with rgba values excluding opacity (for blending)', function() {
+		var vNode = queryFixture(
+			'<div id="target" style="height: 20px; width: 15px; opacity: 0.5; background-color: green;">' +
+				'</div>'
+		);
+		var actual = getNonAlphaBlendedBackgroundColor(vNode.actualNode);
+		assert.equal(actual.red, 0);
+		assert.equal(actual.green, 128);
+		assert.equal(actual.blue, 0);
+		if (!isPhantom) {
+			assert.equal(actual.alpha, 1);
+		}
+	});
+});