systems tree Test using react flow

[joshdimanteto]

Description

Testing instructions

• Review code
• Check Actions build
• Review changes to test coverage
• {more steps here}

Agile board tracking

closes #1272

[codecov]

❌ 4 Tests Failed:

Tests completed	Failed	Passed	Skipped
867	4	863	1

View the top 3 failed test(s) by shortest run time

src/api/systems.test.tsx > System api functions > useGetSystemsTree > throws an error when total subsystems exceed the maxSubsystems limit

Stack Traces | 0.0638s run time

AssertionError: expected 'Total subsystems exceeded the maximum…' to deeply equal 'Total subsystems exceeded the maximum…'

Expected: "Total subsystems exceeded the maximum allowed limit of 0. Current count: 3"
Received: "Total subsystems exceeded the maximum allowed limit of 0. Current count: 5"

 ❯ src/api/systems.test.tsx:136:45

src/systems/systemsLayout.component.test.tsx > Systems Layout > navigates between tree view and normal view when toggle buttons are clicked

Stack Traces | 0.396s run time

AssertionError: expected "spy" to be called with arguments: [ Array(1) ]

Received: 

  1st spy call:

  [
-   "....../systems/65328f34a40ff5301575a4e3/tree",
+   "/systems/65328f34a40ff5301575a4e3",
  ]

  2nd spy call:

  [
-   "....../systems/65328f34a40ff5301575a4e3/tree",
+   "/systems/65328f34a40ff5301575a4e3",
  ]


Number of calls: 2

 ❯ src/systems/systemsLayout.component.test.tsx:126:31

src/common/images/imageGallery.component.test.tsx > Image Gallery > displays no images message and can open and close upload dialog when dense

Stack Traces | 0.723s run time

Error: Snapshot `Image Gallery > displays no images message and can open and close upload dialog when dense 1` mismatched

- Expected
+ Received

@@ -108,11 +108,11 @@
                          </svg>
                          <input
                            aria-invalid="false"
                            autocomplete="off"
                            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12tjcea-MuiInputBase-input-MuiOutlinedInput-input"
-                           id=":r1dl:"
+                           id=":r1eg:"
                            placeholder="Search"
                            type="text"
                            value=""
                          />
                          <div
@@ -678,11 +678,11 @@
                  <div
                    class="MuiBox-root css-exd1zr"
                  >
                    <label
                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-10j3yc8-MuiFormLabel-root-MuiInputLabel-root"
-                     for="mrt-rows-per-page-:r1di:"
+                     for="mrt-rows-per-page-:r1ed:"
                    >
                      Images per page
                    </label>
                    <div
                      class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root css-1y2ya84-MuiInputBase-root-MuiInput-root-MuiSelect-root"
@@ -699,11 +699,11 @@
                      </div>
                      <input
                        aria-hidden="true"
                        aria-invalid="false"
                        class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
-                       id="mrt-rows-per-page-:r1di:"
+                       id="mrt-rows-per-page-:r1ed:"
                        tabindex="-1"
                        value="18"
                      />
                      <svg
                        aria-hidden="true"

 ❯ .../common/images/imageGallery.component.test.tsx:674:25

View the full list of 1 ❄️ flaky test(s)

src/items/itemDialog.component.test.tsx > ItemDialog > Edit Item > displays warning when in admin mode for edit

Flake rate in main: 12.20% (Passed 36 times, Failed 5 times)

Stack Traces | 1.57s run time

Error: Snapshot `ItemDialog > Edit Item > displays warning when in admin mode for edit 1` mismatched

- Expected
+ Received

@@ -22,19 +22,19 @@
        role="presentation"
        style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
        tabindex="-1"
      >
        <div
-         aria-labelledby=":r3df:"
+         aria-labelledby=":r3ej:"
          aria-modal="true"
          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiDialog-paperFullWidth css-ji9sn5-MuiPaper-root-MuiDialog-paper"
          role="dialog"
          style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
        >
          <h2
            class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-19csis5-MuiTypography-root-MuiDialogTitle-root"
-           id=":r3df:"
+           id=":r3ej:"
          >
            Edit Item as Admin
            <svg
              aria-hidden="true"
              aria-label="As an admin, you can bypass rules that restrict item placement for other users, and you can modify the item's usage status"
@@ -565,16 +565,16 @@
                                            </svg>
                                          </button>
                                        </span>
                                      </div>
                                      <input
-                                       aria-describedby=":r3dq:-helper-text"
+                                       aria-describedby=":r3eu:-helper-text"
                                        aria-invalid="false"
                                        aria-label="Filter by Name"
                                        autocomplete="off"
                                        class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-110vr2a-MuiInputBase-input-MuiInput-input"
-                                       id=":r3dq:"
+                                       id=":r3eu:"
                                        placeholder="Filter by Name"
                                        title="Filter by Name"
                                        type="text"
                                        value=""
                                      />
@@ -608,11 +608,11 @@
                                        </span>
                                      </div>
                                    </div>
                                    <p
                                      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-v98l45-MuiFormHelperText-root"
-                                     id=":r3dq:-helper-text"
+                                     id=":r3eu:-helper-text"
                                    >
                                      <label>
                                        Filter Mode: Fuzzy
                                      </label>
                                    </p>
@@ -753,17 +753,17 @@
                                            </svg>
                                          </button>
                                        </span>
                                      </div>
                                      <div
-                                       aria-describedby=":r3e3:-helper-text"
+                                       aria-describedby=":r3f7:-helper-text"
                                        aria-expanded="false"
                                        aria-haspopup="listbox"
                                        aria-label="Filter by Type"
