@vitality-ds/components 4.4.4 → 4.5.0

package/dist/esm/AuditTrail/components/AuditItem/index.spec.js

@@ -0,0 +1,404 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { render, screen } from "@testing-library/react";
+import { Add, Contact, GentuLogo, Link } from "@vitality-ds/icons";
+import React from "react";
+import { findSVGs } from "../../../helpers/test";
+import AuditItem from "./index";
+describe("<AuditItem />", function () {
+  beforeEach(function () {
+    jest.useFakeTimers("modern");
+    jest.setSystemTime(new Date("2024-03-22T17:30:00"));
+  });
+  describe("when action is a preset", function () {
+    describe("and name is given", function () {
+      describe("and does not contain the word gentu", function () {
+        describe("and name is more than 3 words", function () {
+          var item = {
+            action: "create",
+            name: "Dr. Jane Doe and Mr. John Smith",
+            dateTime: "2024-03-22T15:30:00"
+          };
+          it("renders the fallback icon", function () {
+            var _render = render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              })),
+              container = _render.container;
+            expect(findSVGs(container, Add)).toHaveLength(1);
+          });
+          it("renders the name and preposition", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+            expect(screen.getAllByText(/Dr. Jane Doe and Mr. John Smith/)).toHaveLength(1);
+          });
+        });
+        describe("and name is 3 words", function () {
+          describe("the first word is one of the approved list of prefixes", function () {
+            var item = {
+              action: "create",
+              name: "Dr. Jane Doe"
+            };
+            it("renders the correct initials", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+              expect(screen.getAllByText(/JD/)).toHaveLength(1);
+            });
+            it("renders the name and preposition", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+              expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+              expect(screen.getAllByText(/Dr. Jane Doe/)).toHaveLength(1);
+            });
+          });
+          describe("the first word is not an approved prefix", function () {
+            var item = {
+              action: "create",
+              name: "hello Jane Doe"
+            };
+            it("renders the fallback icon", function () {
+              var _render2 = render( /*#__PURE__*/React.createElement(AuditItem, {
+                  item: item
+                })),
+                container = _render2.container;
+              expect(findSVGs(container, Add)).toHaveLength(1);
+            });
+            it("renders the name and preposition", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+              expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+              expect(screen.getAllByText(/hello Jane Doe/)).toHaveLength(1);
+            });
+          });
+        });
+        describe("and name is 2 words", function () {
+          var item = {
+            action: "create",
+            name: "Jane Doe"
+          };
+          it("renders the correct initials", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/JD/)).toHaveLength(1);
+          });
+          it("renders the name and preposition", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+            expect(screen.getAllByText(/Jane Doe/)).toHaveLength(1);
+          });
+        });
+        describe("and name is 1 word", function () {
+          var item = {
+            action: "create",
+            name: "Jane"
+          };
+          it("renders the name and preposition", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+            expect(screen.getAllByText(/Jane/)).toHaveLength(1);
+          });
+          it("renders the initial of that one word", function () {
+            var _render3 = render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              })),
+              container = _render3.container;
+            expect(container.querySelector("span").textContent).toBe("J");
+          });
+        });
+        describe("and name is given", function () {
+          var item = {
+            action: "create",
+            name: "Jane"
+          };
+          describe("and source is given", function () {
+            it("renders the name", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+              expect(screen.getAllByText(/Jane/)).toHaveLength(1);
+            });
+            it("renders the source in brackets", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: _extends({}, item, {
+                  source: "ThirdPartyApp"
+                })
+              }));
+              expect(screen.getAllByText(/(using ThirdPartyApp)/)).toHaveLength(1);
+            });
+          });
+          describe("and source is not given", function () {
+            it("renders the name", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+              expect(screen.getAllByText(/Jane/)).toHaveLength(1);
+            });
+            it("does not render the source", function () {
+              render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              }));
+
+              // this regex should match the word `using`
+              expect(screen.queryAllByText(/\busing\b/i)).toHaveLength(0);
+            });
+          });
+        });
+      });
+      describe("and does contain the word gentu", function () {
+        var item = {
+          action: "create",
+          name: "Gentu (Automated)"
+        };
+        it("renders gentu brand icon", function () {
+          var _render4 = render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            })),
+            container = _render4.container;
+          expect(findSVGs(container, GentuLogo)).toHaveLength(1);
+        });
+        it("renders the name and preposition", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: item
+          }));
+          expect(screen.getAllByText(/Created by/)).toHaveLength(1);
+          expect(screen.getAllByText(/Gentu \(Automated\)/)).toHaveLength(1);
+        });
+      });
+    });
+    describe("and name is not given", function () {
+      var item = {
+        action: "create"
+      };
+      it("uses the actions fallback icon instead of initials", function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: item
+          })),
+          container = _render5.container;
+        expect(findSVGs(container, Add)).toHaveLength(1);
+      });
+      it("does not render the name or preposition", function () {
+        render( /*#__PURE__*/React.createElement(AuditItem, {
+          item: item
+        }));
+
+        // this regex should match any word that isn't Created
+        expect(screen.queryAllByText(/\b(?!Created)\w+\b/)).toHaveLength(0);
+      });
+      describe("and source is given", function () {
+        var itemWithSource = {
+          action: "create",
+          source: "ThirdPartyApp"
+        };
+        it("renders the source not in brackets", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: itemWithSource
+          }));
+          expect(screen.getAllByText(/using ThirdPartyApp/)).toHaveLength(1);
+          expect(screen.queryAllByText(/\(using ThirdPartyApp\)/)).toHaveLength(0);
+        });
+        it("does not render a preposition", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: itemWithSource
+          }));
+          expect(screen.queryAllByText(/by/)).toHaveLength(0);
+        });
+      });
+      describe("and source is not given", function () {
+        var itemWithNoSource = {
+          action: "create"
+        };
+        it("does not render the name or the source", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: itemWithNoSource
+          }));
+
+          // this regex should match any word that isn't Created
+          expect(screen.queryAllByText(/\b(?!Created)\w+\b/)).toHaveLength(0);
+        });
+      });
+    });
+    describe("and dateTime is given", function () {
+      describe("and dateTime is valid", function () {
+        describe("and dateTime is in ISO with a 'T'", function () {
+          var item = {
+            action: "create",
+            dateTime: "2024-03-22T15:30:00"
+          };
+          it("renders dateTime correctly", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/on 22\/03\/2024 at 3:30:00 PM \(2 hours ago\)/)).toHaveLength(1);
+          });
+        });
+        describe("and dateTime is in ISO with a space", function () {
+          var item = {
+            action: "create",
+            dateTime: "2024-03-22 15:30:00"
+          };
+          it("renders dateTime correctly", function () {
+            render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: item
+            }));
+            expect(screen.getAllByText(/on 22\/03\/2024 at 3:30:00 PM \(2 hours ago\)/)).toHaveLength(1);
+          });
+        });
+      });
+      describe("and dateTime is invalid because date is impossible", function () {
+        var item = {
+          action: "create",
+          dateTime: "2024-22-22 15:30:00"
+        };
+        it("does not render the date time or leading text", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: item
+          }));
+
+          // this regex should match any word that isn't Created
+          expect(screen.queryAllByText(/\b(?!Created)\w+\b/)).toHaveLength(0);
+        });
+      });
+    });
+    describe("and dateTime is invalid because not resembling a date", function () {
+      var item = {
+        action: "create",
+        dateTime: "string"
+      };
+      it("does not render the date time or leading text", function () {
+        render( /*#__PURE__*/React.createElement(AuditItem, {
+          item: item
+        }));
+
+        // this regex should match any word that isn't Created
+        expect(screen.queryAllByText(/\b(?!Created)\w+\b/)).toHaveLength(0);
+      });
+    });
+    describe("and dateTime is not given", function () {
+      var item = {
+        action: "create",
+        dateTime: "2024-22-22 15:30:00"
+      };
+      it("does not render the date time or leading text", function () {
+        render( /*#__PURE__*/React.createElement(AuditItem, {
+          item: item
+        }));
+
+        // this regex should match any word that isn't Created
+        expect(screen.queryAllByText(/\b(?!Created)\w+\b/)).toHaveLength(0);
+      });
+    });
+  });
+  describe("when action is custom", function () {
+    var defaultActionProps = {
+      actionName: "Actioned",
+      preposition: "from",
+      fallbackIcon: Contact,
+      forceIcon: false
+    };
+    var createItemProps = function createItemProps() {
+      var actionProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      return {
+        action: "custom",
+        actionProps: actionProps || defaultActionProps,
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00"
+      };
+    };
+    it("renders the given preposition with the name", function () {
+      render( /*#__PURE__*/React.createElement(AuditItem, {
+        item: createItemProps()
+      }));
+      expect(screen.getByText(/Joe Bloggs/)).toBeDefined();
+      expect(screen.getByText(/from/)).toBeDefined();
+    });
+    it("renders the given actionName", function () {
+      render( /*#__PURE__*/React.createElement(AuditItem, {
+        item: createItemProps()
+      }));
+      expect(screen.getByText(/Actioned/)).toBeDefined();
+    });
+    describe("and when forceIcon is true", function () {
+      describe("and when fallbackIcon is given", function () {
+        var forceIconActionProps = _extends({}, defaultActionProps, {
+          forceIcon: true,
+          fallbackIcon: Link
+        });
+        it("renders the fallbackIcon", function () {
+          var _render6 = render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: createItemProps(forceIconActionProps)
+            })),
+            container = _render6.container;
+          expect(findSVGs(container, Link)).toHaveLength(1);
+        });
+      });
+      describe("and fallbackIcon is not given", function () {
+        var forceIconActionProps = _extends({}, defaultActionProps, {
+          fallbackIcon: null,
+          forceIcon: true
+        });
+        it("renders the <Contact /> icon", function () {
+          var _render7 = render( /*#__PURE__*/React.createElement(AuditItem, {
+              item: createItemProps(forceIconActionProps)
+            })),
+            container = _render7.container;
+          expect(findSVGs(container, Contact)).toHaveLength(1);
+        });
+      });
+    });
+    describe("and forceIcon is false", function () {
+      var dontForceIconActionProps = _extends({}, defaultActionProps, {
+        forceIcon: false,
+        fallbackIcon: Link
+      });
+      describe("and initials can be generated", function () {
+        var item = _extends({}, createItemProps(dontForceIconActionProps), {
+          name: "Joe Bloggs"
+        });
+        it("renders the initials", function () {
+          render( /*#__PURE__*/React.createElement(AuditItem, {
+            item: item
+          }));
+          expect(screen.getAllByText(/JB/)).toHaveLength(1);
+        });
+      });
+      describe("and initials cannot be generated", function () {
+        describe("and fallbackIcon is given", function () {
+          var item = _extends({}, createItemProps(_extends({}, dontForceIconActionProps, {
+            fallbackIcon: Link
+          })), {
+            name: "Joe shmo the third"
+          });
+          it("renders the fallbackIcon", function () {
+            var _render8 = render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              })),
+              container = _render8.container;
+            expect(findSVGs(container, Link)).toHaveLength(1);
+          });
+        });
+        describe("and fallbackIcon is not given", function () {
+          var item = _extends({}, createItemProps(_extends({}, dontForceIconActionProps, {
+            fallbackIcon: null
+          })), {
+            name: "Joe shmo the third"
+          });
+          it("renders the <Contact /> icon", function () {
+            var _render9 = render( /*#__PURE__*/React.createElement(AuditItem, {
+                item: item
+              })),
+              container = _render9.container;
+            expect(findSVGs(container, Contact)).toHaveLength(1);
+          });
+        });
+      });
+    });
+  });
+});

