[test] Image - add tests covering added/changed functionality around source

Author: kidroca

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-58);"
+    style="filter: url(#tint-71);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-58"
+        id="tint-71"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-57);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-70);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-70"
       >
         <feflood
           flood-color="red"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -171,6 +171,38 @@ describe('components/Image', () => {
       expect(onLoadEndStub.mock.calls.length).toBe(2);
     });
 
+    test('is called on update if "headers" are different', () => {
+      const onLoadStartStub = jest.fn();
+      const onLoadStub = jest.fn();
+      const onLoadEndStub = jest.fn();
+      const { rerender } = render(
+        <Image
+          onLoad={onLoadStub}
+          onLoadEnd={onLoadEndStub}
+          onLoadStart={onLoadStartStub}
+          source={{
+            uri: 'https://test.com/img.jpg',
+            headers: { 'x-custom-header': 'abc123' }
+          }}
+        />
+      );
+      act(() => {
+        rerender(
+          <Image
+            onLoad={onLoadStub}
+            onLoadEnd={onLoadEndStub}
+            onLoadStart={onLoadStartStub}
+            source={{
+              uri: 'https://test.com/img.jpg',
+              headers: { 'x-custom-header': '123abc' }
+            }}
+          />
+        );
+      });
+      expect(onLoadStub.mock.calls.length).toBe(2);
+      expect(onLoadEndStub.mock.calls.length).toBe(2);
+    });
+
     test('is not called on update if "uri" is the same', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
@@ -222,6 +254,42 @@ describe('components/Image', () => {
       expect(onLoadStub.mock.calls.length).toBe(1);
       expect(onLoadEndStub.mock.calls.length).toBe(1);
     });
+
+    test('is not called on update if "headers" and "uri" the same', () => {
+      const onLoadStartStub = jest.fn();
+      const onLoadStub = jest.fn();
+      const onLoadEndStub = jest.fn();
+      const { rerender } = render(
+        <Image
+          onLoad={onLoadStub}
+          onLoadEnd={onLoadEndStub}
+          onLoadStart={onLoadStartStub}
+          source={{
+            uri: 'https://test.com/img.jpg',
+            width: 1,
+            height: 1,
+            headers: { 'x-custom-header': 'abc123' }
+          }}
+        />
+      );
+      act(() => {
+        rerender(
+          <Image
+            onLoad={onLoadStub}
+            onLoadEnd={onLoadEndStub}
+            onLoadStart={onLoadStartStub}
+            source={{
+              uri: 'https://test.com/img.jpg',
+              width: 1,
+              height: 1,
+              headers: { 'x-custom-header': 'abc123' }
+            }}
+          />
+        );
+      });
+      expect(onLoadStub.mock.calls.length).toBe(1);
+      expect(onLoadEndStub.mock.calls.length).toBe(1);
+    });
   });
 
   describe('prop "resizeMode"', () => {
@@ -242,7 +310,8 @@ describe('components/Image', () => {
         '',
         {},
         { uri: '' },
-        { uri: 'https://google.com' }
+        { uri: 'https://google.com' },
+        { uri: 'https://google.com', headers: { 'x-custom-header': 'abc123' } }
       ];
       sources.forEach((source) => {
         expect(() => render(<Image source={source} />)).not.toThrow();
@@ -338,6 +407,31 @@ describe('components/Image', () => {
         'http://localhost/static/[email protected]'
       );
     });
+
+    test('it correctly passes headers to ImageLoader', () => {
+      const uri = 'https://google.com/favicon.ico';
+      const headers = { 'x-custom-header': 'abc123' };
+      const source = { uri, headers };
+      render(<Image source={source} />);
+
+      expect(ImageLoader.load).toHaveBeenCalledWith(
+        expect.objectContaining({ headers }),
+        expect.any(Function),
+        expect.any(Function)
+      );
+    });
+
+    test('it correctly passes uri to ImageLoader', () => {
+      const uri = 'https://google.com/favicon.ico';
+      const source = { uri };
+      render(<Image source={source} />);
+
+      expect(ImageLoader.load).toHaveBeenCalledWith(
+        expect.objectContaining({ uri }),
+        expect.any(Function),
+        expect.any(Function)
+      );
+    });
   });
 
   describe('prop "style"', () => {