jam-cloud/jam-ui/cypress/integration/friends/friends-list.spec.js

/// <reference types="cypress" />

describe('Friends page without data', () => {
  beforeEach(() => {
    cy.stubAuthenticate(); 
    cy.intercept('POST', /\S+\/filter/, 
      {
        "musicians": []
      }
    );
  })

  it('shows no records alert', () => {
    cy.visit('/friends');
    cy.contains('No Records!')
  })
})


describe('Friends page with data', () => {
  beforeEach(() => {
    cy.stubAuthenticate({ id: '2'}); //currentUser id is 2 - people.yaml fixture
    cy.intercept('POST', /\S+\/filter/, { fixture: 'people' });
  });

  describe('friends list', () => {
    beforeEach(() => {
      cy.visit('/friends');
    });

    it('lists musician users', () => {
      cy.contains('Find New Friends').should('exist');
      cy.contains('Update Search').should('exist');
      cy.contains('Reset Filters').should('exist');
      cy.get('[data-testid=peopleListTable] > tbody tr')
        .should('have.length', 20)
        .first()
        .contains('Test User1');
    });

    //TODO: paginate
  });

  describe('details side panel', () => {
    
    const showSidePanelContent = () => {
      cy.get('[data-testid=profileSidePanel] h4').should('have.text', 'Test User1')
      cy.get('[data-testid=profileSidePanel] .modal-body p').within(() => {
        cy.contains('Location: Denver, US')
        .and('contain', 'Location: Denver, US')
        .and('contain', 'Skill Level: Professional')
        .and('contain', 'Joined JamKazam: 08-26-2021')
        .and('contain', 'Last Active:')
        .and('contain', 'Latency to Me:')
        cy.get('.latency-badge').contains('UNKNOWN')
      })

      cy.get('[data-testid=profileSidePanel] .modal-body').within(() => {
        cy.get('[data-testid=biography]').contains('Biography of Test User1')

        //instruments
        cy.get('[data-testid=instruments]').contains('Acoustic Guitar: Expert')
        cy.get('[data-testid=instruments]').contains('Keyboard: Expert')

        //genres
        cy.get('[data-testid=genres]').contains('classical, blues')

        //bands
        cy.get('[data-testid=bands]').contains('The Band')

        //performance_samples
        //cy.get('[data-testid=performance_samples]').contains('The Band')

        //online presence
        cy.get('[data-testid=online_presences]')
        .contains('Soundcloud')
        cy.get('[data-testid=online_presences]')
        .contains('Reverbnation')

        
      })

    }

    const closeMoreDetailsSidePanel = () => {
      cy.get('[data-testid=profileSidePanel] .modal-header button.close').click()
    }
    
    beforeEach(() => { 
      cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'person' });
      cy.visit('/friends');  
    });

    it('shows profile side panel', () => {
      //open side panel by clicking name
      cy.contains('Test User1').click();
      showSidePanelContent()
      closeMoreDetailsSidePanel()

      //open side panel by clicking more button
      cy.get('[data-testid=peopleListTable] > tbody tr').first().find('[data-testid=btnMore]').click()
      showSidePanelContent()  
      closeMoreDetailsSidePanel()

      //open side panel by clicking more link
      cy.get('[data-testid=peopleListTable] > tbody tr').first().find('[data-testid=linkMore]').click()
      showSidePanelContent()
      closeMoreDetailsSidePanel()  
    });
  });

  describe('making friendship', () => {

    it('add friend', () => {
      cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'person' });
      cy.intercept('POST', /\S+\/friend_requests/, { statusCode: 201, body: { ok: true } });
      
      cy.visit('/friends');
      cy.contains('Test User1').click();

      cy.get('[data-testid=profileSidePanel]')
        .find('[data-testid=connect]')
        .should('not.be.disabled')
        .click();
      cy.get('[data-testid=profileSidePanel]')
        .find('[data-testid=connect]')
        .should('be.disabled');
    });

    it('remove friend', () => {
      cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'friend' });
      cy.intercept('DELETE', /\S+\/friends\S+/, { statusCode: 204, body: { ok: true } });

      cy.visit('/friends');
      cy.contains('Test User1').click();

      cy.get('[data-testid=profileSidePanel]')
        .find('[data-testid=disconnect]')
        .should('exist')
        .should('not.be.disabled')
        .click();

      cy.get('[data-testid=profileSidePanel]')
        .find('[data-testid=disconnect]')
        .should('not.exist');

      cy.get('[data-testid=profileSidePanel]')
        .find('[data-testid=connect]')
        .should('be.exist')
        .should('not.be.disabled')
    });

  })

  describe('chat window', () => {
    beforeEach(() => {
      cy.visit('/friends');
    });
    
    it('is not disabled for friends', () => {
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(0)
      .find('[data-testid=message]').should('not.be.disabled').trigger('mouseover')
      cy.contains('Send a message').should('exist')
    })

    it('is disabled for non friends', () => {
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(1)
      .find('[data-testid=message]').should('be.disabled')
      //cy.contains('You can message this user once you are friends').should('exist')
    })

    it('lists text messages', () => {
      //initially show the most recent messages on openning chat window modal
      let numberOfMessages = 10
      cy.fixture('text_messages_page1').then((json) => {
        cy.intercept('GET', /\S+\/text_messages\S+/, json).as('getTextMessages');
      })
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(0)
      .find('[data-testid=message]').click()
      cy.wait('@getTextMessages')
      cy.get('[data-testid=textMessageModal]').should('be.visible').within(() => {
        cy.get('.text-message-row').should('have.length', numberOfMessages)
       
        //display previous messages by scrolling up
        const messageFixtures = [
          'text_messages_page2',
          'text_messages_page3'
        ]
        // messageFixtures.forEach((fixture) => {
        //   cy.fixture(fixture).then((json) => {
        //     cy.intercept('GET', /\S+\/text_messages\S+/, json)
        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('bottom')
        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('top')
        //     numberOfMessages = numberOfMessages + 10
        //     cy.get('.text-message-row').should('have.length', numberOfMessages)
        //   })
        // })
        
        cy.get('button').contains('Close').should('not.be.disabled').click()

      })
      cy.get('[data-testid=textMessageModal]').should('not.be.visible')

    })
    
    it('sends message by clicking send button', () => {
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(0)
      .find('[data-testid=message]').click()
      cy.get('[data-testid=textMessageModal]').within(() => {
        cy.get('button').contains('Send').should('be.disabled')
        cy.get('textarea').type('Hello')
        cy.get('button').contains('Send').should('not.be.disabled').click()
        cy.get('textarea').should('have.value', '')
        cy.get('button').contains('Send').should('be.disabled')
      })
      
    })

    it('sends message by pressing enter key', () => {
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(0)
      .find('[data-testid=message]').click()
      cy.get('[data-testid=textMessageModal]').within(() => {
        cy.get('button').contains('Send').should('be.disabled')
        cy.get('textarea').type('Hello{enter}')
        cy.get('textarea').should('have.value', '')
        cy.get('button').contains('Send').should('be.disabled')
      })
    })

    it('goes away by clicking close button', () => {
      cy.get('[data-testid=peopleListTable] > tbody tr')
      .eq(0)
      .find('[data-testid=message]').click()
      cy.get('[data-testid=textMessageModal]').within(() => {
        cy.get('button').contains('Close').should('not.be.disabled').click()
      })
      cy.get('[data-testid=textMessageModal]').should('not.be.visible')
    })

    it.skip('shows received message by other user', () => {
      //TODO: this should be test in e2e test (without faking backend api intractions)  
    })


  })
});