Image: support ImageSource with headers #8
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,6 +21,11 @@ describe('components/Image', () => { | |
| beforeEach(() => { | ||
| ImageUriCache._entries = {}; | ||
| window.Image = jest.fn(() => ({})); | ||
| ImageLoader.load = jest | ||
| .fn() | ||
| .mockImplementation((source, onLoad, onError) => { | ||
| onLoad({ source }); | ||
| }); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
|
|
@@ -107,9 +112,6 @@ describe('components/Image', () => { | |
| describe('prop "onLoad"', () => { | ||
| test('is called after image is loaded from network', () => { | ||
| jest.useFakeTimers(); | ||
| const onLoadStartStub = jest.fn(); | ||
| const onLoadStub = jest.fn(); | ||
| const onLoadEndStub = jest.fn(); | ||
|
|
@@ -127,9 +129,6 @@ describe('components/Image', () => { | |
|
|
||
| test('is called after image is loaded from cache', () => { | ||
| jest.useFakeTimers(); | ||
| const onLoadStartStub = jest.fn(); | ||
| const onLoadStub = jest.fn(); | ||
| const onLoadEndStub = jest.fn(); | ||
|
|
@@ -174,6 +173,35 @@ describe('components/Image', () => { | |
| expect(onLoadEndStub.mock.calls.length).toBe(2); | ||
| }); | ||
|
|
||
| test('is called on update if "headers" are modified', () => { | ||
| const onLoadStub = jest.fn(); | ||
| const onLoadEndStub = jest.fn(); | ||
| const { rerender } = render( | ||
| <Image | ||
| onLoad={onLoadStub} | ||
| onLoadEnd={onLoadEndStub} | ||
| source={{ | ||
| uri: 'https://test.com/img.jpg', | ||
| headers: { 'x-custom-header': 'abc123' } | ||
| }} | ||
| /> | ||
| ); | ||
| act(() => { | ||
| rerender( | ||
| <Image | ||
| onLoad={onLoadStub} | ||
| onLoadEnd={onLoadEndStub} | ||
| 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); | ||
marcaaron marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }); | ||
|
|
||
| test('is not called on update if "uri" is the same', () => { | ||
| const onLoadStartStub = jest.fn(); | ||
| const onLoadStub = jest.fn(); | ||
|
|
@@ -225,6 +253,64 @@ describe('components/Image', () => { | |
| expect(onLoadStub.mock.calls.length).toBe(1); | ||
| expect(onLoadEndStub.mock.calls.length).toBe(1); | ||
| }); | ||
|
|
||
| // This test verifies that when source is declared in-line and the parent component | ||
| // re-renders we aren't restarting the load process because the source is structurally equal | ||
| test('is not called on update when "headers" and "uri" are not modified', () => { | ||
| const onLoadStub = jest.fn(); | ||
| const onLoadEndStub = jest.fn(); | ||
| const { rerender } = render( | ||
| <Image | ||
| onLoad={onLoadStub} | ||
| onLoadEnd={onLoadEndStub} | ||
| source={{ | ||
| uri: 'https://test.com/img.jpg', | ||
| width: 1, | ||
| height: 1, | ||
| headers: { 'x-custom-header': 'abc123' } | ||
| }} | ||
| /> | ||
| ); | ||
| act(() => { | ||
| rerender( | ||
| <Image | ||
| onLoad={onLoadStub} | ||
| onLoadEnd={onLoadEndStub} | ||
| 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); | ||
| }); | ||
|
|
||
| test('is not called for default source', () => { | ||
| jest.useFakeTimers(); | ||
| const onLoadStub = jest.fn(); | ||
| render( | ||
| <Image | ||
| defaultSource="https://test.com/img-2.jpg" | ||
| onLoad={onLoadStub} | ||
| source="https://test.com/img.jpg" | ||
| /> | ||
| ); | ||
| jest.runOnlyPendingTimers(); | ||
| expect(onLoadStub).toHaveBeenCalledTimes(1); | ||
| expect(onLoadStub).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| nativeEvent: { | ||
| source: { | ||
| uri: 'https://test.com/img.jpg' | ||
| } | ||
| } | ||
| }) | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('prop "resizeMode"', () => { | ||
|
|
@@ -245,7 +331,8 @@ describe('components/Image', () => { | |
| '', | ||
| {}, | ||
| { uri: '' }, | ||
| { uri: 'https://google.com' }, | ||
| { uri: 'https://google.com', headers: { 'x-custom-header': 'abc123' } } | ||
| ]; | ||
| sources.forEach((source) => { | ||
| expect(() => render(<Image source={source} />)).not.toThrow(); | ||
|
|
@@ -261,11 +348,6 @@ describe('components/Image', () => { | |
|
|
||
| test('is set immediately if the image was preloaded', () => { | ||
| const uri = 'https://yahoo.com/favicon.ico'; | ||
| return Image.prefetch(uri).then(() => { | ||
| const source = { uri }; | ||
| const { container } = render(<Image source={source} />, { | ||
|
|
@@ -308,19 +390,33 @@ describe('components/Image', () => { | |
| test('is correctly updated only when loaded if defaultSource provided', () => { | ||
| const defaultUri = 'https://testing.com/preview.jpg'; | ||
| const uri = 'https://testing.com/fullSize.jpg'; | ||
| const calls = []; | ||
|
|
||
| // Capture calls and resolve them after render | ||
| ImageLoader.load = jest.fn().mockImplementation((source, onLoad) => { | ||
| calls.push({ source, onLoad }); | ||
| }); | ||
|
|
||
| const { container } = render( | ||
| <Image defaultSource={{ uri: defaultUri }} source={{ uri }} /> | ||
| ); | ||
|
|
||
| // Both defaultSource and source are loaded at the same time | ||
| // Since `defaultSource` is meant to be displayed until `source` loads | ||
| // we resolve it first (otherwise it won't be displayed at all) | ||
| act(() => { | ||
| const call = calls.find(({ source }) => source.uri === defaultUri); | ||
|
There was a problem hiding this comment. Seems like the previous test had a snapshot before anything was resolved. Do we still need that? There was a problem hiding this comment.
The loading behavior changed and so the test changed Previously the default source was not loaded using the ImageLoader |
||
| call.onLoad({ source: call.source }); | ||
| }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
|
|
||
| // After a while the main source loads as well | ||
| act(() => { | ||
| const call = calls.find(({ source }) => source.uri === uri); | ||
| call.onLoad({ source: call.source }); | ||
| }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
|
|
@@ -346,6 +442,67 @@ 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) | ||
| ); | ||
| }); | ||
|
|
||
| // A common case is `source` declared as an inline object, which creates a | ||
| // new object (with the same content) each time parent component renders | ||
| test('it still loads the image if source object is changed', () => { | ||
| ImageLoader.load.mockImplementation(() => {}); | ||
|
|
||
| const releaseSpy = jest.spyOn(ImageLoader, 'abort'); | ||
|
|
||
| const uri = 'https://google.com/favicon.ico'; | ||
| const { rerender } = render(<Image source={{ uri }} />); | ||
| rerender(<Image source={{ uri }} />); | ||
|
|
||
| // when the underlying source didn't change we expect the initial request is not cancelled due to re-render | ||
| expect(releaseSpy).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test('falls back to default source when source or source.uri is removed', () => { | ||
| const source = { uri: 'https://google.com/favicon.ico' }; | ||
| const defaultSource = { uri: 'http://localhost/static/[email protected]' }; | ||
|
|
||
| const { container, rerender } = render( | ||
| <Image defaultSource={defaultSource} source={source} /> | ||
| ); | ||
|
|
||
| rerender(<Image defaultSource={defaultSource} source={{ uri: '' }} />); | ||
| expect(container.querySelector('img').src).toBe(defaultSource.uri); | ||
| }); | ||
|
|
||
| test('removes image if source or source.uri is removed and there is no default source', () => { | ||
| const source = { uri: 'https://google.com/favicon.ico' }; | ||
|
|
||
| const { container, rerender } = render(<Image source={source} />); | ||
|
|
||
| rerender(<Image source={{ uri: '' }} />); | ||
| expect(container.querySelector('img')).toBe(null); | ||
| }); | ||
| }); | ||
|
|
||
| describe('prop "style"', () => { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.