Merge pull request #532 from bounswe/feat/431-e2e-job-application

feat: add end-to-end tests for job application flow, including page o…

Author: ykaydogdu

apps/jobboard-frontend/tests/e2e/selenium/fixtures/sample-resume.pdf

@@ -0,0 +1,104 @@
+/**
+ * Job Application Page Object
+ *
+ * Page object for job application form submission.
+ * Route: /jobs/:id/apply
+ */
+
+import path from 'path';
+import { WebDriver, By } from 'selenium-webdriver';
+import { BasePage } from './BasePage.ts';
+
+export class JobApplicationPage extends BasePage {
+  private readonly coverLetter = By.id('coverLetter');
+  private readonly specialNeeds = By.id('specialNeeds');
+  private readonly fileInput = By.css('input[type="file"]');
+  private readonly submitButton = By.css('button[type="submit"]');
+
+  // React-Toastify toasts
+  private readonly successToast = By.css('.Toastify__toast--success');
+  private readonly errorToast = By.css('.Toastify__toast--error');
+  private readonly anyToastAlert = By.css('[role="alert"]');
+
+  constructor(driver: WebDriver) {
+    super(driver);
+  }
+
+  async waitForLoaded(timeout: number = 10000): Promise<void> {
+    await this.waitForVisible(this.coverLetter, timeout);
+    await this.waitForVisible(this.specialNeeds, timeout);
+    await this.waitForElement(this.fileInput, timeout);
+    await this.waitForVisible(this.submitButton, timeout);
+  }
+
+  async fillCoverLetter(text: string): Promise<void> {
+    await this.type(this.coverLetter, text);
+  }
+
+  async fillSpecialNeeds(text: string): Promise<void> {
+    await this.type(this.specialNeeds, text);
+  }
+
+  /**
+   * Upload CV by sending an absolute path to the hidden file input.
+   * WebDriver requires an absolute path on the local filesystem.
+   */
+  async uploadCv(filePath: string): Promise<void> {
+    const absolutePath = path.isAbsolute(filePath) ? filePath : path.resolve(filePath);
+    const input = await this.waitForElement(this.fileInput, 10000);
+    await input.sendKeys(absolutePath);
+  }
+
+  async submit(): Promise<void> {
+    await this.click(this.submitButton, 10000);
+  }
+
+  /**
+   * Wait for a success toast after submitting the application.
+   * If an error toast appears first, it throws with the toast text.
+   */
+  async waitForSubmissionSuccess(timeout: number = 15000): Promise<void> {
+    const endTime = Date.now() + timeout;
+    let lastToastText = '';
+
+    while (Date.now() < endTime) {
+      if (await this.elementExists(this.anyToastAlert)) {
+        try {
+          lastToastText = await this.getToastText();
+        } catch {
+          // ignore
+        }
+      }
+
+      if (await this.elementExists(this.errorToast)) {
+        const errorText = await this.getToastText();
+        throw new Error(`Application submission failed (toast): ${errorText}`);
+      }
+
+      if (await this.elementExists(this.successToast)) {
+        const successText = await this.getToastText();
+        const lower = successText.toLowerCase();
+        if (lower.includes('submitted')) {
+          return;
+        }
+        // Success toasts sometimes contain only a short title, still accept it.
+        return;
+      }
+
+      await this.sleep(250);
+    }
+
+    throw new Error(
+      `Timed out waiting for application submission success toast. Last toast: "${lastToastText}"`
+    );
+  }
+
+  private async getToastText(): Promise<string> {
+    try {
+      const toast = await this.waitForVisible(this.anyToastAlert, 3000);
+      return await toast.getText();
+    } catch {
+      return '';
+    }
+  }
+}

apps/jobboard-frontend/tests/e2e/selenium/pages/JobApplicationPage.ts

@@ -0,0 +1,35 @@
+/**
+ * Job Detail Page Object
+ *
+ * Page object for a single job post detail page.
+ * Route: /jobs/:id
+ */
+
+import { WebDriver, By } from 'selenium-webdriver';
+import { BasePage } from './BasePage.ts';
+
+export class JobDetailPage extends BasePage {
+  private readonly breadcrumb = By.css('nav[aria-label="Breadcrumb"]');
+  private readonly jobTitle = By.xpath('//h1[contains(@class,"font-bold") and contains(@class,"text-foreground")]');
+
+  // "Apply now" is rendered as a Link inside a Button; easiest stable hook is the href.
+  private readonly applyLink = By.xpath('//a[contains(@href,"/jobs/") and contains(@href,"/apply")]');
+
+  constructor(driver: WebDriver) {
+    super(driver);
+  }
+
+  async waitForLoaded(timeout: number = 10000): Promise<void> {
+    await this.waitForVisible(this.breadcrumb, timeout);
+    await this.waitForVisible(this.jobTitle, timeout);
+  }
+
+  async getJobTitle(): Promise<string> {
+    return await this.getText(this.jobTitle, 10000);
+  }
+
+  async clickApplyNow(): Promise<void> {
+    await this.click(this.applyLink, 10000);
+  }
+}
+

