Resolving cypress tests (#2356)

mau11 · web-flow · commit 301289c92f01 · 2024-03-29T09:24:24.000-04:00
* Fix bug - trying to sort a read-only property of array

* Fix spacing

* Fix error where copied nested objects are immutable

* Define how fields should be merged (Apollo InMemoryCache error)

* Parse userId when fetching and updating account

* Linter fix

* Parse user id when getting todos data

* Clean up

* Add try/catch

* Parse buying phone number limit

* Target limit table cell more precisely for integration tests

* Clean up
diff --git a/__test__/cypress/integration/phone-inventory.test.js b/__test__/cypress/integration/phone-inventory.test.js
@@ -34,7 +34,9 @@ describe("Phone number management screen in the Admin interface", () => {
     // Waits until job run completes
     cy.waitUntil(
       () =>
-        cy.get(`tr:contains(${testAreaCode}) td:nth-child(4)`).contains("1"),
+        cy
+          .get(`tr:contains(${testAreaCode}) td:nth-child(4) div`)
+          .contains("1"),
       { timeout: 1000 }
     );
   });
diff --git a/src/components/AssignmentTexter/Controls.jsx b/src/components/AssignmentTexter/Controls.jsx
@@ -35,6 +35,7 @@ import {
 import { dataTest } from "../../lib/attributes";
 import ContactToolbar from "./ContactToolbar";
 import { getCookie, setCookie } from "../../lib/cookie";
+import { deepCopy } from "../utils";
 
 export class AssignmentTexterContactControls extends React.Component {
   constructor(props) {
@@ -124,7 +125,10 @@ export class AssignmentTexterContactControls extends React.Component {
     let currentInteractionStep = null;
 
     if (availableSteps.length > 0) {
-      currentInteractionStep = availableSteps[availableSteps.length - 1];
+      const currentInteractionStep = deepCopy(
+        availableSteps[availableSteps.length - 1]
+      );
+
       currentInteractionStep.question.filteredAnswerOptions =
         currentInteractionStep.question.answerOptions;
     }
@@ -508,8 +512,8 @@ export class AssignmentTexterContactControls extends React.Component {
 
     const otherResponsesLink =
       currentInteractionStep &&
-        currentInteractionStep.question.filteredAnswerOptions.length > 6 &&
-        filteredCannedResponses.length ? (
+      currentInteractionStep.question.filteredAnswerOptions.length > 6 &&
+      filteredCannedResponses.length ? (
         <div className={css(flexStyles.popoverLink)} key={"otherresponses"}>
           <a
             href="#otherresponses"
@@ -522,8 +526,8 @@ export class AssignmentTexterContactControls extends React.Component {
 
     const searchBar = currentInteractionStep &&
       currentInteractionStep.question.answerOptions.length +
-      campaign.cannedResponses.length >
-      5 && (
+        campaign.cannedResponses.length >
+        5 && (
         <SearchBar
           onRequestSearch={this.handleSearchChange}
           onChange={this.handleSearchChange}
@@ -661,12 +665,12 @@ export class AssignmentTexterContactControls extends React.Component {
                   margin: "9px",
                   color:
                     this.state.optOutMessageText ===
-                      this.props.campaign.organization.optOutMessage
+                    this.props.campaign.organization.optOutMessage
                       ? "white"
                       : "#494949",
                   backgroundColor:
                     this.state.optOutMessageText ===
-                      this.props.campaign.organization.optOutMessage
+                    this.props.campaign.organization.optOutMessage
                       ? "#727272"
                       : "white"
                 }}
@@ -879,9 +883,9 @@ export class AssignmentTexterContactControls extends React.Component {
       shortCannedResponses = shortCannedResponses.filter(script => {
         var textLength = global.HIDE_BRANCHED_SCRIPTS
           ? this.getShortButtonText(
-            script.title,
-            cannedResponseScript ? 40 : 13
-          ).length
+              script.title,
+              cannedResponseScript ? 40 : 13
+            ).length
           : script.title.length;
 
         if (joinedLength + 1 + textLength < 80) {
@@ -965,7 +969,7 @@ export class AssignmentTexterContactControls extends React.Component {
       <div className={css(flexStyles.subButtonsExitButtons)}>
         <Button
           onClick={
-            !disabled ? this.handleOpenAnswerResponsePopover : noAction => { }
+            !disabled ? this.handleOpenAnswerResponsePopover : noAction => {}
           }
           style={{
             backgroundColor: this.props.muiTheme.palette.background.default,
@@ -1197,40 +1201,40 @@ export class AssignmentTexterContactControls extends React.Component {
     const content = firstMessage
       ? this.renderFirstMessage(enabledSideboxes)
       : [
-        this.renderToolbar(enabledSideboxes),
-        <div
-          key="superSectionMessagePage"
-          className={css(flexStyles.superSectionMessagePage)}
-        >
-          {this.state.contactListOpen &&
-            this.renderAssignmentContactsList(
-              this.props.assignment.contacts,
-              this.props.contact,
-              this.props.updateCurrentContactById
-            )}
-          <div className={css(flexStyles.superSectionMessageListAndControls)}>
-            <ContactToolbar
-              campaignContact={this.props.contact}
-              campaign={this.props.campaign}
-              navigationToolbarChildren={this.props.navigationToolbarChildren}
-              toggleContactList={this.toggleContactList}
-            />
-            {this.renderMessageBox(
-              <MessageList
-                contact={this.props.contact}
-                currentUser={this.props.currentUser}
-                messages={this.props.contact.messages}
-                organizationId={this.props.organizationId}
-                review={this.props.review}
-                styles={messageListStyles}
-                hideMedia={this.state.hideMedia}
-              />,
-              enabledSideboxes
-            )}
-            {this.renderMessageControls(enabledSideboxes)}
+          this.renderToolbar(enabledSideboxes),
+          <div
+            key="superSectionMessagePage"
+            className={css(flexStyles.superSectionMessagePage)}
+          >
+            {this.state.contactListOpen &&
+              this.renderAssignmentContactsList(
+                this.props.assignment.contacts,
+                this.props.contact,
+                this.props.updateCurrentContactById
+              )}
+            <div className={css(flexStyles.superSectionMessageListAndControls)}>
+              <ContactToolbar
+                campaignContact={this.props.contact}
+                campaign={this.props.campaign}
+                navigationToolbarChildren={this.props.navigationToolbarChildren}
+                toggleContactList={this.toggleContactList}
+              />
+              {this.renderMessageBox(
+                <MessageList
+                  contact={this.props.contact}
+                  currentUser={this.props.currentUser}
+                  messages={this.props.contact.messages}
+                  organizationId={this.props.organizationId}
+                  review={this.props.review}
+                  styles={messageListStyles}
+                  hideMedia={this.state.hideMedia}
+                />,
+                enabledSideboxes
+              )}
+              {this.renderMessageControls(enabledSideboxes)}
+            </div>
           </div>
-        </div>
-      ];
+        ];
     return (
       <div
         className={css(flexStyles.topContainer)}
diff --git a/src/components/utils.jsx b/src/components/utils.jsx
@@ -27,3 +27,16 @@ export function getButtonProps(props) {
   ];
   return pick(props, validProps);
 }
+
+// Create a deep copy of an object so nested properties are also mutable
+export function deepCopy(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepCopy(item));
+  } else if (typeof obj === "object" && obj !== null) {
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => [key, deepCopy(value)])
+    );
+  } else {
+    return obj;
+  }
+}
diff --git a/src/containers/AdminIncomingMessageList.jsx b/src/containers/AdminIncomingMessageList.jsx
@@ -24,7 +24,6 @@ export class AdminIncomingMessageList extends Component {
   constructor(props) {
     super(props);
 
-    const query = props.location.query;
     const filters = getConversationFiltersFromQuery(
       props.location.query,
       props.organization.organization.tags
diff --git a/src/containers/AdminPhoneNumberInventory.js b/src/containers/AdminPhoneNumberInventory.js
@@ -492,7 +492,7 @@ const mutations = {
     variables: {
       organizationId: ownProps.params.organizationId,
       areaCode,
-      limit
+      limit: parseInt(limit)
     },
     refetchQueries: () => ["getOrganizationData"]
   }),
diff --git a/src/containers/PaginatedUsersRetriever.jsx b/src/containers/PaginatedUsersRetriever.jsx
@@ -91,16 +91,25 @@ export class PaginatedUsersRetriever extends Component {
     let offset = 0;
     let total = undefined;
     let users = [];
+    let results;
     do {
-      const results = await fetchPeople(
-        offset,
-        pageSize,
-        organizationId,
-        campaignsFilter,
-        sortBy || "FIRST_NAME",
-        roleFilter
-      );
-      const { pageInfo, users: newUsers } = results.data.people;
+      try {
+        results = await fetchPeople(
+          offset,
+          pageSize,
+          organizationId,
+          campaignsFilter,
+          sortBy || "FIRST_NAME",
+          roleFilter
+        );
+      } catch (error) {
+        console.error("Error fetching people:", error);
+      }
+
+      const { pageInfo, users: newUsers } = results?.data?.people || {
+        pageInfo: {},
+        users: []
+      };
       users = users.concat(newUsers);
       offset += pageSize;
       total = pageInfo.total;
diff --git a/src/containers/TexterTodoList.jsx b/src/containers/TexterTodoList.jsx
@@ -58,7 +58,8 @@ class TexterTodoList extends React.Component {
   }
 
   renderTodoList(assignments) {
-    return assignments
+    const sortedAssignments = [...assignments];
+    return sortedAssignments
       .sort((x, y) => {
         // Sort with feedback at the top, and then based on Text assignment size
         const xHasFeedback =
@@ -266,7 +267,7 @@ const queries = {
     query: dataQuery,
     options: ownProps => ({
       variables: {
-        userId: ownProps.params.userId || null,
+        userId: parseInt(ownProps.params.userId) || null,
         organizationId: ownProps.params.organizationId,
         todosOrg:
           ownProps.location.query["org"] == "all" ||
@@ -301,7 +302,7 @@ const queries = {
         );
       return {
         variables: {
-          userId: ownProps.params.userId || null,
+          userId: parseInt(ownProps.params.userId) || null,
           organizationId: ownProps.params.organizationId
         },
         fetchPolicy: "network-only",
diff --git a/src/containers/UserEdit.jsx b/src/containers/UserEdit.jsx
@@ -62,23 +62,29 @@ const styles = StyleSheet.create({
   }
 });
 
-const fetchUser = async (organizationId, userId) =>
-  apolloClient.query({
-    query: gql`
-      query getEditedUser($organizationId: String!, $userId: Int!) {
-        user(organizationId: $organizationId, userId: $userId) {
-          id
-          firstName
-          email
-          lastName
-          alias
-          cell
-          extra
+const fetchUser = async (organizationId, userId) => {
+  try {
+    const response = await apolloClient.query({
+      query: gql`
+        query getEditedUser($organizationId: String!, $userId: Int!) {
+          user(organizationId: $organizationId, userId: $userId) {
+            id
+            firstName
+            email
+            lastName
+            alias
+            cell
+            extra
+          }
         }
-      }
-    `,
-    variables: { organizationId, userId }
-  });
+      `,
+      variables: { organizationId, userId }
+    });
+    return response;
+  } catch (error) {
+    console.error("Error fetching user:", error);
+  }
+};
 
 const fetchOrg = async organizationId =>
   apolloClient.query({
@@ -130,7 +136,7 @@ export class UserEditBase extends React.Component {
     if (!this.props.authType && this.props.userId) {
       const response = await fetchUser(
         this.props.organizationId,
-        this.props.userId
+        parseInt(this.props.userId)
       );
       this.setState({
         editedUser: response.data
@@ -483,7 +489,7 @@ const mutations = {
   editUser: ownProps => userData => ({
     mutation: editUserMutation,
     variables: {
-      userId: ownProps.userId,
+      userId: parseInt(ownProps.userId),
       organizationId: ownProps.organizationId,
       userData
     }
@@ -507,9 +513,7 @@ const mutations = {
 };
 
 const UserEdit = withMuiTheme(
-  withRouter(
-    loadData({ queries, mutations})(UserEditBase)
-  )
+  withRouter(loadData({ queries, mutations })(UserEditBase))
 );
 
 export default UserEdit;
diff --git a/src/network/apollo-client-singleton.js b/src/network/apollo-client-singleton.js
@@ -60,11 +60,32 @@ const cache = new InMemoryCache({
     }
     return null;
   },
-  // FUTURE: Apollo Client 3.0 allows this much more easily:
   typePolicies: {
     ContactTag: {
       // key is just the tag id and the value is contact-specific
       keyFields: false
+    },
+    // Define custom merge functions for multiple fields
+    // https://go.apollo.dev/c/merging-non-normalized-objects
+    // https://www.apollographql.com/docs/react/caching/cache-field-behavior/#merging-arrays
+    Query: {
+      fields: {
+        organization: {
+          merge: true
+        }
+      }
+    },
+    Campaign: {
+      fields: {
+        ingestMethod: {
+          merge: true
+        },
+        pendingJobs: {
+          merge(existing = [], incoming) {
+            return incoming;
+          }
+        }
+      }
     }
   }
 });
