E2e test: add/edit/delete team (#694)

cypress/integration/app/teamflow.spec.ts

@@ -0,0 +1,44 @@
+describe("Teams flow", () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.login();
+  });
+
+  it("Create, edit, and delete a team successfully", () => {
+    cy.visit("/settings/teams");
+
+    cy.findByRole("button", { name: /create team/i }).click();
+
+    cy.findByLabelText(/team name/i)
+      .click()
+      .type("Valor");
+
+    // ^$ forces exact match
+    cy.findByRole("button", { name: /^create$/i }).click();
+
+    cy.visit("/settings/teams");
+
+    cy.get(".Select-arrow").click();
+
+    // need force:true for dropdown
+    cy.findByText(/edit/i).click({ force: true });
+
+    cy.findByLabelText(/team name/i)
+      .click()
+      .type("{selectall}{backspace}Mystic");
+
+    cy.findByRole("button", { name: /save/i }).click();
+
+    cy.visit("/settings/teams");
+
+    cy.get(".Select-arrow").click();
+
+    cy.findByText(/delete/i).click({ force: true });
+
+    cy.findByRole("button", { name: /delete/i }).click();
+
+    cy.findByText(/successfully deleted/i).should("be.visible");
+
+    cy.findByText(/mystic/i).should("not.exist");
+  });
+});

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx

@@ -22,7 +22,7 @@ class InputFieldWithIcon extends InputField {
   };
 
   renderHeading = () => {
-    const { error, placeholder } = this.props;
+    const { error, placeholder, name } = this.props;
 
     const labelClasses = classnames(`${baseClass}__label`);
 
@@ -30,7 +30,11 @@ class InputFieldWithIcon extends InputField {
       return <div className={`${baseClass}__errors`}>{error}</div>;
     }
 
-    return <div className={labelClasses}>{placeholder}</div>;
+    return (
+      <label htmlFor={name} className={labelClasses}>
+        {placeholder}
+      </label>
+    );
   };
 
   renderHint = () => {
@@ -74,6 +78,7 @@ class InputFieldWithIcon extends InputField {
       <div className={baseClass}>
         {this.renderHeading()}
         <input
+          id={name}
           name={name}
           onChange={onInputChange}
           className={inputClasses}