apps/jobboard-frontend/tests/e2e/selenium/pages/JobDetailPage.ts

@@ -0,0 +1,68 @@
+/**
+ * Jobs Page Object
+ *
+ * Page object for browsing job listings.
+ * Route: /jobs/browse
+ */
+
+import { WebDriver, By, WebElement } from 'selenium-webdriver';
+import { BasePage } from './BasePage.ts';
+
+export class JobsPage extends BasePage {
+  private readonly searchInput = By.id('search-input');
+
+  // JobCard uses a clickable Card (div) without an anchor, so we target the card root.
+  // We intentionally use a structural XPath to avoid relying on translated text.
+  private readonly jobCards = By.xpath(
+    [
+      '//div[contains(@class,"space-y-4")]',
+      '//div[contains(@class,"cursor-pointer") and contains(@class,"bg-card")',
+      ' and .//div[contains(@class,"text-xl") and contains(@class,"font-semibold")]]',
+    ].join('')
+  );
+
+  constructor(driver: WebDriver) {
+    super(driver);
+  }
+
+  /**
+   * Navigate to jobs browse page
+   */
+  async navigate(): Promise<void> {
+    await this.goto('/jobs/browse');
+    await this.waitForPageLoad();
+    await this.waitForVisible(this.searchInput, 10000);
+  }
+
+  /**
+   * Return job cards currently visible on the page
+   */
+  async getJobCards(): Promise<WebElement[]> {
+    return await this.findElements(this.jobCards);
+  }
+
+  /**
+   * Get number of job cards
+   */
+  async getJobCardCount(): Promise<number> {
+    return await this.getElementCount(this.jobCards);
+  }
+
+  /**
+   * Click a job card at a given index (0-based)
+   */
+  async openJobAtIndex(index: number): Promise<void> {
+    const cards = await this.getJobCards();
+    if (cards.length === 0) {
+      throw new Error('No job cards found on /jobs/browse');
+    }
+    if (index < 0 || index >= cards.length) {
+      throw new Error(`Job card index out of bounds: ${index} (found ${cards.length} cards)`);
+    }
+
+    const card = cards[index];
+    await this.executeScript('arguments[0].scrollIntoView({block: "center"});', card);
+    await card.click();
+  }
+}
+

apps/jobboard-frontend/tests/e2e/selenium/pages/JobsPage.ts

@@ -0,0 +1,56 @@
+/**
+ * My Applications Page Object
+ *
+ * Page object for job seeker applications list.
+ * Route: /jobs/applications
+ */
+
+import { WebDriver, By } from 'selenium-webdriver';
+import { BasePage } from './BasePage.ts';
+
+export class MyApplicationsPage extends BasePage {
+  private readonly pageHeader = By.xpath('//h1[contains(@class,"text-3xl") and contains(@class,"font-bold")]');
+
+  constructor(driver: WebDriver) {
+    super(driver);
+  }
+
+  async navigate(): Promise<void> {
+    await this.goto('/jobs/applications');
+    await this.waitForPageLoad();
+    await this.waitForVisible(this.pageHeader, 10000);
+  }
+
+  async waitForApplicationWithTitle(title: string, timeout: number = 15000): Promise<void> {
+    const endTime = Date.now() + timeout;
+    const locator = By.xpath(
+      `//h3[contains(@class,"text-lg") and contains(., ${this.toXPathLiteral(title)})]`
+    );
+
+    while (Date.now() < endTime) {
+      if (await this.elementExists(locator)) {
+        return;
+      }
+      await this.refresh();
+      await this.waitForVisible(this.pageHeader, 10000);
+      await this.sleep(500);
+    }
+
+    throw new Error(`Could not find application with title "${title}" on /jobs/applications`);
+  }
+
+  private toXPathLiteral(value: string): string {
+    if (!value.includes("'")) {
+      return `'${value}'`;
+    }
+    if (!value.includes('"')) {
+      return `"${value}"`;
+    }
+    const parts = value.split("'");
+    const concatParts = parts
+      .map((part) => `'${part}'`)
+      .join(`, "'", `);
+    return `concat(${concatParts})`;
+  }
+}
+