[#9] Add e2e tests for article read (#15)

* test(article-read): add e2e tests for article read

Refs: #9

* changes as per review

Refs: #9

---------

Co-authored-by: idembele70 <idembele70@gmail>

Author: idembele70

docs/tests-inventories/0002_article-inventory.xlsx

@@ -1,4 +1,4 @@
-import { Locator, Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 
 export class HeaderComponent {
   private readonly container: Locator;
@@ -14,16 +14,24 @@ export class HeaderComponent {
     this.container = this.page.getByRole('navigation');
 
     this.brandLink = this.container.getByRole('link', { name: 'conduit', exact: true });
-    this.homeLink = this.container.getByRole('link', { name: 'Home', exact: true});
-    this.newArticleLink = this.container.getByRole('link', { name: /New Article$/});
-    this.settingsLink = this.container.getByRole('link', { name: /Settings$/});
-    this.profileLink = this.container.getByRole('link').filter({ has: this.page.getByRole('img')});
+    this.homeLink = this.container.getByRole('link', { name: 'Home', exact: true });
+    this.newArticleLink = this.container.getByRole('link', { name: /New Article$/ });
+    this.settingsLink = this.container.getByRole('link', { name: /Settings$/ });
+    this.profileLink = this.container.getByRole('link').filter({ has: this.page.getByRole('img') });
 
-    this.signInLink = this.container.getByRole('link', { name: 'Sign in', exact: true});
-    this.signUpLink = this.container.getByRole('link', { name: 'Sign up', exact: true});
+    this.signInLink = this.container.getByRole('link', { name: 'Sign in', exact: true });
+    this.signUpLink = this.container.getByRole('link', { name: 'Sign up', exact: true });
   }
 
   async goToProfile(): Promise<void> {
     await this.profileLink.click();
   }
+
+  async expectAuthenticatedHeaderVisible(): Promise<void> {
+    await expect(this.brandLink).toBeVisible();
+    await expect(this.homeLink).toBeVisible();
+    await expect(this.newArticleLink).toBeVisible();
+    await expect(this.settingsLink).toBeVisible();
+    await expect(this.profileLink).toBeVisible();
+  }
 }

e2e/shared/layouts/header.component.ts

@@ -0,0 +1,50 @@
+import { ArticlePreviewComponent } from "@article/components/article-preview.component";
+import { expect, Locator, Page } from "@playwright/test";
+import { HeaderComponent } from "@shared/layouts/header.component";
+import { FRONT_URLS, FRONT_URLS_REG_EXP } from "@shared/utilities/url-front.utility";
+
+export class HomePage {
+  header: HeaderComponent;
+  readonly mainContent: Locator;
+  readonly articlePreview: ArticlePreviewComponent;
+  constructor(private readonly page: Page) {
+    this.header = new HeaderComponent(this.page);
+    this.mainContent = this.page.locator('app-home-page')
+    this.articlePreview = new ArticlePreviewComponent(this.page);
+  }
+
+  async goToViaUrl(): Promise<void> {
+    await this.page.goto(FRONT_URLS.HOME);
+  }
+
+  getPaginationButton(pageNumber: number): Locator {
+    return this.page.locator('button.page-link', { hasText: String(pageNumber) });
+  }
+
+  async selectTag(tag: string): Promise<void> {
+    await this.page.locator('a.tag-pill', { hasText: tag }).click();
+  }
+
+  async expectTagFilterTitle(tag: string): Promise<void> {
+    await expect(this.page.locator('.nav-item', { hasText: tag })).toBeVisible();
+  }
+
+  async expectOnHomePage(): Promise<void> {
+    await expect(this.page).toHaveURL(FRONT_URLS_REG_EXP.HOME);
+    await expect(this.mainContent).toBeVisible();
+  }
+
+  async expectOnAuthenticatedHomePage(): Promise<void> {
+    await this.expectOnHomePage();
+    await this.header.expectAuthenticatedHeaderVisible();
+  }
+
+  async expectEmptyState(): Promise<void> {
+    await expect(this.page.locator('.article-preview')).toHaveText('No articles are here... yet.');
+    await expect(this.page.getByText('No tags are here... yet.')).toBeVisible();
+  }
+
+  async expectLoadingIndicatorVisible(): Promise<void> {
+  await expect(this.page.getByText('Loading articles...')).toBeVisible();
+  }
+}

e2e/shared/pages/home.page.ts

@@ -0,0 +1,9 @@
+export class DateUtilities {
+  static formatDateToLongEnglish(timestamp: string): string {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    }).format(new Date(timestamp));
+  }
+}

e2e/shared/utilities/date.utilities.ts

