feat(e2e-testing-cypress): add tests

apps/e2e-testing-cypress/src/e2e/article.cy.ts

@@ -61,6 +61,14 @@ describe('Article', () => {
     cy.findByRole('heading', { name: /my article edited/i }).should('exist');
   });
 
+  it('should redirect to signup when trying to favorite an article while being logged out', () => {
+    // When
+    ArticlePage.getFavoriteButton().first().click();
+
+    // Then
+    cy.findByRole('heading', { name: /sign up/i }).should('exist');
+  });
+
   // TODO add check favorited articles
   xit('should favorite an article', () => {
     // Given

apps/e2e-testing-cypress/src/e2e/auth.cy.ts

@@ -90,4 +90,16 @@ describe('Register', () => {
     AuthPage.getSignInLink().should('not.exist');
     AuthPage.getSignUpLink().should('not.exist');
   });
+
+  it('should logout a user', () => {
+    // Given
+    AuthPage.register();
+
+    // When
+    AuthPage.getSettingsLink().click();
+    AuthPage.logout();
+
+    // Then
+    AuthPage.getSignInLink().should('exist');
+  });
 });

apps/e2e-testing-cypress/src/e2e/feed.cy.ts

@@ -1,5 +1,6 @@
 import { AuthPage } from '../support/auth.po';
 import { FeedPage } from '../support/feed.po';
+import { ArticlePage } from '../support/article.po';
 
 describe('Home', () => {
   it('should display the global feed', () => {
@@ -10,7 +11,7 @@ describe('Home', () => {
     cy.get('.article-meta').should('have.length', 10);
   });
 
-  it('should not display the feed if the user is not logged in', () => {
+  it('should not display the personal feed if the user is not logged in', () => {
     // Then
     FeedPage.getYourFeedTab().should('not.exist');
   });
@@ -25,14 +26,77 @@ describe('Home', () => {
 
   it('should display the list of popular tags', () => {
     // Then
-    cy.contains('Popular Tags')
-      .parent()
-      .within(() => {
-        cy.get('.tag-default').should('have.length', 10);
+    FeedPage.getPopularTags().should('have.length', 10);
+  });
+
+  it('should display a new tab by clicking on a popular tag', () => {
+    // When
+    FeedPage.getPopularTags()
+      .first()
+      .then(tag => {
+        cy.wrap(tag).as('tag');
+        cy.wrap(tag).click();
+      });
+
+    // Then
+    cy.get('@tag')
+      .invoke('text')
+      .then(tagName => {
+        FeedPage.getTagFeedTab(tagName).should('have.class', 'active');
+      });
+  });
+
+  it('should focus a new tab by clicking on a popular tag', () => {
+    // When
+    FeedPage.getPopularTags()
+      .first()
+      .then(tag => {
+        cy.wrap(tag).as('tag');
+        cy.wrap(tag).click();
+      });
+
+    // Then
+    cy.get('@tag')
+      .invoke('text')
+      .then(tagName => {
+        FeedPage.getTagFeedTab(tagName).should('have.class', 'active');
+      });
+  });
+
+  it('should navigate to an article by clicking on its preview', () => {
+    // When
+    FeedPage.getArticlesPreview()
+      .first()
+      .within(articlePreview => {
+        cy.findByRole('heading', { level: 1 }).as('articleTitle');
+        cy.wrap(articlePreview).click();
       });
+
+    // Then
+    cy.get('@articleTitle')
+      .invoke('text')
+      .then(title => {
+        ArticlePage.getArticleTitle(title).should('exist');
+      });
+  });
+
+  it('should display the first active pagination link', () => {
+    // Then
+    FeedPage.getPaginationLinks().first().should('have.text', '1');
+    FeedPage.getPaginationLinks().first().parent().should('have.class', 'active');
+  });
+
+  it('shold display a single active pagination link', () => {
+    // Then
+    cy.get('.pagination').find('.active').should('have.length', 1);
+  });
+
+  it('should display the loading message when loading articles', () => {
+    // Then
+    FeedPage.getLoadingMessage().should('exist');
   });
 
-  it('should favorite an article', () => {
+  xit('should favorite an article', () => {
     // Given
     cy.intercept('POST', '**/api/articles/*/favorite').as('favorite');
 

apps/e2e-testing-cypress/src/support/article.po.ts

@@ -1,8 +1,15 @@
 export class ArticlePage {
+  static getArticleTitle(title: string) {
+    return cy.findByRole('heading', { level: 1 }).contains(title);
+  }
   static getDeleteButton() {
     return cy.get('.btn-outline-danger').contains('Delete Article');
   }
 
+  static getFavoriteButton() {
+    return cy.get('.ion-heart').parent();
+  }
+
   static createArticle() {
     ArticlePage.navigateToCreation();
     ArticlePage.fillArticleForm();

apps/e2e-testing-cypress/src/support/auth.po.ts

@@ -19,6 +19,10 @@ export class AuthPage {
     return cy.findByRole('button', { name: /sign in/i });
   }
 
+  static getSettingsLink(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('link', { name: /settings/i });
+  }
+
   static register(
     user: {
       username?: string;

apps/e2e-testing-cypress/src/support/feed.po.ts

@@ -6,4 +6,27 @@ export class FeedPage {
   static getYourFeedTab(): Cypress.Chainable<JQuery<HTMLElement>> {
     return cy.findByRole('link', { name: /your feed/i });
   }
+
+  static getPopularTags(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy
+      .findByText(/Popular Tags/i)
+      .siblings('.tag-list')
+      .find('.tag-default');
+  }
+
+  static getTagFeedTab(tagName: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get('.nav-item .nav-link').contains(tagName);
+  }
+
+  static getArticlesPreview(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get('.preview-link');
+  }
+
+  static getPaginationLinks(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get('.page-link');
+  }
+
+  static getLoadingMessage(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Loading articles.../i);
+  }
 }