Simplified tests and DOM structure

MitchMo · Aug 22, 2016 · aa690e6 · aa690e6
1 parent 903e943
commit aa690e6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -4,15 +4,20 @@ body {
   font-size: 18px;
 }
 
+#badges {
+  text-align: center;
+}
+
 .course {
   background: #F5F5F5;
-  border: 1px solid #ccc;
   border-radius: 5px;
+  border: 1px solid #ccc;
   box-shadow: 1px 1px 5px #EAEAEA;
+  display: inline-block;
   height: 350px;
   margin: 20px 10px;
   padding: 15px 10px;
-  text-align: center;
+  width: 200px;
 }
 
 .course h3 {
@@ -28,3 +33,7 @@ body {
   width: 150px;
   margin-bottom: 20px;
 }
+
+.course a {
+  display: block;
+}
diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@
 
   <div class="container">
     <h1>jQuery Badges</h1>
-    <div id="badges" class="row"></div>
+    <div id="badges"></div>
   </div>
 
 

diff --git a/test/portfolio.spec.js → test/badges.spec.js b/test/portfolio.spec.js → test/badges.spec.js
@@ -107,29 +107,17 @@ describe('The webpage', () => {
       assert(!!firstCourse);
     });
 
-    it('should have elements with the correct class name', () => {
-      let firstCourse = badges.firstChild;
-      let classes = Array.from(firstCourse.classList);
-      assert(!!classes.find((className) => className === 'col-md-3'));
+    it('should have child with the course class name', () => {
+      const firstCourse = badges.firstChild;
+      const classes = Array.from(firstCourse.classList);
+      assert(!!classes.find((className) => className === 'course'));
     });
 
     it('should have x elements within the #badges', () => {
       const courses = badges.childNodes;
       assert(courses.length === mockData.courses.completed.length)
     });
 
-    it('should have a div as a child', () => {
-      const firstCourseDiv = badges.firstChild.firstChild;
-      assert(!!firstCourseDiv);
-      assert(firstCourseDiv.nodeName.toLowerCase() === 'div')
-    });
-
-    it('should have child with the course class name', () => {
-      const firstCourseDiv = badges.firstChild.firstChild;
-      const classes = Array.from(firstCourseDiv.classList);
-      assert(!!classes.find((className) => className === 'course'));
-    });
-
     it('should have h3 tags with the course titles', () => {
       const courses = Array.from(badges.querySelectorAll('.course'));
       courses.forEach((course, i) => {