cypress/integration/onboarding/onboarding.spec.js

+context('Onboarding', () => {
+
+  const remindText = 'remind test text';
+
+  before(() => {
+    cy.getCookie('minds_sess')
+      .then((sessionCookie) => {
+        if (sessionCookie === null) {
+          return cy.login(true);
+        }
+      });
+    cy.visit(`/onboarding`);
+
+    // create two test groups
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  it('should go through the process of onboarding', () => {
+    // notice should appear
+    cy.get('.m-onboarding__form > h1').contains('Welcome to the Minds Community');
+    cy.get('.m-onboarding__form > h2').contains(`@${Cypress.env().username}`);
+
+    // should redirect to /hashtags
+    cy.get('.m-onboarding__form button.mf-button').contains("Let's Get Setup").click();
+    cy.wait(1000);
+
+
+    // should be in the hashtags step
+
+
+    // should have a Profile Setup title
+    cy.get('.m-onboarding__form > h2').contains('Profile Setup');
+
+
+    // should have a progressbar, with the hashtags step highlighted
+    cy.get('.m-onboardingProgressbar__item--selected span:first-child').contains('1');
+    cy.get('.m-onboardingProgressbar__item--selected span:nth-child(2)').contains('Hashtags');
+
+    // should have a description
+    cy.get('.m-onboarding__form .m-onboarding__description').contains('Select some hashtags that are of interest to you.');
+
+    // should have a list of selectable hashtags
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(2)').click();
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(2)').should('have.class', 'm-hashtagsList__item--selected');
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(3)').click();
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(3)').should('have.class', 'm-hashtagsList__item--selected');
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(4)').click();
+    cy.get('.m-hashtags__list li.m-hashtagsList__item:nth-child(4)').should('have.class', 'm-hashtagsList__item--selected');
+
+    // should have a continue and a skip button
+    cy.get('button.mf-button--hollow').contains('Skip');
+    cy.get('button.mf-button--alt').contains('Continue').click();
+
+    // should be in the info step
+    cy.get('.m-onboardingProgressbar__item--selected span:first-child').contains('2');
+    cy.get('.m-onboardingProgressbar__item--selected span:nth-child(2)').contains('Info');
+
+    // should have a Mobile Phone Number input
+    cy.get('.m-onboarding__controls .m-onboarding__input:first-child label').contains('Mobile Phone Number');
+
+    // open country dropdown
+    cy.get('.m-onboarding__controls .m-phone-input--selected-flag').click();
+    // click on UK
+    cy.get('.m-phone-input--country-list li:nth-child(2)').click();
+    // Uk should be selected
+    cy.get('.m-phone-input--selected-flag .m-phone-input--dial-code').contains('+44');
+
+    // add the number
+    cy.get('#phone').type('012345678');
+
+    // should have a Location input
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(2) label').contains('Location');
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(2) input').type('London');
+
+
+    // should have Date of Birth inputs
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(3) label').contains('Date of Birth');
+
+    // open month selection and pick February
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(3) select:nth-child(1)').select('February');
+
+    // open day selection and pick 2nd
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(3) select:nth-child(2)').select('2');
+
+    // open year selection and pick 1991
+    cy.get('.m-onboarding__controls .m-onboarding__input:nth-child(3) select:nth-child(3)').select('1991');
+
+    // should have a continue and a skip button
+    cy.get('button.mf-button--hollow').contains('Skip');
+    cy.get('button.mf-button--alt').contains('Continue').click();
+
+    // should be in the Groups step
+
+    // should have a groups list
+    cy.get('.m-groupList__list').should('exist');
+
+    // clicking on a group join button should join the group
+    // cy.get('.m-groupList__list .m-groupList__item:first-child .m-join__subscribe').contains('add').click();
+    // // button should change to a check, and clicking on it should leave the group
+    // cy.get('.m-groupList__list .m-groupList__item:first-child .m-join__subscribed').contains('check').click();
+    // cy.get('.m-groupList__list .m-groupList__item:first-child .m-join__subscribe i').contains('add');
+
+    // should have a continue and a skip button
+    cy.get('button.mf-button--hollow').contains('Skip');
+    cy.get('button.mf-button--alt').contains('Continue').click();
+
+
+    // should be in the Channels step
+
+    // should have a channels list
+    // cy.get('.m-channelList__list').should('exist');
+    // // clicking on a group join button should join the group
+    // cy.get('.m-channelList__list .m-channelList__item:first-child .m-join__subscribe').contains('add').click();
+    // // button should change to a check, and clicking on it should leave the channel
+    // cy.get('.m-channelList__list .m-channelList__item:first-child .m-join__subscribed').contains('check').click();
+    // cy.get('.m-channelList__list .m-channelList__item:first-child .m-join__subscribe i').contains('add');
+
+    // should have a continue and a skip button
+    cy.get('button.mf-button--hollow').contains('Skip');
+    cy.get('button.mf-button--alt').contains('Finish').click();
+
+    // should be in the newsfeed
+    cy.location('pathname').should('eq', '/newsfeed/subscriptions');
+  });
+});

src/app/modules/new-onboarding/join/join.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
 import { Session } from '../../../services/session';
 import { Client } from '../../../services/api';
+import { GroupsService } from '../../groups/groups-service';
 
 @Component({
   selector: 'm-join',
   template: `
-    <div
-      class="m-join__subscribe"
-      (click)="subscribe($event)"
-      *ngIf="!_entity.subscribed"
-    >
+    <div class="m-join__subscribe" (click)="add($event)" *ngIf="!isMember()">
       <i class="material-icons">
         add
       </i>
     </div>
 
-    <div
-      class="m-join__subscribed"
-      (click)="unSubscribe($event)"
-      *ngIf="_entity.subscribed"
-    >
+    <div class="m-join__subscribed" (click)="leave($event)" *ngIf="isMember()">
       <i class="material-icons">
         check
       </i>
     </div>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JoinComponent {
   _entity: any = {
@@ -32,20 +33,90 @@ export class JoinComponent {
   };
   @Output('subscribed') onSubscribed: EventEmitter<any> = new EventEmitter();
 
-  constructor(public session: Session, public client: Client) {}
+  constructor(
+    public session: Session,
+    public client: Client,
+    public groupsService: GroupsService,
+    public cd: ChangeDetectorRef
+  ) {}
 
   @Input('entity')
   set entity(value: any) {
     this._entity = value;
+    this.detectChanges();
   }
 
-  async subscribe(e) {
+  add(e) {
     e.preventDefault();
     e.stopPropagation();
 
+    switch (this._entity.type) {
+      case 'user':
+        this.subscribe();
+        break;
+      case 'group':
+        this.joinGroup();
+        break;
+    }
+  }
+
+  leave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    switch (this._entity.type) {
+      case 'user':
+        this.unSubscribe();
+        break;
+      case 'group':
+        this.leaveGroup();
+        break;
+    }
+  }
+
+  isMember() {
+    switch (this._entity.type) {
+      case 'user':
+        return this._entity.subscribed;
+      case 'group':
+        return this._entity['is:member'];
+    }
+  }
+
+  private async joinGroup() {
+    this._entity['is:member'] = true;
+    this.onSubscribed.next();
+    this.detectChanges();
+
+    try {
+      await this.groupsService.join(this._entity);
+    } catch (e) {
+      this._entity['is:member'] = false;
+      this.detectChanges();
+    }
+  }
+
+  private async leaveGroup() {
+    this._entity['is:member'] = false;
+
+    this.onSubscribed.next();
+
+    this.detectChanges();
+
+    try {
+      await this.groupsService.leave(this._entity);
+    } catch (e) {
+      this._entity['is:member'] = true;
+      this.detectChanges();
+    }
+  }
+
+  private async subscribe() {
     this._entity.subscribed = true;
     this.onSubscribed.next();
 
+    this.detectChanges();
+
     try {
       const response: any = await this.client.post(
         'api/v1/subscribe/' + this._entity.guid,
@@ -54,26 +125,30 @@ export class JoinComponent {
       if (response && response.error) {
         throw 'error';
       }
-
-      this._entity.subscribed = true;
     } catch (e) {
       this._entity.subscribed = false;
+      this.detectChanges();
     }
   }
 
-  async unSubscribe(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  private async unSubscribe() {
     this._entity.subscribed = false;
 
+    this.detectChanges();
+
     try {
       const response: any = await this.client.delete(
         'api/v1/subscribe/' + this._entity.guid,
         {}
       );
-      this._entity.subscribed = false;
     } catch (e) {
       this._entity.subscribed = true;
+      this.detectChanges();
     }
   }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
 }

src/app/modules/new-onboarding/progressbar/progressbar.component.html

@@ -5,7 +5,7 @@
   <ng-container *ngIf="!isMobile(); else mobileBlock">
     <div
       class="m-onboardingProgressbar__item"
-      [class.onboardingProgressbar__item--selected]="step.selected"
+      [class.m-onboardingProgressbar__item--selected]="step.selected"
       *ngFor="let step of steps; let i = index"
     >
       <span>{{ i + 1 }}</span>

src/app/modules/new-onboarding/progressbar/progressbar.component.scss

@@ -65,7 +65,7 @@
       z-index: 2;
     }
 
-    &.onboardingProgressbar__item--selected {
+    &.m-onboardingProgressbar__item--selected {
       .m-onboardingProgressbarItem__selector {
         //background-color: red;
         @include m-theme() {

src/app/modules/new-onboarding/steps/channels/list/list.component.ts

@@ -15,7 +15,7 @@ type EntityType = 'group' | 'user';
 @Component({
   selector: 'm-channel__list',
   templateUrl: 'list.component.html',
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChannelListComponent implements OnInit {
   @Input() entityType: EntityType = 'user';
@@ -31,7 +31,8 @@ export class ChannelListComponent implements OnInit {
     private storage: Storage
   ) {}
 
-  async ngOnInit() {
+  ngOnInit() {
+    this.feedsService.clear();
     this.feedsService.feed.subscribe(async entities => {
       if (!entities.length) {
         return;
@@ -45,10 +46,10 @@ export class ChannelListComponent implements OnInit {
       this.detectChanges();
     });
 
-    this.load();
+    this.load(true);
   }
 
-  async load(refresh: boolean = false, forceSync: boolean = false) {
+  async load(refresh: boolean = false) {
     if (refresh) {
       this.feedsService.clear();
     }
@@ -72,7 +73,7 @@ export class ChannelListComponent implements OnInit {
           query,
           nsfw,
         })
-        .setLimit(12)
+        .setLimit(3)
         .setCastToActivities(true)
         .fetch();
     } catch (e) {
@@ -83,27 +84,6 @@ export class ChannelListComponent implements OnInit {
     this.detectChanges();
   }
 
-  async pass(suggestion, e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.entities.splice(this.entities.indexOf(suggestion), 1);
-    this.storage.set(
-      `user:suggestion:${suggestion.entity_guid}:removed`,
-      suggestion.entity_guid
-    );
-    await this.client.put(`api/v2/suggestions/pass/${suggestion.entity_guid}`);
-    this.detectChanges();
-  }
-
-  remove(suggestion) {
-    this.entities.splice(this.entities.indexOf(suggestion), 1);
-    this.storage.set(
-      `user:suggestion:${suggestion.entity_guid}:removed`,
-      suggestion.entity_guid
-    );
-    this.detectChanges();
-  }
-
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/modules/new-onboarding/steps/groups/list/list.component.html

@@ -26,7 +26,7 @@
             <span i18n>{{ entity['members:count'] | abbr }} members</span>
           </div>
           <div class="m-layout__spacer"></div>
-          <m-join [entity]="entity | async"></m-join>
+          <m-join [entity]="entity"></m-join>
         </div>
       </a>
     </li>

src/app/modules/new-onboarding/steps/groups/list/list.component.ts

@@ -32,7 +32,7 @@ export class GroupListComponent implements OnInit {
     private storage: Storage
   ) {}
 
-  async ngOnInit() {
+  ngOnInit() {
     this.feedsService.feed.subscribe(async entities => {
       if (!entities.length) {
         return;
@@ -46,10 +46,10 @@ export class GroupListComponent implements OnInit {
       this.detectChanges();
     });
 
-    this.load();
+    this.load(true);
   }
 
-  async load(refresh: boolean = false, forceSync: boolean = false) {
+  async load(refresh: boolean = false) {
     if (refresh) {
       this.feedsService.clear();
     }
@@ -65,7 +65,7 @@ export class GroupListComponent implements OnInit {
       const nsfw = [];
 
       this.feedsService
-        .setEndpoint(`api/v2/feeds/global/top/channels`)
+        .setEndpoint(`api/v2/feeds/global/top/groups`)
         .setParams({
           hashtags,
           period,
@@ -73,7 +73,7 @@ export class GroupListComponent implements OnInit {
           query,
           nsfw,
         })
-        .setLimit(12)
+        .setLimit(3)
         .setCastToActivities(true)
         .fetch();
     } catch (e) {
@@ -84,27 +84,6 @@ export class GroupListComponent implements OnInit {
     this.detectChanges();
   }
 
-  async pass(suggestion, e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.entities.splice(this.entities.indexOf(suggestion), 1);
-    this.storage.set(
-      `user:suggestion:${suggestion.entity_guid}:removed`,
-      suggestion.entity_guid
-    );
-    await this.client.put(`api/v2/suggestions/pass/${suggestion.entity_guid}`);
-    this.detectChanges();
-  }
-
-  remove(suggestion) {
-    this.entities.splice(this.entities.indexOf(suggestion), 1);
-    this.storage.set(
-      `user:suggestion:${suggestion.entity_guid}:removed`,
-      suggestion.entity_guid
-    );
-    this.detectChanges();
-  }
-
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();