@@ -11,8 +11,12 @@ export const API_URLS_REGEX = {
 export const API_URLS = {
   ARTICLES: {
     CREATION: 'articles/',
-    DELETION: (slug: string) => `articles/${slug}`
+    DELETION: (slug: string) => `articles/${slug}`,
+    GET_LIST: ({ limit = 10, offset = 0 } = {}) => `articles?limit=${limit}&offset=${offset}`
   },
+  TAG: {
+    GET_LIST: 'tags'
+  }
 };
 
 export const mockApiUrl = (pathname: string): string => `**${pathname}`;

e2e/shared/utilities/url-api.utility.ts

@@ -15,4 +15,6 @@ export const FRONT_URLS = {
   LOGIN:'login',
   REGISTER:'register',
   ARTICLE_EDITOR: 'editor',
+  ARTICLE_DETAILS: 'article',
+  PROFILE: 'profile'
 } as const;

e2e/shared/utilities/url-front.utility.ts

@@ -1,16 +1,37 @@
-import { Article } from "./models/article.model";
+import { Article, CreateArticleRequest } from "./models/article.model";
 
 export class ArticleFactory {
-  static buildArticle(id: string, overrides?: Partial<Article>): Article {
+  static buildArticlePayload(id: string, overrides?: CreateArticleRequest): CreateArticleRequest {
     return {
-      title: `article-${id}`,
+      title: `title-${id}`,
       description: `description-${id}`,
-      content: `content-${id}`,
-      tags: [`tag-1-${id}`, `tag-2-${id}`],
+      body: `body-${id}`,
+      tagList: [`tag-1-${id}`, `tag-2-${id}`],
       ...overrides,
     };
   }
 
+  static buildArticle(id: string | number, overrides?: Article): Article {
+    return {
+      slug: `title-${id}`,
+      title: `title ${id}`,
+      description: `Description ${id}`,
+      body: 'body',
+      tagList: [`tag-${id}`],
+      createdAt: String(Date.now()),
+      updatedAt: String(Date.now()),
+      favorited: false,
+      favoritesCount: 0,
+      author: {
+        username: `user-${id}`,
+        bio: null,
+        image: '',
+        following: false,
+      },
+      ...overrides,
+    }
+  }
+
   static buildArticleTagList(parallelIndex: number, length: number): string[] {
     return Array.from({ length }, (_, idx) => `tag-worker-${parallelIndex}-${idx}`);
   }

e2e/tests/article/article-form.component.ts

@@ -1,8 +1,33 @@
 import { AuthUtility } from "@auth/auth.utility";
-import { Page } from "@playwright/test";
+import { Page, TestInfo } from "@playwright/test";
 import { API_URLS, mockApiUrl } from "@shared/utilities/url-api.utility";
+import { Article, CreateArticleRequest } from "./models/article.model";
+import { CompositeIdFactory } from "@shared/factories/composite-id.factory";
+import { ArticleFactory } from "./article.factory";
+import { FRONT_URLS } from "@shared/utilities/url-front.utility";
 
 export class ArticleUtility {
+  static async createArticleViaApi(token: string, articlePayload: CreateArticleRequest): Promise<Article> {
+    const apiContext = await AuthUtility.createAuthenticatedApiContext(token);
+
+    try {
+      const response = await apiContext.post(API_URLS.ARTICLES.CREATION, {
+        data: { article: articlePayload },
+      });
+
+      if (!response.ok()) {
+        const body = await response.text();
+        throw new Error(
+          `Create article failed: ${response.status()} ${response.statusText()} - ${body}`
+        );
+      }
+      const responseBody = await response.json();
+      return responseBody.article;
+    } finally {
+      await apiContext.dispose();
+    }
+  }
+
   static async deleteArticle(token: string, slug: string): Promise<void> {
     const apiContext = await AuthUtility.createAuthenticatedApiContext(token);
 
@@ -42,4 +67,33 @@ export class ArticleUtility {
       getCallCount: () => callCount,
     }
   }
+
+  static async mockGetArticleList(page: Page, { delay = 0, status = 200, body = {} } = {}): Promise<void> {
+    await page.route(mockApiUrl(API_URLS.ARTICLES.GET_LIST()), async route => {
+      if (delay) await new Promise(r => setTimeout(r, delay));
+      await route.fulfill({
+        status,
+        contentType: 'application/json',
+        body: JSON.stringify(body),
+      });
+    });
+  }
+
+  static async mockGetTagList(page: Page, { delay = 0, status = 200, body = {} } = {}): Promise<void> {
+    await page.route(mockApiUrl(API_URLS.TAG.GET_LIST), async route => {
+      if (delay) await new Promise(r => setTimeout(r, delay));
+      await route.fulfill({
+        status,
+        contentType: 'application/json',
+        body: JSON.stringify(body),
+      });
+    });
+  }
+
+  static generateTestArticle(workerInfo: TestInfo, title: string): CreateArticleRequest {
+    const shardIndex = workerInfo.config.shard?.current ?? 1;
+    const id = CompositeIdFactory.create(title, 'shard', shardIndex, 'worker', workerInfo.parallelIndex);
+    return ArticleFactory.buildArticlePayload(id);
+  }
+
 }