package/dist/esm/AuditTrail/hooks/useAuditTrail.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Avatar } from "../../Avatar";
 import IconAvatar from "../components/IconAvatar";
 import { ACTIONS } from "../constants";
@@ -12,6 +12,16 @@ var useAuditTrail = function useAuditTrail(item) {
     fallbackIcon = _ref.fallbackIcon,
     forceIcon = _ref.forceIcon;
   var brandIcon = getBrand(item.name);
+  var auditHistory = useMemo(function () {
+    var result = actionName || "";
+    if (item.name) {
+      result += " ".concat(preposition, " ").concat(item.name);
+    }
+    if (item.source) {
+      result += item.name ? " (using ".concat(item.source, ")") : " using ".concat(item.source);
+    }
+    return result;
+  }, [item, preposition, actionName]);
   function AvatarComponent() {
     return !initials || forceIcon || brandIcon ? /*#__PURE__*/React.createElement(IconAvatar, {
       icon: brandIcon || fallbackIcon
@@ -20,6 +30,6 @@ var useAuditTrail = function useAuditTrail(item) {
       initials: initials
     });
   }
-  return [time, actionName, preposition, AvatarComponent];
+  return [time, auditHistory, AvatarComponent];
 };
 export default useAuditTrail;

package/dist/esm/AuditTrail/hooks/useAuditTrail.spec.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { renderHook } from "@testing-library/react-hooks";
+import useAuditTrail from "./useAuditTrail";
+describe("useAuditTrail", function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  describe("auditHistory", function () {
+    describe("when item contains a custom action", function () {
+      var customActionItem = {
+        action: "custom",
+        actionProps: {
+          actionName: "Assigned",
+          preposition: "to",
+          forceIcon: true
+        }
+      };
+      describe("and the item contains a name and source", function () {
+        it("should return the audit history with the name and source", function () {
+          var _renderHook = renderHook(function () {
+              return useAuditTrail(_extends({}, customActionItem, {
+                name: "Olga Campbell",
+                source: "ThirdPartyApp"
+              }));
+            }),
+            result = _renderHook.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Assigned to Olga Campbell (using ThirdPartyApp)");
+        });
+      });
+      describe("and the item contains a source but no name", function () {
+        describe("and it does not contain an actionName", function () {
+          it("should return the audit history with the source", function () {
+            var _renderHook2 = renderHook(function () {
+                return useAuditTrail(_extends({}, customActionItem, {
+                  actionProps: {},
+                  source: "ThirdPartyApp"
+                }));
+              }),
+              result = _renderHook2.result;
+            var auditHistory = result.current[1];
+            expect(auditHistory).toEqual(" using ThirdPartyApp");
+          });
+        });
+        describe("and it contains an actionName", function () {
+          it("should return the audit history with the source", function () {
+            var _renderHook3 = renderHook(function () {
+                return useAuditTrail(_extends({}, customActionItem, {
+                  source: "ThirdPartyApp"
+                }));
+              }),
+              result = _renderHook3.result;
+            var auditHistory = result.current[1];
+            expect(auditHistory).toEqual("Assigned using ThirdPartyApp");
+          });
+        });
+      });
+      describe("and the item contains a name but no source", function () {
+        it("should return the audit history with the name", function () {
+          var _renderHook4 = renderHook(function () {
+              return useAuditTrail(_extends({}, customActionItem, {
+                name: "Olga Campbell"
+              }));
+            }),
+            result = _renderHook4.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Assigned to Olga Campbell");
+        });
+      });
+      describe("and the item contains neither a name or a source or actionName", function () {
+        it("should return the audit history as a blank string", function () {
+          var _renderHook5 = renderHook(function () {
+              return useAuditTrail(_extends({}, customActionItem, {
+                actionProps: {}
+              }));
+            }),
+            result = _renderHook5.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("");
+        });
+      });
+    });
+    describe("when item is not a custom action", function () {
+      var item = {
+        action: "create",
+        name: "",
+        source: ""
+      };
+      describe("and the item contains a name and source", function () {
+        it("should return the audit history with the name and source", function () {
+          var _renderHook6 = renderHook(function () {
+              return useAuditTrail(_extends({}, item, {
+                name: "Olga Campbell",
+                source: "ThirdPartyApp"
+              }));
+            }),
+            result = _renderHook6.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Created by Olga Campbell (using ThirdPartyApp)");
+        });
+      });
+      describe("and the item contains a name but no source", function () {
+        it("should return the audit history with the name and no source", function () {
+          var _renderHook7 = renderHook(function () {
+              return useAuditTrail(_extends({}, item, {
+                name: "Olga Campbell"
+              }));
+            }),
+            result = _renderHook7.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Created by Olga Campbell");
+        });
+      });
+      describe("and the item contains no name but a source", function () {
+        it("should return the audit history with the source", function () {
+          var _renderHook8 = renderHook(function () {
+              return useAuditTrail(_extends({}, item, {
+                source: "ThirdPartyApp"
+              }));
+            }),
+            result = _renderHook8.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Created using ThirdPartyApp");
+        });
+      });
+      describe("and the item contains neither a name or a source", function () {
+        it("should return the audit history with no name or source", function () {
+          var _renderHook9 = renderHook(function () {
+              return useAuditTrail(item);
+            }),
+            result = _renderHook9.result;
+          var auditHistory = result.current[1];
+          expect(auditHistory).toEqual("Created");
+        });
+      });
+    });
+  });
+});

