fix(request): properly sync UI headers and store (#8)

resources/js/components/domain/Client/Request/RequestHeader/RequestHeaders.vue

@@ -82,6 +82,8 @@ const initializeHeaders = () => {
  * Watchers.
  */
 
+watch(headers, () => syncHeadersWithPendingRequest(), { deep: true });
+
 watch(
     pendingRequestData,
     (newValue, oldValue) => {
@@ -94,8 +96,6 @@ watch(
         }
 
         initializeHeaders();
-
-        syncHeadersWithPendingRequest();
     },
     { deep: true },
 );

resources/js/tests/components/RequestHeaders.test.ts

@@ -73,4 +73,62 @@ describe('RequestHeaders.vue', () => {
             ]),
         );
     });
+
+    it('re-initializes and syncs headers when only endpoint changes', async () => {
+        mountWithPlugins(RequestHeaders);
+
+        // Seed initial state
+        mockRequestStore.pendingRequestData = ref({
+            method: 'GET',
+            endpoint: '/api/users',
+            headers: [],
+        });
+        await nextTick();
+
+        const callsBefore = mockRequestStore.updateRequestHeaders.mock.calls.length;
+
+        // Change endpoint only (method remains the same)
+        mockRequestStore.pendingRequestData = {
+            method: 'GET',
+            endpoint: '/api/accounts',
+            headers: [],
+        };
+        await nextTick();
+
+        expect(mockRequestStore.updateRequestHeaders.mock.calls.length).toBeGreaterThan(
+            callsBefore,
+        );
+
+        const args = mockRequestStore.updateRequestHeaders.mock.calls.at(-1)?.[0];
+        expect(Array.isArray(args)).toBe(true);
+        expect(args).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({ key: 'X-Global', value: 'foo' }),
+            ]),
+        );
+    });
+
+    it('does not re-initialize when endpoint and method are unchanged', async () => {
+        mountWithPlugins(RequestHeaders);
+
+        mockRequestStore.pendingRequestData = ref({
+            method: 'GET',
+            endpoint: '/api/users',
+            headers: [],
+        });
+        await nextTick();
+
+        const callsBefore = mockRequestStore.updateRequestHeaders.mock.calls.length;
+
+        // Re-emit the same values (new object but same endpoint and method)
+        mockRequestStore.pendingRequestData = {
+            method: 'GET',
+            endpoint: '/api/users',
+            headers: [],
+        };
+        await nextTick();
+
+        // No additional sync should have occurred
+        expect(mockRequestStore.updateRequestHeaders.mock.calls.length).toBe(callsBefore);
+    });
 });