Classroom.spec.js

/* eslint-disable no-undef */

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

const visitFirstVideo = () =>
  cy.visit('/?class=o-que-ha-de-novo-no-vue-3-introducao');

const visitSecondVideo = () =>
  cy.visit('/?class=o-que-ha-de-novo-no-vue-3-instalacao');

beforeEach(() => {
  cy.viewport(1920, 1080);
});

describe('Classroom', () => {
  it('displays the quantity of videos and the total time', () => {
    visitFirstVideo();

    cy.contains('12 aulas - Duração: 57:05 min.');
  });

  describe('Social Media Sharing Buttons', () => {
    beforeEach(() => {
      visitFirstVideo();
      cy.get('[data-testid=share-button-facebook]').as('fb');
      cy.get('[data-testid=share-button-twitter]').as('tw');
      cy.get('[data-testid=share-button-linkedin]').as('ln');
      cy.get('[data-testid=share-button-telegram]').as('tg');
    });

    it('displays 4 buttons for social media sharing', () => {
      cy.get('@fb').should('exist');
      cy.get('@tw').should('exist');
      cy.get('@ln').should('exist');
      cy.get('@tg').should('exist');
    });

    it('ensures proper URL for Facebook button', () => {
      visitFirstVideo();

      cy.get('@fb')
        .should('have.prop', 'href')
        .and('equal', 'https://facebook.com/sharer/sharer.php?u=https://classes.vedovelli.com.br/?class=o-que-ha-de-novo-no-vue-3-introducao');
    });
    
    it('ensures proper URL for Twitter button', () => {
      visitFirstVideo();

      cy.get('@tw')
        .should('have.prop', 'href')
        .and('equal', 'https://twitter.com/intent/tweet/?text=O%20que%20h%C3%A1%20de%20novo%20no%20Vue%203%20-%20Introdu%C3%A7%C3%A3o%20-%20por%20%40vedovelli74&url=https://classes.vedovelli.com.br/?class=o-que-ha-de-novo-no-vue-3-introducao');
    });
    
    it('ensures proper URL for Linkedin button', () => {
      visitFirstVideo();

      cy.get('@ln')
        .should('have.prop', 'href')
        .and('equal', 'https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fclasses.vedovelli.com.br%2F%3Fclass%3Do-que-ha-de-novo-no-vue-3-introducao&title=O%20que%20h%C3%A1%20de%20novo%20no%20Vue%203%20-%20Introdu%C3%A7%C3%A3o%20-%20por%20Fabio%20Vedovelli&summary=O%20que%20h%C3%A1%20de%20novo%20no%20Vue%203%20-%20Introdu%C3%A7%C3%A3o%20-%20por%20Fabio%20Vedovelli&source=https://vedovelli.com.br');
    });

    it('ensures proper URL for Telegram button', () => {
      visitFirstVideo();

      cy.get('@tg')
        .should('have.prop', 'href')
        .and('equal', 'https://telegram.me/share/url?text=O%20que%20h%C3%A1%20de%20novo%20no%20Vue%203%20-%20Introdu%C3%A7%C3%A3o%20-%20por%20Fabio%20Vedovelli&url=https://classes.vedovelli.com.br/?class=o-que-ha-de-novo-no-vue-3-introducao');
    });
  });

  describe('Search', () => {
    it('changes the quantity and the time when the list gets filtered by a search', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').type('compo', { force: true });

      cy.contains('5 aulas - Duração: 32:52 min.');
    });

    it('filters the list of videos on input search typing', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').type('compo', { force: true });

      cy.contains('Composition API');

      cy.get('[data-testid=video-link]').should('have.length', 10);
    });

    it('includes the search term in the query string while typing', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').type('compo', { force: true });

      cy.location('search').should('include', '&term=compo');
    });

    it('removes the search term in the query string when search field is cleared', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').as('searchField');

      cy.get('@searchField').type('compo', { force: true });

      cy.get('@searchField').clear({ force: true });

      cy.location('search').should('include', '&term=');
    });

    it('displays filtered list when the URL contains term=combo', () => {
      cy.visit('/?class=o-que-ha-de-novo-no-vue-3-introducao&term=compo');

      cy.get('[data-testid=video-link]').should('have.length', 10);
    });

    it('displays a message when the search returns no results', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').type('dasjkdasjdjldajldas', { force: true });

      cy.get('[data-testid=video-link]').should('have.length', 0);

      cy.contains('Nenhum vídeo encontrado');
    });

    it('ensures typed search term is highlighted in the results', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').type('compo', { force: true });

      cy.contains('Composition API');

      cy.get('[data-testid=highlight]').as('highlight');

      cy.get('@highlight')
        .should('have.length', 10)
        .should('contain.text', 'Compo');
    });

    it('filters and reinstate the list of videos when search input gets cleared', () => {
      visitFirstVideo();

      cy.get('#search-for-videos').as('searchInput');

      cy.get('@searchInput').type('compo', { force: true });

      cy.get('[data-testid=video-link]').should('have.length', 10);

      cy.get('@searchInput').clear({ force: true });

      cy.get('[data-testid=video-link]').should('have.length.greaterThan', 1);
    });

    it('highlights current video in the video list', () => {
      visitSecondVideo();

      cy.get('[data-testid=video-link]')
        .eq(1)
        .should('have.class', 'highlighted');
    });

    it('highlights ONLY current video in the video list', () => {
      visitSecondVideo();

      cy.get('[data-testid=video-link]')
        .eq(0)
        .should('not.have.class', 'highlighted');
    });
  });

  describe('Navigation', () => {
    it('redirects user to the course list when the class query param returns no video', () => {
      cy.visit('/?class=some-inexistent-video-slug');

      cy.reload();

      cy.location('pathname').should('eq', '/courses');
    });

    it('loads proper video information when the classroom is first loaded after a course link click', () => {
      visitFirstVideo();

      cy.contains(
        'Venha descobrir o que será disponibilizado na nova versão do Vue.js, que tem previsão de lançamento para o final do primeiro semestre de 2020.',
      );
      cy.contains('Introdução');
      cy.contains('20/03/2020');
    });

    it('loads proper video information when the the second link is clicked', () => {
      visitSecondVideo();

      cy.contains('O que há de novo no Vue 3');
      cy.contains('Instalação do Vue 3');
      cy.contains('20/03/2020');
      cy.contains(
        'Apesar de ainda estar em Alpha, já é possível instalar a versão 3 através de um plugin do vue-cli. Basta criar um projeto com Vue 2 e instalar o plugin. Este vídeo lhe mostrará como fazer.',
      );
    });

    it('returns to the course list when the Home icon gets clicked', () => {
      visitFirstVideo();

      cy.get('[data-testid=home-link]')
        .first()
        .click({ force: true });

      cy.location('pathname').should('eq', '/courses');
    });
  });
});