E2e test: invite/activate user (#699)

* Tests user invite, email link, and user activation
* Disables cypress fixtures folder

Reviews and suggestions by: Zach Wasserman <zach@fleetdm.com>

cypress.json

@@ -1,3 +1,4 @@
 {
-  "baseUrl": "https://localhost:8642"
+  "baseUrl": "https://localhost:8642",
+  "fixturesFolder": false
 }

cypress/integration/app/activateuser.spec.ts

@@ -0,0 +1,68 @@
+describe("User invite and activation", () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.login();
+    cy.setupSMTP();
+  });
+
+  it("Invites and activates a user", () => {
+    cy.visit("/settings/organization");
+
+    cy.findByRole("tab", { name: /^users$/i }).click();
+
+    cy.contains("button", /invite user/i).click();
+
+    cy.findByLabelText(/name/i).click().type("Ash Ketchum");
+
+    cy.findByLabelText(/email/i).click().type("ash@fleetdm.com");
+
+    cy.findByRole("button", { name: /invite/i }).click();
+
+    cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
+
+    cy.logout();
+
+    const inviteLink = {};
+
+    const regex = /\/login\/invites\/[a-zA-Z0-9=?%&@._-]*/gm;
+
+    cy.getEmails().then((response) => {
+      expect(response.body.items[0].To[0]).to.have.property("Domain");
+      expect(response.body.items[0].To[0].Mailbox).to.equal("ash");
+      expect(response.body.items[0].To[0].Domain).to.equal("fleetdm.com");
+      expect(response.body.items[0].From.Mailbox).to.equal("gabriel+dev");
+      expect(response.body.items[0].From.Domain).to.equal("fleetdm.com");
+      const match = response.body.items[0].Content.Body.match(regex);
+      inviteLink.url = match[0];
+    });
+
+    cy.visit(inviteLink);
+
+    cy.findByLabelText(/username/i)
+      .click()
+      .type("ash.ketchum");
+
+    // ^$ exact match
+    cy.findByLabelText(/^password$/i)
+      .click()
+      .type("#pikachu1");
+
+    cy.findByLabelText(/confirm password/i)
+      .click()
+      .type("#pikachu1");
+
+    cy.findByRole("button", { name: /submit/i }).click();
+
+    cy.login();
+
+    cy.visit("/settings/organization");
+
+    cy.findByRole("tab", { name: /^users$/i }).click();
+
+    cy.get("tbody>tr")
+      .contains("ash.ketchum")
+      .next()
+      .findByText(/active/i)
+      .should("exist");
+  });
+});

cypress/support/commands.ts

@@ -48,6 +48,29 @@ Cypress.Commands.add("logout", () => {
     auth: {
       bearer: window.localStorage.getItem("KOLIDE::auth_token"),
     },
+  }).then(() => {
+    window.localStorage.removeItem("KOLIDE::auth_token");
+  });
+});
+
+Cypress.Commands.add("setupSMTP", () => {
+  const body = {
+    smtp_settings: {
+      authentication_type: "authtype_none",
+      enable_smtp: true,
+      port: 1025,
+      sender_address: "gabriel+dev@fleetdm.com",
+      server: "localhost",
+    },
+  };
+
+  cy.request({
+    url: "/api/v1/fleet/config",
+    method: "PATCH",
+    body,
+    auth: {
+      bearer: window.localStorage.getItem("KOLIDE::auth_token"),
+    },
   });
 });
 

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}