Merge pull request #81 from turingschool/feat/add-on-click-to-update-…

…applied-on-date

Feat/add on click to update applied on date

README.md

@@ -535,6 +535,9 @@ Choose a company that exists under your profile.
 
 ![Edit Job Application Page](./src/assets/EditJobApp.png)
 
+- Edit an Application Date: Job application dates can also be edited directly on the job application page by clicking on the "Applied On" date to pull up an interactive calendar, and cliking on a new date. 
+![Edit Job Application Date Page](./src/assets/editJobAppDate.png)
+
 <!-- CONTRIBUTING -->
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -558,6 +561,10 @@ FORMAT: lastname, firstname
 - [Github](https://github.com/stefanjbloom)
 - [LinkedIn](https://www.linkedin.com/in/stefanjbloom/)
 
+**Cardona, Danielle**
+- [Github](https://github.com/dcardona23)
+- [LinkedIn](www.linkedin.com/in/danielle-cardona-se)
+
 **Chirchirillo, Joe**
 
 - [Github](https://github.com/jchirch)

cypress/e2e/jobsApplicationSpec.cy.js

@@ -197,26 +197,23 @@ describe("View specific job app page with all fields filled in", () => {
 
     cy.wait("@showSingleJobApp");
 
-    cy.get('h1.text-cyan-600').should("have.text", "Backend Developer");
-    cy.get('h2.text-cyan-600').first().should("have.text", "Creative Solutions Inc.");
+    cy.get('h1.text-cyan-600').should("have.text", "Backend Developer")
+      .next().should("have.text", "Creative Solutions Inc.");
   });
 
   it("navigates to the company details page", () => {
     cy.wait("@showSingleJobApp");
-    cy.get('h2.text-cyan-600').first().click()
+    cy.get('h2').contains("Creative Solutions Inc.").click()
     cy.wait("@getCompanyDetails")
 
     cy.location('pathname').should('match', /\/companies\/3\/contacts$/)
   })
 
   it("displays the correct company details", () => {
     cy.wait("@showSingleJobApp");
-    cy.get('h2.text-cyan-600').first().click()
+    cy.get('h2').contains("Creative Solutions Inc.").click()
     cy.wait("@getCompanyDetails")
     cy.get("h1").should("have.text", "Company Details");
-
-    cy.get("h2").contains("Company Name:")
-      .next().should("have.text", "Creative Solutions Inc.");
 
     cy.get("h2").contains("Website:")
       .next().should("have.text", "https://creativesolutions.com");
@@ -240,17 +237,13 @@ describe("View specific job app page with all fields filled in", () => {
 
     cy.wait("@showSingleJobApp");
 
-    cy.get("p.font-medium")
+    cy.get("p.font-bold")
       .should("contain.text", "Applied On")
-      .within(() => {
-        cy.get("span.font-semibold").should("have.text", "2024-08-20"); {/* REFACTOR AWAITING UPDATE JOB APP ROUTE */}
-      });
+    cy.get('[data-testid="application-date"]').should("have.text", "August 20, 2024"); {/* REFACTOR AWAITING UPDATE JOB APP ROUTE */}
 
     cy.get("p.mb-6")
       .should("contain.text", "Status:")
-      .within(() => {
-        cy.get("span").should("have.text", "Interviewing");{/* REFACTOR AWAITING UPDATE JOB APP ROUTE */}
-      });
+      cy.get('[data-testid="job-status"]').should("have.text", "Interviewing");{/* REFACTOR AWAITING UPDATE JOB APP ROUTE */}
   });
 
   it("displays notes and edit button", () => {
@@ -499,6 +492,28 @@ describe("Editability of specific job application fields", () => {
     cy.get("tbody > tr").contains("Creative").click();
   });
 
+  it("edits an application date", () => {
+    cy.intercept("PATCH", "http://localhost:3001/api/v1/users/1/job_applications/3", (req) => {
+      console.log(req.body)
+      req.on("response", (res) => {
+      });
+      req.reply({
+        statusCode: 200,
+        fixture: "mockJobAppDateUpdate",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }).as("updateJobAppDate");
+
+    cy.wait("@showSingleJobApp");
+    cy.get('[data-testid="application-date"]').click()
+    cy.get('[aria-label="Choose Thursday, August 1st, 2024"]').click()
+    cy.get('[data-testid="application-date"]').should('have.text', 'August 1, 2024')
+    cy.wait("@updateJobAppDate")
+    cy.get('[data-testid="application-date"]').should('have.text', 'August 1, 2024')
+  })
+
   it("Should display the edit model when edit button is clicked", () => {
     cy.get('[data-testid="edit-modal"]').should('not.exist');
     cy.get('[data-testid="edit-modal-title"]').should('not.exist');
@@ -537,7 +552,7 @@ describe("Editability of specific job application fields", () => {
           "Content-Type": "application/json",
         },
       });
-    }).as("showSingleJobAppEmptyFields");
+    }).as("updateJobApp");
 
     cy.get('[data-testid="edit-button"]').click()
 
@@ -548,6 +563,15 @@ describe("Editability of specific job application fields", () => {
     cy.get('[data-testid="edit-modal-form-notes"]').clear().type("Talked with recruiter, sounds like a great opportunity to learn new things");
     cy.get('[data-testid="edit-modal-form-submit-button"]').click();
 
+    cy.reload();
+    cy.get("#email").type("[email protected]");
+    cy.get("#password").type("jerseyMikesRox7");
+    cy.get('[data-testid="login-button"]').click();
+    cy.get('[data-testid="applications-iconD"]').click();
+    cy.get("tbody > tr").contains("Creative").click();
+
+    cy.wait("@updateJobApp");
+
     cy.get('[data-testid="job-Title"]').should('contain', 'Frontend Developer')
     cy.get('[data-testid="job-companyName"]').should('contain', 'Creative Solutions Inc.')
     cy.get('[data-testid="job-status"]').should("have.text", "Offer")
@@ -569,8 +593,20 @@ describe("Editability of specific job application fields", () => {
         },
       });
     }).as("showSingleJobAppEmptyFields");
+
     cy.get('[data-testid="edit-button"]').click()
     cy.get('[data-testid="edit-modal-form-submit-button"]').click();
+    cy.wait("@showSingleJobAppEmptyFields");
+
+    cy.reload()
+    cy.get("#email").type("[email protected]")
+    cy.get("#password").type("jerseyMikesRox7")
+    cy.get('[data-testid="login-button"]').click();
+    cy.get('[data-testid="applications-iconD"]').click();
+    cy.get("tbody > tr").contains("Creative").click();
+
+    cy.wait("@getJobApplications");
+    cy.wait("@showSingleJobApp")
 
     cy.get('[data-testid="job-Title"]').should('contain', 'Backend Developer')
     cy.get('[data-testid="job-companyName"]').should('contain', 'Creative Solutions Inc.')

cypress/fixtures/mockJobAppDateUpdate.json

@@ -0,0 +1,26 @@
+{
+  "data": {
+    "id": "3",
+    "type": "job_application",
+    "attributes": {
+      "position_title": "Backend Developer",
+      "date_applied": "2024-08-01",
+      "status": 2,
+      "notes": "Had a technical interview, awaiting decision.",
+      "job_description": "Developing RESTful APIs and optimizing server performance.",
+      "application_url": "https://creativesolutions.com/careers/backend-developer",
+      "company_id": 3,
+      "company_name": "Creative Solutions Inc.",
+      "contacts": [
+        {
+          "id": 3,
+          "first_name": "Michael",
+          "last_name": "Johnson",
+          "email": "[email protected]",
+          "phone_number": "123-555-9012",
+          "notes": "Hiring manager at Creative Solutions Inc."
+        }
+      ]
+    }
+  }
+}

package.json

@@ -12,8 +12,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^10.4.20",
+    "moment-timezone": "^0.5.47",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
+    "react-datepicker": "^8.0.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
     "react-scripts": "^5.0.1",