Update skills list

app/components/user/skills-list.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['user__skills-list'],
+
+  user: null
+});

app/styles/app.scss

@@ -199,6 +199,7 @@
 @import "components/settings-menu";
 @import "components/signup-form";
 @import "components/user-details";
+@import "components/user/skills-list";
 
 @import "components/user-menu";
 // dropdown-menu has to come after user-menu for styles to work correctly

app/styles/components/user-details.scss

@@ -4,22 +4,6 @@
 	&__main {
 		@include span-columns(9);
 	}
-
-	&__skills-list {
-		ul {
-			margin-top: 10px;
-
-			li {
-				background: #E8EBED;
-				border-radius: 2px;
-				color: #333;
-				display: inline-flex;
-				font-weight: 600;
-				margin: 0 2px 5px 0;
-				padding: 4px 7px;
-			}
-		}
-	}
 }
 
 .empty-state {

app/styles/components/user-list-item.scss

@@ -28,27 +28,8 @@
     }
   }
   &__skills {
-    color: $text--lightest;
-    font-size: $body-font-size-small;
     @include span-columns(6);
-    ul {
-      margin-top: 6px;
-    }
-    li {
-      display: inline-block;
-      &:after {
-        content: ", ";
-      }
-      &:last-child {
-        // confused by the selector below
-        &:not(:first-child):before {
-          content: "and ";
-        }
-        &:after {
-          content: ".";
-        }
-      }
-    }
+    font-size: $body-font-size-small;
   }
 }
 

app/styles/components/user/skills-list.scss

@@ -0,0 +1,16 @@
+.user__skills-list {
+  ul {
+    align-items: flex-start;
+    display: flex;
+    margin-top: 10px;
+
+    li {
+      background: #E8EBED;
+      border-radius: 2px;
+      color: #333;
+      font-weight: 600;
+      margin-right: 5px;
+      padding: 4px 7px;
+    }
+  }
+}

app/templates/components/user-details.hbs

@@ -6,11 +6,7 @@
     <div class="user-details__skills-list">
       <h3>Skills</h3>
       {{#if user.userSkills}}
-        <ul data-test-user-skills-list>
-          {{#each user.userSkills as |userSkill|}}
-            <li data-test-user-skills-list-item>{{userSkill.skill.title}}</li>
-          {{/each}}
-        </ul>
+        {{user/skills-list data-test-user-skills-list user=user}}
       {{else}}
         <p data-test-user-skills-list-empty-state class="empty-state">
           <strong>{{user.username}}</strong> hasn't added any skills yet.

app/templates/components/user-list-item.hbs

@@ -20,11 +20,7 @@
 
 <div class="project-user__skills">
   <h4>Skills</h4>
-  <ul>
-    {{#each user.userSkills as |userSkill|}}
-      <li>{{userSkill.skill.title}}</li>
-    {{/each}}
-  </ul>
+  {{user/skills-list data-test-user-skills-list user=user}}
 </div>
 
 <div class="project-user__actions">

app/templates/components/user/skills-list.hbs

@@ -0,0 +1,5 @@
+<ul>
+  {{#each user.userSkills as |userSkill|}}
+    <li data-test-user-skills-list-item>{{userSkill.skill.title}}</li>
+  {{/each}}
+</ul>

tests/integration/components/user/skills-list-test.js

@@ -0,0 +1,43 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import PageObject from 'ember-cli-page-object';
+import userSkillsList from 'code-corps-ember/tests/pages/components/user/skills-list';
+
+let page = PageObject.create(userSkillsList);
+
+let user = {
+  userSkills: [
+    {
+      skill: {
+        title: 'Ember.js'
+      }
+    },
+    {
+      skill: {
+        title: 'JavaScript'
+      }
+    }
+  ]
+};
+
+moduleForComponent('user/skills-list', 'Integration | Component | user/skills list', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('it renders each skill in the list', function(assert) {
+  assert.expect(3);
+
+  this.set('user', user);
+
+  page.render(hbs`{{user/skills-list user=user}}`);
+
+  assert.equal(page.listItems().count, 2);
+  assert.equal(page.listItems(0).text, 'Ember.js');
+  assert.equal(page.listItems(1).text, 'JavaScript');
+});

tests/pages/components/user/skills-list.js

@@ -0,0 +1,11 @@
+import {
+  collection
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.user__skills-list',
+
+  listItems: collection({
+    itemScope: '[data-test-user-skills-list-item]'
+  })
+};