Merge pull request #1553 from code-corps/add-popular-skills

Add popular skills

app/controllers/start/skills.js

@@ -1,6 +1,6 @@
-import { alias } from '@ember/object/computed';
+import { alias, mapBy } from '@ember/object/computed';
 import Controller from '@ember/controller';
-import { get } from '@ember/object';
+import { computed, get, getProperties } from '@ember/object';
 import { inject as service } from '@ember/service';
 import OnboardingControllerMixin from '../../mixins/onboarding-controller';
 
@@ -9,7 +9,7 @@ export default Controller.extend(OnboardingControllerMixin, {
   store: service(),
   userSkillsList: service(),
 
-  user: alias('model'),
+  skills: mapBy('userSkills', 'skill'),
   userSkills: alias('user.userSkills'),
 
   removeUserSkill(userSkill) {
@@ -18,5 +18,12 @@ export default Controller.extend(OnboardingControllerMixin, {
 
   selectSkill(skill) {
     return get(this, 'userSkillsList').toggle(skill);
-  }
+  },
+
+  selectablePopularSkills: computed('popularSkills.@each', 'skills.@each', function() {
+    let { popularSkills, skills } = getProperties(this, 'popularSkills', 'skills');
+    return popularSkills.filter((skill) => {
+      return !skills || !skills.isAny('id', get(skill, 'id'));
+    });
+  })
 });

app/routes/start/skills.js

@@ -8,6 +8,13 @@ export default Route.extend({
   userSkillsList: service(),
 
   model() {
-    return get(this, 'currentUser.user');
+    let user = get(this, 'currentUser.user');
+    let popularSkills = this.store.query('skill', { limit: 20, popular: true });
+    return { popularSkills, user };
+  },
+
+  setupController(controller, { popularSkills, user }) {
+    controller.set('popularSkills', popularSkills);
+    controller.set('user', user);
   }
 });

app/styles/templates/start/skills.scss

@@ -22,6 +22,13 @@
 .skills__list {
   text-align: center;
 
+  &--main {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 56px;
+  }
+
   button {
     margin: 0 5px 5px 0;
   }

app/templates/start/skills.hbs

@@ -4,7 +4,7 @@
 </div>
 
 <div class="start__skills">
-  <div class="skills__list">
+  <div data-test-user-skills-list class="skills__list skills__list--main">
     {{#each userSkills as |userSkill|}}
       {{skill-button
         hasCheck=true
@@ -25,6 +25,17 @@
       skillsList=userSkillsList
     }}
   </div>
+
+  {{#if selectablePopularSkills}}
+    <div data-test-popular-skills-list class="skills__list">
+      <p>Or choose from some popular skills:</p>
+      {{#each selectablePopularSkills as |skill|}}
+        <button class="clear" {{action selectSkill skill}}>
+          {{skill.title}}
+        </button>
+      {{/each}}
+    </div>
+  {{/if}}
 </div>
 
 <div class="start__footer">

tests/acceptance/onboarding-test.js

@@ -27,6 +27,9 @@ test('A user can onboard as expected', function(assert) {
   server.create('skill', {
     title: 'Ruby'
   });
+  server.create('skill', {
+    title: 'CSS'
+  });
 
   authenticateSession(this.application, { user_id: user.id });
 
@@ -113,7 +116,8 @@ test('A user can onboard as expected', function(assert) {
   });
 
   andThen(() => {
-    assert.equal(onboardingPage.userSkillsList().count, 0);
+    assert.equal(onboardingPage.userSkillsList().count, 0, 'No skills have been added yet');
+    assert.equal(onboardingPage.popularSkillsList().count, 2, 'Popular skills are listed');
     onboardingPage.skillsTypeahead.searchFor('r');
   });
 
@@ -123,6 +127,8 @@ test('A user can onboard as expected', function(assert) {
   });
 
   andThen(() => {
+    assert.equal(onboardingPage.userSkillsList().count, 1, 'A user skill was added');
+    assert.equal(onboardingPage.popularSkillsList().count, 1, 'The popular skills were updated');
     onboardingPage.startFooterButton.click();
   });
 

tests/pages/onboarding.js

@@ -55,6 +55,15 @@ export default create({
     }
   },
 
+  popularSkillsList: collection({
+    scope: '[data-test-popular-skills-list]',
+    itemScope: 'button',
+    item: {
+      text: text(),
+      click: clickable()
+    }
+  }),
+
   roleColumns: collection({
     itemScope: '.expertise__column',
 
@@ -81,7 +90,7 @@ export default create({
   }),
 
   userSkillsList: collection({
-    scope: '.skills__list',
+    scope: '[data-test-user-skills-list]',
     itemScope: 'button',
     item: {
       text: text(),