Merge pull request #3575 from IntersectMBO/feat/dRep-form-image-validation

feat: add image validation for dRep form

Author: kneerose

tests/govtool-frontend/playwright/lib/forms/dRepForm.ts

@@ -13,6 +13,7 @@ const formErrors = {
   ],
   linkDescription: "max-80-characters-error",
   email: "invalid-email-address-error",
+  image: "invalid-image-url-error",
   links: {
     url: "link-reference-description-1-error",
     description: "link-reference-description-1-error",
@@ -59,6 +60,9 @@ export default class DRepForm {
   readonly motivationsInput = this.form.getByTestId("motivations-input");
   readonly qualificationsInput = this.form.getByTestId("qualifications-input");
   readonly paymentAddressInput = this.form.getByTestId("payment-address-input");
+  readonly imageInput = this.form.locator(
+    "div:nth-child(4) > div:nth-child(2) > input"
+  ); // BUG missing test id
   readonly doNotListCheckBox = this.form.getByRole("checkbox");
 
   constructor(private readonly form: Page) {}
@@ -149,6 +153,7 @@ export default class DRepForm {
     await this.motivationsInput.fill(dRepInfo.motivations);
     await this.qualificationsInput.fill(dRepInfo.qualifications);
     await this.paymentAddressInput.fill(dRepInfo.paymentAddress);
+    await this.imageInput.fill(dRepInfo.image);
     await this.linkRefrenceFirstUrlInput.fill(
       dRepInfo.linksReferenceLinks[0].url
     );
@@ -175,6 +180,9 @@ export default class DRepForm {
     const motivationsInputText = await this.motivationsInput.textContent();
     const qualificationsInputText =
       await this.qualificationsInput.textContent();
+    const isImageErrorVisible = await this.form
+      .getByTestId(formErrors.image)
+      .isVisible();
     const isReferenceLinkErrorVisible = await this.form
       .getByTestId(formErrors.links.url)
       .isVisible();
@@ -202,6 +210,10 @@ export default class DRepForm {
         `${dRepInfo.qualifications} is not equal to ${qualificationsInputText}`,
     }).toEqual(dRepInfo.qualifications);
 
+    await expect(this.form.getByTestId(formErrors.image), {
+      message: isImageErrorVisible && `${dRepInfo.image} is an invalid image`,
+    }).toBeHidden();
+
     await expect(this.form.getByTestId(formErrors.links.url), {
       message:
         isReferenceLinkErrorVisible &&
@@ -246,6 +258,9 @@ export default class DRepForm {
     const motivationsInputText = await this.motivationsInput.textContent();
     const qualificationsInputText =
       await this.qualificationsInput.textContent();
+    const isImageErrorVisible = await this.form
+      .getByTestId(formErrors.image)
+      .isVisible();
     const isReferenceLinkErrorVisible = await this.form
       .getByTestId(formErrors.links.url)
       .isVisible();
@@ -284,6 +299,12 @@ export default class DRepForm {
         `${dRepInfo.qualifications} is equal to ${qualificationsInputText}`,
     }).not.toEqual(dRepInfo.qualifications);
 
+    await expect(this.form.getByTestId(formErrors.image), {
+      message: !isImageErrorVisible && `${dRepInfo.image} is a valid image`,
+    }).toBeVisible({
+      timeout: 60_000,
+    });
+
     await expect(this.form.getByTestId(formErrors.links.url), {
       message:
         !isReferenceLinkErrorVisible &&

tests/govtool-frontend/playwright/lib/helpers/dRep.ts

@@ -1,10 +1,14 @@
 import DRepDirectoryPage from "@pages/dRepDirectoryPage";
 import { expect, Page } from "@playwright/test";
-import { IDRep } from "@types";
+import { IDRep, IDRepInfo } from "@types";
 import { bech32 } from "bech32";
 import * as crypto from "crypto";
 import { functionWaitedAssert } from "./waitedLoop";
-import { invalid as mockInvalid, valid as mockValid } from "@mock/index";
+import {
+  invalid,
+  invalid as mockInvalid,
+  valid as mockValid,
+} from "@mock/index";
 import { faker } from "@faker-js/faker";
 import { ShelleyWallet } from "./crypto";
 import environments from "@constants/environments";
@@ -131,7 +135,7 @@ export function convertDRep(
   return { cip129: cip129DRep, cip105: cip105DRep };
 }
 
-export async function generateValidDRepInfo() {
+export async function generateValidDRepInfo(): Promise<IDRepInfo> {
   return {
     name: mockValid.name(),
     objectives: faker.lorem.paragraph(2),
@@ -140,6 +144,7 @@ export async function generateValidDRepInfo() {
     paymentAddress: (await ShelleyWallet.generate()).addressBech32(
       environments.networkId
     ),
+    image: faker.image.avatarGitHub(),
     linksReferenceLinks: [
       {
         url: faker.internet.url(),
@@ -155,13 +160,14 @@ export async function generateValidDRepInfo() {
   };
 }
 
-export function generateInvalidDRepInfo() {
+export function generateInvalidDRepInfo(): IDRepInfo {
   return {
     name: mockInvalid.name(),
     objectives: faker.lorem.paragraph(40),
     motivations: faker.lorem.paragraph(40),
     qualifications: faker.lorem.paragraph(40),
     paymentAddress: faker.string.alphanumeric(45),
+    image: invalid.url(),
     linksReferenceLinks: [
       {
         url: mockInvalid.url(),

tests/govtool-frontend/playwright/lib/types.ts

@@ -66,6 +66,7 @@ export type IDRepInfo = {
   objectives?: string;
   motivations?: string;
   qualifications?: string;
+  image?: string;
   paymentAddress?: string;
   identityReferenceLinks?: LinkType[];
   linksReferenceLinks?: LinkType[];