-                                       aria-labelledby=":r3e3:"
+                                       aria-labelledby=":r3f7:"
                                        class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-10y8whu-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                                       id=":r3e3:"
+                                       id=":r3f7:"
                                        role="combobox"
                                        tabindex="0"
                                      >
                                        <div
                                          class="MuiBox-root css-1tzeee1"
@@ -821,11 +821,11 @@
                                        </span>
                                      </div>
                                    </div>
                                    <p
                                      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-v98l45-MuiFormHelperText-root"
-                                     id=":r3e3:-helper-text"
+                                     id=":r3f7:-helper-text"
                                    >
                                      <label>
                                        Filter Mode: Includes any
                                      </label>
                                    </p>
@@ -928,15 +928,15 @@
                                    >
                                      <div
                                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-6h9cc6-MuiInputBase-root-MuiInput-root"
                                      >
                                        <input
-                                         aria-describedby=":r3ec:-helper-text"
+                                         aria-describedby=":r3fg:-helper-text"
                                          aria-invalid="false"
                                          autocomplete="off"
                                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
-                                         id=":r3ec:"
+                                         id=":r3fg:"
                                          inputmode="text"
                                          placeholder="Min"
                                          type="text"
                                          value=""
                                        />
@@ -963,11 +963,11 @@
                                          </button>
                                        </div>
                                      </div>
                                      <p
                                        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-18y2hez-MuiFormHelperText-root"
-                                       id=":r3ec:-helper-text"
+                                       id=":r3fg:-helper-text"
                                      >
                                        <label>
                                          Filter Mode: Between Inclusive
                                        </label>
                                      </p>
@@ -980,11 +980,11 @@
                                      >
                                        <input
                                          aria-invalid="false"
                                          autocomplete="off"
                                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
-                                         id=":r3ef:"
+                                         id=":r3fj:"
                                          inputmode="text"
                                          placeholder="Max"
                                          type="text"
                                          value=""
                                        />
@@ -1052,11 +1052,11 @@
                          <div
                            class="MuiBox-root css-exd1zr"
                          >
                            <label
                              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-10j3yc8-MuiFormLabel-root-MuiInputLabel-root"
-                             for="mrt-rows-per-page-:r3dj:"
+                             for="mrt-rows-per-page-:r3en:"
                            >
                              Rows per page
                            </label>
                            <div
                              class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root css-1y2ya84-MuiInputBase-root-MuiInput-root-MuiSelect-root"
@@ -1073,11 +1073,11 @@
                              </div>
                              <input
                                aria-hidden="true"
                                aria-invalid="false"
                                class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
-                               id="mrt-rows-per-page-:r3dj:"
+                               id="mrt-rows-per-page-:r3en:"
                                tabindex="-1"
                                value="5"
                              />
                              <svg
                                aria-hidden="true"
@@ -1187,11 +1187,11 @@
    <div
      class="MuiPopper-root MuiTooltip-popper MuiTooltip-popperInteractive MuiTooltip-popperArrow css-jycagz-MuiPopper-root-MuiTooltip-popper"
      data-popper-escaped=""
      data-popper-placement="top"
      data-popper-reference-hidden=""
-     id=":r3dg:"
+     id=":r3ek:"
      role="tooltip"
      style="position: absolute; top: 0px; left: 0px; margin: 0px; bottom: 0px; transform: translate(0px, 0px);"
    >
      <div
        class="MuiTooltip-tooltip MuiTooltip-tooltipArrow MuiTooltip-tooltipPlacementTop css-1eex93v-MuiTooltip-tooltip"

 ❯ src/items/itemDialog.component.test.tsx:1268:27

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[joshdimanteto]

[joshdimanteto]

[joshdimanteto]

Move systemTreeFunciton out off systems.tsx. This can be optimized if reactquery and caching is used for catalogue items

[joshdimanteto]

Optimizations in getSystemTree function:

1. Catalogue Item Caching (Map):

   • A catalogueItemCache (Map) is used to store already fetched catalogue items.
   • This avoids repeated calls to getCatalogueItem(id) for the same catalogue_item_id.
   • Benefit: Reduces the number of network/database requests, improving performance and reducing latency, especially when multiple systems reference the same catalogue item.

2. Total Subsystems Count Tracking:

   • A shared totalSubsystems counter object is passed recursively.
   • If the total subsystems exceed maxSubsystems, an AxiosError is thrown to stop the recursion immediately.
   • Benefit: Prevents fetching unnecessary data when the limit is reached, saving both processing time and resources.

3. Cutoff Point Handling (subsystemsCutOffPoint):

   • If totalSubsystems.count exceeds the cutoff point (subsystemsCutOffPoint), the recursion stops and returns only the current level systems without their subsystems.
   • Benefit: Further limits the depth and breadth of the recursive operation, keeping the response size manageable.

4. Maximum Depth Limitation:

   • The recursion is controlled using the maxDepth parameter to prevent traversing unnecessarily deep levels.
   • Benefit: Allows the client to fetch only the required depth of data, reducing overhead.

Why These Optimizations Were Done:

• The system tree fetching process involves recursion and potentially large datasets.
• These optimizations ensure that the function remains efficient and scalable, especially in scenarios with many interconnected systems or catalogue items.
• They also help avoid overloading the backend or exceeding resource limits, while maintaining a good user experience by delivering data promptly.

[joshdimanteto]

[joshdimanteto]

[joshdimanteto]

[joshdimanteto]

[joshdimanteto]

add full screen mode