package/dist/esm/AuditTrail/index.spec.js

@@ -1,45 +1,67 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import AuditTrail from "./index";
 describe("AuditTrail", function () {
-  var defaultItem = {
-    action: "create",
-    name: "My Name",
-    dateTime: "2023-05-12T12:00:00Z"
-  };
-  it("should render Initial's when name is valid", function () {
-    var _render = render( /*#__PURE__*/React.createElement(AuditTrail, {
-        items: [defaultItem]
-      })),
-      getByText = _render.getByText;
-    expect(getByText("MN")).toBeDefined();
+  describe("when there is one item", function () {
+    var items = [{
+      action: "create",
+      name: "Joe Bloggs",
+      dateTime: "2024-03-22T15:30:00Z"
+    }];
+    it("renders one audit item", function () {
+      render( /*#__PURE__*/React.createElement(AuditTrail, {
+        items: items
+      }));
+      expect(screen.getAllByText(/Joe Bloggs/).length).toBe(1);
+    });
   });
-  it("should render icon when name is invalid", function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(AuditTrail, {
-        items: [_extends({}, defaultItem, {
-          name: "My Name Things"
-        })]
-      })),
-      container = _render2.container;
-    expect(container.querySelectorAll("svg")).toHaveLength(1);
+  describe("when there are multiple items", function () {
+    describe("two items", function () {
+      var items = [{
+        action: "create",
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00Z"
+      }, {
+        action: "edit",
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00Z"
+      }];
+      it("renders the correct number of audit items", function () {
+        render( /*#__PURE__*/React.createElement(AuditTrail, {
+          items: items
+        }));
+        expect(screen.getAllByText(/Joe Bloggs/).length).toBe(2);
+      });
+    });
+    describe("three items", function () {
+      var items = [{
+        action: "create",
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00Z"
+      }, {
+        action: "edit",
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00Z"
+      }, {
+        action: "void",
+        name: "Joe Bloggs",
+        dateTime: "2024-03-22T15:30:00Z"
+      }];
+      it("renders the correct number of audit items", function () {
+        render( /*#__PURE__*/React.createElement(AuditTrail, {
+          items: items
+        }));
+        expect(screen.getAllByText(/Joe Bloggs/).length).toBe(3);
+      });
+    });
   });
-  it("should render Initial's when name is invalid but forcedInitials is defined", function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(AuditTrail, {
-        items: [_extends({}, defaultItem, {
-          forcedInitials: "MN"
-        })]
-      })),
-      getByText = _render3.getByText;
-    expect(getByText("MN")).toBeDefined();
-  });
-  it("should render an icon when branch icon is triggered", function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(AuditTrail, {
-        items: [_extends({}, defaultItem, {
-          name: "Gentu"
-        })]
-      })),
-      container = _render4.container;
-    expect(container.querySelectorAll("svg")).toHaveLength(1);
+  describe("when there are no items", function () {
+    var items = [];
+    it("does not render any audit items", function () {
+      render( /*#__PURE__*/React.createElement(AuditTrail, {
+        items: items
+      }));
+      expect(screen.queryAllByText(/Joe Bloggs/).length).toBe(0);
+    });
   });
 });