Skip to content

Instantly share code, notes, and snippets.

@robinboehm

robinboehm/colorPicker.spec.js

Created March 28, 2014 10:23
Show Gist options
  • Save robinboehm/9829631 to your computer and use it in GitHub Desktop.
Save robinboehm/9829631 to your computer and use it in GitHub Desktop.
Download ZIP
ColorPicker-Task Screencast
Raw
colorPicker.spec.js
describe('A ColorPicker', function () {
// Inputs
it('should define four input tags', function () {
expect(document.getElementsByTagName("input").length).toBe(4);
});
describe('input tags', function () {
it('should define a type="range" at each input-element', function () {
expect(document.getElementsByTagName("input")[0].type).toBe('range');
expect(document.getElementsByTagName("input")[1].type).toBe('range');
expect(document.getElementsByTagName("input")[2].type).toBe('range');
expect(document.getElementsByTagName("input")[3].type).toBe('range');
});
it('should define a min=0 at each input-element', function () {
expect(document.getElementsByTagName("input")[0].min).toBe('0');
expect(document.getElementsByTagName("input")[1].min).toBe('0');
expect(document.getElementsByTagName("input")[2].min).toBe('0');
expect(document.getElementsByTagName("input")[3].min).toBe('0');
});
it('should define a max=255 at each r,g,b input-element (not a)', function () {
expect(document.getElementsByTagName("input")[0].max).toBe('255');
expect(document.getElementsByTagName("input")[1].max).toBe('255');
expect(document.getElementsByTagName("input")[2].max).toBe('255');
});
it('should define a max=1 at >>alpha<< input-element', function () {
expect(document.getElementsByTagName("input")[3].max).toBe('1');
});
it('should define a step=1 at each r,g,b input-element (not a)', function () {
expect(document.getElementsByTagName("input")[0].step).toBe('1');
expect(document.getElementsByTagName("input")[1].step).toBe('1');
expect(document.getElementsByTagName("input")[2].step).toBe('1');
});
it('should define a step=0.01 at the alpha input-element', function () {
expect(document.getElementsByTagName("input")[3].step).toBe('0.01');
});
});
// div
it('should define one div tag', function () {
expect(document.getElementsByTagName("div").length).toBeGreaterThan(0);
});
describe('Div Container', function () {
it('should define one div tag that defines a style', function () {
expect(document.getElementsByTagName("div")[0].attributes['style']).toBeDefined();
});
it('should define one div tag that defines width and height via style', function () {
expect(document.getElementsByTagName("div")[0].style.height).toBeTruthy();
expect(document.getElementsByTagName("div")[0].style.width).toBeTruthy();
});
it('should define one div tag that defines background-color via style', function () {
expect(document.getElementsByTagName("div")[0].style['background-color']).toBeTruthy();
});
it('should define one div tag that defines background-color that use the rgba(r,g,b,a) css-function', function () {
expect(document.getElementsByTagName("div")[0].attributes.style.textContent).toMatch(/rgba/);
});
});
it('should define a ng-app at the <html> element', function () {
expect(document.getElementsByTagName("html")[0].attributes['ng-app']).toBeDefined();
});
// ng-init
it('should define a ng-init at the body tag', function () {
expect(document.getElementsByTagName("body")[0].attributes['ng-init']).toBeDefined();
});
describe('ng-init at body', function () {
it('should define a initial value for r', function () {
expect(angular.element(document.getElementsByTagName("body")[0]).scope().r).toBeDefined();
});
it('should define a initial value for g', function () {
expect(angular.element(document.getElementsByTagName("body")[0]).scope().g).toBeDefined();
});
it('should define a initial value for b', function () {
expect(angular.element(document.getElementsByTagName("body")[0]).scope().b).toBeDefined();
});
it('should define a initial value for a', function () {
expect(angular.element(document.getElementsByTagName("body")[0]).scope().a).toBeDefined();
});
});
describe('input tags binding', function () {
it('should define ng-model with a r,g,b,a variable for each element', function () {
expect(document.getElementsByTagName("input")[0].attributes['ng-model'].value).toBe('r');
expect(document.getElementsByTagName("input")[1].attributes['ng-model'].value).toBe('g');
expect(document.getElementsByTagName("input")[2].attributes['ng-model'].value).toBe('b');
expect(document.getElementsByTagName("input")[3].attributes['ng-model'].value).toBe('a');
});
});
describe('div background-colorbinding', function () {
it('should bind to rgba({{r}}, {{g}}, {{b}}, {{a}}) css-function', function () {
expect(angular.element(document.getElementsByTagName("div")[0]).scope().$$watchers.length).toBe(5);
});
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bower_components/jasmine/lib/jasmine-core/jasmine.css">
<link rel="stylesheet" type="text/css" href="css/jasmine.css">
</head>
<body>
<h1>ColorPicker</h1>
<!-- Insert ColorPicker here -->
<!-- Ignore code after this line -->
<!-- Jasmine Bootstrap -->
<script src="bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<!-- Vendor -->
<script src="bower_components/angular/angular.js"></script>
<!-- Tests -->
<script src="colorPicker.spec.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment