forked from jamesshore/lets_code_javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path_button_css_test.js
More file actions
119 lines (90 loc) · 4.11 KB
/
_button_css_test.js
File metadata and controls
119 lines (90 loc) · 4.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
(function() {
"use strict";
var assert = require("../../shared/_assert.js");
var cssHelper = require("./_css_test_helper.js");
describe("CSS: Button block", function() {
cssHelper.setupUnitTests();
var INHERITED_FONT = "inherit-this-font";
var linkTag;
var buttonTag;
beforeEach(function() {
cssHelper.frame.add(
"<div style='font-family: " + INHERITED_FONT + "'>" +
" <a id='a_tag' class='button' href='#createUnderline'>foo</a>" +
" <button id='button_tag' class='button'>foo</button>" +
"</div>"
);
linkTag = cssHelper.frame.get("#a_tag");
buttonTag = cssHelper.frame.get("#button_tag");
});
it("text", function() {
assert.equal(cssHelper.textAlign(linkTag), "center", "should be horizontally centered");
assert.equal(cssHelper.textIsUnderlined(linkTag), false, "text should not be underlined");
assert.equal(cssHelper.textIsUppercase(linkTag), true, "text should be uppercase");
assert.equal(cssHelper.fontFamily(buttonTag), INHERITED_FONT, "<button> should inherit container's font");
});
it("has no border", function() {
assert.equal(cssHelper.hasBorder(linkTag), false, "standard link button");
assert.equal(cssHelper.hasBorder(buttonTag), false, "button tag button");
});
it("has no padding or margins", function() {
assert.equal(cssHelper.margin(buttonTag), "0px", "margin");
assert.equal(cssHelper.padding(buttonTag), "0px", "padding");
});
it("has rounded corners", function() {
assert.equal(cssHelper.roundedCorners(linkTag), cssHelper.CORNER_ROUNDING);
});
it("appear to depress when user activates it", function() {
cssHelper.assertActivateDepresses(linkTag, 1);
});
describe("Action button block variant", function() {
var linkTag;
var buttonTag;
beforeEach(function() {
linkTag = cssHelper.frame.add("<a class='button button--action' href='#createUnderline'>foo</a>", "<a> button");
buttonTag = cssHelper.frame.add("<button class='button button--action'>foo</button>", "<button> button");
});
it("is big and pressable", function() {
linkTag.assert({
height: 35
});
});
it("has large text", function() {
assert.equal(cssHelper.isTextVerticallyCentered(linkTag), true, "should be vertically centered");
assert.equal(cssHelper.fontSize(linkTag), "16px", "font size");
assert.equal(cssHelper.fontWeight(linkTag), cssHelper.LINK_BUTTON_WEIGHT, "button weight");
});
it("uses bright colors", function() {
assert.equal(cssHelper.backgroundColor(linkTag), cssHelper.MEDIUM_BLUE, "background");
assert.equal(cssHelper.textColor(linkTag), cssHelper.WHITE, "text");
assert.equal(cssHelper.dropShadow(linkTag), cssHelper.DARK_BLUE + cssHelper.BUTTON_DROP_SHADOW, "drop shadow");
cssHelper.assertHoverStyle(linkTag, cssHelper.DARKENED_MEDIUM_BLUE, "hover background");
});
});
describe("Drawing button block variant", function() {
var linkTag;
var buttonTag;
beforeEach(function() {
linkTag = cssHelper.frame.add("<a class='button button--drawing' href='#createUnderline'>foo</a>", "<a> button");
buttonTag = cssHelper.frame.add("<button class='button button--drawing'>foo</button>", "<button> button");
});
it("is a bit smaller", function() {
linkTag.assert({
height: 30
});
});
it("has smaller, bolder text", function() {
assert.equal(cssHelper.fontSize(linkTag), "12px", "font size");
assert.equal(cssHelper.fontWeight(linkTag), cssHelper.DRAWING_BUTTON_WEIGHT, "font weight");
assert.equal(cssHelper.isTextVerticallyCentered(linkTag), true, "should be vertically centered");
});
it("uses muted colors", function() {
assert.equal(cssHelper.backgroundColor(linkTag), cssHelper.GRAY, "button background");
assert.equal(cssHelper.textColor(linkTag), cssHelper.DARK_GRAY, "button text");
assert.equal(cssHelper.dropShadow(linkTag), cssHelper.MEDIUM_GRAY + cssHelper.BUTTON_DROP_SHADOW, "drop shadow");
cssHelper.assertHoverStyle(linkTag, cssHelper.DARKENED_GRAY, "hover background");
});
});
});
}());