feat(ui): streamline transaction formatting (#373)

Because we can pull up transaction details at any time, the
`Transaction` screen should be able to figure out what it needs to
display regardless of its parent.

* update `formatSubject` to work for all currently-supported messages
* change `registrar` to `domain`
* tests

Part of #347

***

* transaction component fetches its own subject details
* starting to work on payer
* registration no longer has to format subject
* fix up existing tests; add new ones for org reg
* transaction tests in add member & user reg flows
* fixes tests
* fetch avatar in script tag within transaction

cypress/integration/org_member_addition.spec.js

@@ -17,7 +17,7 @@ context("add member to org", () => {
   context("navigation", () => {
     it("can be closed by pressing cancel", () => {
       cy.pick("add-member-modal").contains("Register a member");
-      cy.pick("add-member-modal", "cancel-button").click();
+      cy.pick("cancel-button").click();
       cy.pick("org-screen").should("exist");
     });
 
@@ -29,45 +29,62 @@ context("add member to org", () => {
 
     it("can be traversed with navigation buttons", () => {
       // form -> tx confirmation
-      cy.pick("add-member-modal", "name-input").type("coolname");
-      cy.pick("add-member-modal", "submit-button").click();
-      cy.pick("add-member-modal", "summary").should("exist");
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
 
       // tx confirmation -> form
-      cy.pick("add-member-modal", "cancel-button").click();
-      cy.pick("add-member-modal", "name-input").should("exist");
+      cy.pick("cancel-button").click();
+      cy.pick("input").should("exist");
 
       // form -> tx confirmation -> submit
-      cy.pick("add-member-modal", "submit-button").click();
-      cy.pick("add-member-modal", "summary").should("exist");
-      cy.pick("add-member-modal", "submit-button").click();
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
+      cy.pick("submit-button").click();
       cy.pick("org-screen").should("exist");
     });
   });
 
   context("validations", () => {
     it("prevents the user from adding an invalid user", () => {
       // no empty input
-      cy.pick("add-member-modal", "name-input").type("aname");
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal").contains("Member name is required");
-      cy.pick("add-member-modal", "submit-button").should("be.disabled");
+      cy.pick("input").type("aname");
+      cy.pick("input").clear();
+      cy.pick("add-member-modal").contains("Member handle is required");
+      cy.pick("submit-button").should("be.disabled");
 
       // no non-existing users
-      cy.pick("add-member-modal", "name-input").type("aname");
+      cy.pick("input").type("aname");
       cy.pick("add-member-modal").contains("Cannot find this user");
-      cy.pick("add-member-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
     });
   });
 
-  context("aesthetics", () => {
-    it("shows avatar when handle exists and hides otherwise", () => {
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal", "name-input").type("sickhandle");
-      cy.pick("add-member-modal", "avatar").should("be.visible");
+  context("transaction", () => {
+    it("shows correct transaction details for confirmation", () => {
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
 
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal", "avatar").should("not.be.visible");
+      cy.pick("message").contains("Org member registration");
+      cy.pick("subject").contains("coolname");
+    });
+
+    // TODO(sos): add actual transaction details check once we can make this tx
+    it.skip("submits correct transaction details to proxy", () => {
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("submit-button").click();
+
+      cy.pick("transaction-center").click();
+
+      // pick most recent transaction
+      cy.pick("accordion", "cards", "card").last().click();
+      cy.pick("summary", "message").contains("Org member registration");
+      cy.pick("summary", "subject").contains("coolname");
+      cy.pick("summary", "subject-avatar", "emoji").should(
+        "have.class",
+        "circle"
+      );
     });
   });
 });

cypress/integration/org_registration.spec.js

@@ -1,9 +1,10 @@
 context("org registration", () => {
   beforeEach(() => {
-    cy.nukeRegistryState();
-    cy.nukeSessionState();
+    cy.nukeAllState();
+    cy.nukeCache();
     cy.createIdentity();
     cy.registerUser();
+    cy.createProjectWithFixture();
 
     cy.visit("public/index.html");
     cy.pick("sidebar", "add-org-button").click();
@@ -12,7 +13,7 @@ context("org registration", () => {
   context("navigation", () => {
     it("can be closed by pressing cancel", () => {
       cy.pick("org-reg-modal").contains("Register an org");
-      cy.pick("org-reg-modal", "cancel-button").click();
+      cy.pick("cancel-button").click();
       cy.pick("profile-screen").should("exist");
     });
 
@@ -24,86 +25,121 @@ context("org registration", () => {
 
     it("can be traversed with navigation buttons", () => {
       // form -> tx confirmation
-      cy.pick("org-reg-modal", "name-input").type("coolname");
-      cy.pick("org-reg-modal", "submit-button").click();
-      cy.pick("org-reg-modal", "summary").should("exist");
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
 
       // tx confirmation -> form
-      cy.pick("org-reg-modal", "cancel-button").click();
-      cy.pick("org-reg-modal", "name-input").should("exist");
+      cy.pick("cancel-button").click();
+      cy.pick("input").should("exist");
 
       // form -> tx confirmation -> submit
-      cy.pick("org-reg-modal", "submit-button").click();
-      cy.pick("org-reg-modal", "summary").should("exist");
-      cy.pick("org-reg-modal", "submit-button").click();
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
+      cy.pick("submit-button").click();
       cy.pick("profile-screen").should("exist");
     });
   });
 
   context("validations", () => {
-    it("prevents the user from registering an invalid org name", () => {
+    it("prevents the user from registering an invalid org id", () => {
       // no empty input
-      cy.pick("org-reg-modal", "name-input").type("a_name");
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal").contains("Org name is required");
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("input").type("a_name");
+      cy.pick("input").clear();
+      cy.pick("org-reg-modal").contains("Org id is required");
+      cy.pick("submit-button").should("be.disabled");
 
       // no spaces
-      cy.pick("org-reg-modal", "name-input").type("no spaces");
+      cy.pick("input").type("no spaces");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // no special characters
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("^^^inVaLiD***");
+      cy.pick("input").clear();
+      cy.pick("input").type("^^^inVaLiD***");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // no starting with an underscore or dash
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("_nVaLiD");
+      cy.pick("input").clear();
+      cy.pick("input").type("_nVaLiD");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("-alsoInVaLiD");
+      cy.pick("input").clear();
+      cy.pick("input").type("-alsoInVaLiD");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // must meet minimum length
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("x");
+      cy.pick("input").clear();
+      cy.pick("input").type("x");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
     });
 
-    it("prevents the user from registering an unavailable org name", () => {
+    it("prevents the user from registering an unavailable org id", () => {
       cy.registerOrg("coolname");
 
-      cy.pick("org-reg-modal", "name-input").type("coolname");
-      cy.pick("org-reg-modal").contains("Sorry, this name is already taken");
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("org-reg-modal", "input").type("coolname");
+      cy.pick("org-reg-modal").contains("Sorry, this id is already taken");
+      cy.pick("submit-button").should("be.disabled");
     });
   });
 
   context("aesthetics", () => {
     it("shows avatar when handle exists and hides otherwise", () => {
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("sick_org");
-      cy.pick("org-reg-modal", "avatar").should("be.visible");
+      cy.pick("input").clear();
+      cy.pick("input").type("sick_org");
+      cy.pick("avatar").should("be.visible");
 
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "avatar").should("not.be.visible");
+      cy.pick("input").clear();
+      cy.pick("avatar").should("not.be.visible");
+    });
+  });
+
+  context("transaction", () => {
+    // TODO(sos): add tests for tx costs/wallet when it makes sense to do so
+    it("shows correct transaction details for confirmation", () => {
+      cy.pick("input").type("mariposa");
+      cy.pick("submit-button").click();
+
+      cy.pick("message").contains("Org registration");
+      cy.pick("subject").contains("mariposa");
+      cy.pick("subject-avatar", "emoji").should("have.class", "square");
+    });
+
+    it("submits correct transaction details to proxy", () => {
+      cy.pick("input").type("mariposa");
+      cy.pick("submit-button").click();
+      cy.pick("submit-button").click();
+
+      cy.pick("transaction-center").click();
+
+      // pick most recent transaction
+      cy.pick("card").first().click();
+      cy.pick("summary", "message").contains("Org registration");
+      cy.pick("summary", "subject").contains("mariposa");
+      cy.pick("summary", "subject-avatar", "emoji").should(
+        "have.class",
+        "square"
+      );
+      cy.pick("subject", "emoji").find("img").should("have.attr", "alt", "🗳");
+      cy.pick("subject", "emoji").should(
+        "have.css",
+        "background-color",
+        "rgb(186, 38, 114)"
+      );
     });
   });
 });

cypress/integration/project_registration.spec.js

@@ -51,8 +51,8 @@ context("project registration", () => {
 
       // The project is pre-selected to what we chose on the previous screen
       cy.pick("project-dropdown").contains(project2.name).should("be.visible");
-      // Registrar is pre-selected to our own identity
-      cy.pick("registrar-dropdown").contains(user).should("be.visible");
+      // Domain is pre-selected to our own identity
+      cy.pick("domain-dropdown").contains(user).should("be.visible");
       // The project name is pre-filled in the to-be-registered handle field
       cy.pick("name-input").should("have.value", project2.name);
     });
@@ -68,8 +68,8 @@ context("project registration", () => {
 
       // The project is pre-selected to what we chose on the previous screen
       cy.pick("project-dropdown").contains(project2.name).should("be.visible");
-      // Registrar is pre-selected to our own identity
-      cy.pick("registrar-dropdown").contains(user).should("be.visible");
+      // Domain is pre-selected to our own identity
+      cy.pick("domain-dropdown").contains(user).should("be.visible");
       // The project name is pre-filled in the to-be-registered handle field
       cy.pick("name-input").should("have.value", project2.name);
     });
@@ -83,8 +83,8 @@ context("project registration", () => {
       cy.pick("project-dropdown")
         .contains("Select project to register")
         .should("be.visible");
-      // Registrar is pre-selected to the org we chose
-      cy.pick("registrar-dropdown").contains(org2).should("be.visible");
+      // Domain is pre-selected to the org we chose
+      cy.pick("domain-dropdown").contains(org2).should("be.visible");
       cy.pick("name-input").should("have.value", "");
     });
 
@@ -98,8 +98,8 @@ context("project registration", () => {
       cy.pick("project-dropdown")
         .contains("Select project to register")
         .should("be.visible");
-      // Registrar is pre-selected to the org we chose
-      cy.pick("registrar-dropdown").contains(org1).should("be.visible");
+      // Domain is pre-selected to the org we chose
+      cy.pick("domain-dropdown").contains(org1).should("be.visible");
       cy.pick("name-input").should("have.value", "");
     });
 
@@ -131,8 +131,9 @@ context("project registration", () => {
   });
 
   context("summary screen", () => {
+    // TODO(sos): test this when we can actually register projects under users
     context("when registering under a user", () => {
-      it("shows the selected subject and payer information", () => {
+      it.skip("shows the selected subject and payer information", () => {
         cy.pick(`project-list-entry-${project1.name}`, "context-menu").click();
         cy.pick(`project-list-entry-${project1.name}`).click();
 
@@ -159,17 +160,18 @@ context("project registration", () => {
         cy.pick("project-registration-screen").should("exist");
 
         cy.pick("project-dropdown").click().contains(project1.name).click();
-        // Registrar is pre-selected to the org we chose
-        cy.pick("registrar-dropdown").contains(org1).should("be.visible");
+        // Domain is pre-selected to the org we chose
+        cy.pick("domain-dropdown").contains(org1).should("be.visible");
         cy.pick("name-input").should("have.value", project1.name);
 
         cy.pick("submit-button").click();
 
         cy.get('[data-cy="subject-avatar"] img[alt="🥂"]').should("exist");
         cy.pick("subject-avatar").contains(`${org1} / ${project1.name}`);
 
-        cy.get('[data-cy="payer-avatar"] img[alt="🥂"]').should("exist");
-        cy.pick("payer-avatar").contains(org1);
+        // TODO(sos): test this when we can actually change transaction payer
+        // cy.get('[data-cy="payer-avatar"] img[alt="🥂"]').should("exist");
+        // cy.pick("payer-avatar").contains(org1);
       });
     });
   });