InTeach test card with cypress

inteach_cards.js

describe('InTeach cards', function() {
  it('properly ends a lesson going throw all the cards', function() {
    //We can certainly use Cypress Fixture system to do that.
    const local = {
      url: 'http://localhost:5000',
      email: '[email protected]',
      password: 'XXXX',
      course_title: 'Cours de test n°1',
      lesson_title: 'Leçon avec tous les types de carte',
    };
    
    //Set viewport
    cy.viewport('macbook-15');
    //Visit the url
    cy.visit(`${local.url}/login`);
    //Login
    cy.get('input[type="email"]').type(local.email);
    cy.get('input[type="password"]').type(local.password);
    cy.get('button').click();
    //Check the URL
    cy.url().should('equal', `${local.url}/`);
    //Map on available Courses. If the course title is our test course, let's click on it
    cy.get('.course-title').each(($course, index) => {
      if ($course[0].innerHTML === local.course_title) {
        $course.click();
      }
    });
    //Map on lessons
    cy.get('.hover-element').each(($element, index) => {
     //Now that we've clicked on our test's course, let click on our test lesson
      if ($element.find('.lesson_title')[0].innerHTML === local.lesson_title) {
        //Get the number of cards for this lesson
        nbLessons = $element.find('.nb-lessons')[0].innerHTML;
        //Click on it
        $element.click();
        //Check if the url is the good one
        cy
          .url()
          .should('contain', '/course/')
          .and('contain', '/lesson/');
        //Here we go. Let's map over the cards. 
         for (let i = 0; i < nbLessons; i++) {
             //get our "Continue" button to go to the next card and click on it
              cy
                .get(
                  `#card-wrapper-${
                    i
                  } .continue-button-container .continue-button`
                )
                .click();
              //Get our card Wrapper
              cy
                .get(`#card-wrapper-${i}`)
                .find('.dashboard-card-back')
                .find('.sub-wrapper')
                .then(subWrapper => {
                //If our sub-wrapper has some child this is because our card can be flipped
                  if (subWrapper.children().length > 0) {
                    //get the flipped button and click on it
                    cy
                      .get(
                        `#card-wrapper-${
                          i
                        } .dashboard-card-back .continue-button-container`
                      )
                      .click();
                  }
                });
              //Check if the URL at the end is ok
              cy
                .url()
                .should('contain', '/course/')
                .and('contain', '/lesson/')
                .and('contain', `#${i === nbLessons - 1 ? i : i + 1}`);          
         
        }
      }
    });
  });
});