making the perceptual diff test consistent

BrightspaceUI · Feb 17, 2016 · 0721840 · 0721840
1 parent 777140c
commit 0721840
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -6,11 +6,10 @@
     "clean": "rimraf *.css && rimraf ./test/*.css",
     "prebuild": "npm run clean",
     "build:sass": "node-sass --output-style expanded typography.css.scss typography.css",
-    "build:sass:test": "node-sass --output-style expanded ./test/test.scss ./test/test.css",
-    "build": "npm run build:sass && npm run build:sass:test",
+    "build": "npm run build:sass",
     "perceptual-diff": "percy snapshot test/",
     "postinstall": "bower install",
-    "pretest": "npm run build",
+    "pretest": "npm run build && cpy typography.css test",
     "test": "csslint typography.css"
   },
   "repository": {
@@ -32,6 +31,7 @@
     "bower": "^1.7.7"
   },
   "devDependencies": {
+    "cpy-cli": "^1.0.0",
     "csslint": "^0.10.0",
     "node-sass": "^3.4.2",
     "rimraf": "^2.5.2"

diff --git a/test/test.css b/test/test.css
diff --git a/test/test.scss b/test/test.scss
diff --git a/test/typography.html b/test/typography.html
@@ -2,9 +2,24 @@
 <html>
 	<head>
 		<title>Typography Sample</title>
-		<link rel="stylesheet" type="text/css" href="test.css" />
+		<link rel="stylesheet" type="text/css" href="typography.css" />
+		<style>
+		html {
+			font-size: 20px;
+		}
+		body {
+			margin: 1rem;
+		}
+		table {
+			max-width: 1000px;
+		}
+		td, th {
+			padding: 0.5rem;
+			text-align: left;
+		}
+		</style>
 	</head>
-	<body>
+	<body class="vui-typography">
 		<h1>Typography</h1>
 		<table>
 			<thead>
@@ -15,53 +30,39 @@ <h1>Typography</h1>
 			</thead>
 			<tbody>
 				<tr>
-					<th>Heading 1</th>
+					<th>Headings</th>
 					<td>
-						<div class="heading-1">Grumpy Wizards</div>
+						<h1 class="vui-heading-1">Heading 1</h1>
+						<h2 class="vui-heading-2">Heading 2</h2>
+						<h3 class="vui-heading-3">Heading 3</h3>
+						<h4 class="vui-heading-4">Heading 4</h4>
 					</td>
 				</tr>
 				<tr>
-					<th>Heading 2</th>
+					<th>Small Text</th>
 					<td>
-						<div class="heading-2">Grumpy Wizards</div>
+						<p class="vui-typography-small-text">Small Text</p>
 					</td>
 				</tr>
 				<tr>
-					<th>Heading 3</th>
+					<th>Small Strong Text</th>
 					<td>
-						<div class="heading-3">Grumpy Wizards</div>
+						<p class="vui-typography-small-strong-text">Small Strong Text</p>
 					</td>
 				</tr>
 				<tr>
-					<th>Heading 4</th>
+					<th>Help Text</th>
 					<td>
-						<div class="heading-4">Grumpy Wizards</div>
+						<p class="vui-help">Help Text</p>
 					</td>
 				</tr>
 				<tr>
 					<th>Paragraph</th>
 					<td>
-						<p style="width: 430px;">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
-					</td>
-				</tr>
-				<tr>
-					<th>Small Text</th>
-					<td>
-						<div class="small-text">Grumpy Wizards</div>
+						<p style="width: 430px;">
+							Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.
+						</p>
 					</td>
-				</tr>
-				<tr>
-					<th>Small Strong Text</th>
-					<td>
-						<div class="small-strong-text">Grumpy Wizards</div>
-					</td>
-				</tr>
-				<tr>
-					<th>Help Text</th>
-					<td>
-						<div style="width: 460px;" class="help-text">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
-					</td>
-				</tr>
 			</tbody>
 		</table>
 	</body>