Added tests for input validation and edit button under dev flag.

__tests__/extension-requests/extension-requests.test.js

@@ -740,6 +740,97 @@ describe('Tests the Extension Requests Screen', () => {
     expect(taskStatusValueElement).toBeTruthy();
   });
 
+  it('shows error messages for empty title and reason inputs on update under dev feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const editButtonSelector = '[data-testid="edit-button"]';
+    const editButton = await page.$(editButtonSelector);
+    if (!editButton) {
+      return;
+    }
+    await page.click(editButtonSelector);
+    const updateButtonSelector = '[data-testid="update-button"]';
+    const titleInputSelector = '[data-testid="title-text-input"]';
+    const reasonInputSelector = '[data-testid="reason-input-text-area"]';
+    const titleErrorSelector = '[data-testid="title-input-error"]';
+    const reasonErrorSelector = '[data-testid="reason-input-error"]';
+
+    await page.evaluate((selector) => {
+      const element = document.querySelector(selector);
+      if (element) element.value = '';
+    }, titleInputSelector);
+
+    await page.evaluate((selector) => {
+      const element = document.querySelector(selector);
+      if (element) element.value = '';
+    }, reasonInputSelector);
+
+    await page.click(updateButtonSelector);
+
+    const isTitleErrorVisible = await page
+      .$eval(titleErrorSelector, (el) => el && !el.classList.contains('hidden'))
+      .catch(() => false);
+
+    const isReasonErrorVisible = await page
+      .$eval(
+        reasonErrorSelector,
+        (el) => el && !el.classList.contains('hidden'),
+      )
+      .catch(() => false);
+    expect(isTitleErrorVisible).toBe(true);
+    expect(isReasonErrorVisible).toBe(true);
+  });
+
+  it('shows error message if deadline is set to past date under dev feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const editButtonSelector = '[data-testid="edit-button"]';
+    const editButton = await page.$(editButtonSelector);
+    if (!editButton) {
+      return;
+    }
+
+    await page.click(editButtonSelector);
+
+    const extensionInputSelector = '[data-testid="extension-input"]';
+    const extensionErrorSelector = '[data-testid="extension-input-error"]';
+    await page.type(extensionInputSelector, '2020-01-01');
+    await page.click('[data-testid="update-button"]');
+    const isExtensionErrorVisible = await page.$eval(
+      extensionErrorSelector,
+      (el) => !el.classList.contains('hidden'),
+    );
+    expect(isExtensionErrorVisible).toBe(true);
+  });
+
+  it('hides edit button and displays update wrapper on successful update under dev feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const editButtonSelector = '[data-testid="edit-button"]';
+    const editButton = await page.$(editButtonSelector);
+    if (!editButton) {
+      return;
+    }
+
+    await page.click(editButtonSelector);
+
+    const updateButtonSelector = '[data-testid="update-button"]';
+    const updateWrapperSelector = '[data-testid="update-wrapper"]';
+
+    await page.type('[data-testid="title-text-input"]', 'Valid Title');
+    await page.type('[data-testid="reason-input-text-area"]', 'Valid Reason');
+    await page.type('[data-testid="extension-input"]', '2050-01-01');
+
+    await page.click(updateButtonSelector);
+
+    const isEditButtonHidden = await page.$eval(editButtonSelector, (el) =>
+      el.classList.contains('hidden'),
+    );
+    const isUpdateWrapperVisible = await page.$eval(
+      updateWrapperSelector,
+      (el) => !el.classList.contains('hidden'),
+    );
+    expect(isEditButtonHidden).toBe(true);
+    expect(isUpdateWrapperVisible).toBe(true);
+  });
+
   it('Checks whether the card is not removed from display when api call is unsuccessful', async () => {
     const extensionCards = await page.$$('.extension-card');
 

extension-requests/script.js

@@ -549,6 +549,7 @@ async function createExtensionCard(data, dev) {
       id: 'title',
       name: 'title',
       value: data.title,
+      'data-testid': 'title-text-input',
     },
   });
   const titleInputWrapper = createElement({
@@ -557,7 +558,10 @@ async function createExtensionCard(data, dev) {
   });
   const titleInputError = createElement({
     type: 'div',
-    attributes: { class: 'title-input-error hidden' },
+    attributes: {
+      class: 'title-input-error hidden',
+      'data-testid': 'title-input-error',
+    },
     innerText: 'Title is required',
   });
   if (dev) {
@@ -832,11 +836,15 @@ async function createExtensionCard(data, dev) {
       id: 'newEndsOn',
       oninput: 'this.blur()',
       value: dateString(secondsToMilliSeconds(data.newEndsOn)),
+      'data-testid': 'extension-input',
     },
   });
   const extensionInputError = createElement({
     type: 'div',
-    attributes: { class: 'extension-input-error hidden' },
+    attributes: {
+      class: 'extension-input-error hidden',
+      'data-testid': 'extension-input-error',
+    },
     innerText: "Past date can't be the new deadline",
   });
   newDeadlineContainer.appendChild(extensionInput);
@@ -943,7 +951,7 @@ async function createExtensionCard(data, dev) {
   } else {
     const editButton = createElement({
       type: 'button',
-      attributes: { class: 'edit-button' },
+      attributes: { class: 'edit-button', 'data-testid': 'edit-button' },
     });
     if (dev) {
       if (shouldDisplayEditButton(data.assigneeId)) {
@@ -959,12 +967,15 @@ async function createExtensionCard(data, dev) {
     editButton.appendChild(editIcon);
     const updateWrapper = createElement({
       type: 'div',
-      attributes: { class: 'update-wrapper hidden' },
+      attributes: {
+        class: 'update-wrapper hidden',
+        'data-testid': 'update-wrapper',
+      },
     });
     extensionCardButtons.appendChild(updateWrapper);
     const updateButton = createElement({
       type: 'button',
-      attributes: { class: 'update-button' },
+      attributes: { class: 'update-button', 'data-testid': 'update-button' },
       innerText: 'SAVE',
     });
 
@@ -1179,12 +1190,16 @@ async function createExtensionCard(data, dev) {
       class: 'input-text-area hidden',
       id: 'reason',
       name: 'reason',
+      'data-testid': 'reason-input-text-area',
     },
     innerText: data.reason,
   });
   const reasonInputError = createElement({
     type: 'span',
-    attributes: { class: 'reason-input-error red-text hidden' },
+    attributes: {
+      class: 'reason-input-error red-text hidden',
+      'data-testid': 'reason-input-error',
+    },
     innerText: 'Reason is required',
   });
   reasonContainer.appendChild(reasonInput);