From 662b7c3d6e05a1ff22c2b29a13e0f4895bb29e59 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 18 Sep 2017 19:26:48 -0700 Subject: [PATCH] Simplify Image snapshot testing --- .../__snapshots__/index-test.js.snap | 137 +----------------- src/components/Image/__tests__/index-test.js | 57 ++++---- 2 files changed, 37 insertions(+), 157 deletions(-) diff --git a/src/components/Image/__tests__/__snapshots__/index-test.js.snap b/src/components/Image/__tests__/__snapshots__/index-test.js.snap index 2e21fee1..a4cfd27d 100644 --- a/src/components/Image/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Image/__tests__/__snapshots__/index-test.js.snap @@ -1,138 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/Image passes other props through to underlying View 1`] = ` -
-`; +exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `"url(\\"https://google.com/favicon.ico\\")"`; -exports[`components/Image prop "accessibilityLabel" 1`] = ` -
- accessibilityLabel -
-`; +exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `"url(\\"https://google.com/favicon.ico\\")"`; -exports[`components/Image prop "accessible" 1`] = ` -
-`; +exports[`components/Image prop "resizeMode" value "contain" 1`] = `"contain"`; -exports[`components/Image prop "children" 1`] = ` -
-
-
-`; +exports[`components/Image prop "resizeMode" value "cover" 1`] = `"cover"`; -exports[`components/Image prop "defaultSource" does not override "height" and "width" styles 1`] = ` -
- -
-`; +exports[`components/Image prop "resizeMode" value "none" 1`] = `"auto"`; -exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = ` -
- -
-`; +exports[`components/Image prop "resizeMode" value "stretch" 1`] = `"100% 100%"`; -exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = ` -
- -
-`; +exports[`components/Image prop "resizeMode" value "undefined" 1`] = `"cover"`; -exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = ` -
- -
-`; - -exports[`components/Image prop "resizeMode" value "contain" 1`] = ` -
-`; - -exports[`components/Image prop "resizeMode" value "cover" 1`] = ` -
-`; - -exports[`components/Image prop "resizeMode" value "none" 1`] = ` -
-`; - -exports[`components/Image prop "resizeMode" value "stretch" 1`] = ` -
-`; - -exports[`components/Image prop "resizeMode" value "undefined" 1`] = ` -
-`; - -exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = ` -
-`; - -exports[`components/Image prop "testID" 1`] = ` -
-`; - -exports[`components/Image sets correct accessibility role" 1`] = ` -
-`; +exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = `"contain"`; diff --git a/src/components/Image/__tests__/index-test.js b/src/components/Image/__tests__/index-test.js index 12c0f1e0..ffa1118b 100644 --- a/src/components/Image/__tests__/index-test.js +++ b/src/components/Image/__tests__/index-test.js @@ -18,42 +18,39 @@ describe('components/Image', () => { window.Image = originalImage; }); - test('sets correct accessibility role"', () => { - const component = render(); - expect(component).toMatchSnapshot(); - }); - test('prop "accessibilityLabel"', () => { const defaultSource = { uri: 'https://google.com/favicon.ico' }; - const component = render( + const component = shallow( ); - expect(component).toMatchSnapshot(); + const img = component.find('img'); + expect(component.prop('accessibilityLabel')).toBe('accessibilityLabel'); + expect(img.prop('alt')).toBe('accessibilityLabel'); }); test('prop "accessible"', () => { - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('accessible')).toBe(false); }); test('prop "children"', () => { const children =
; - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.find('.unique').length).toBe(1); }); describe('prop "defaultSource"', () => { test('sets background image when value is an object', () => { const defaultSource = { uri: 'https://google.com/favicon.ico' }; - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('style').backgroundImage).toMatchSnapshot(); }); test('sets background image when value is a string', () => { // emulate require-ed asset const defaultSource = 'https://google.com/favicon.ico'; - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('style').backgroundImage).toMatchSnapshot(); }); test('sets "height" and "width" styles if missing', () => { @@ -62,8 +59,10 @@ describe('components/Image', () => { height: 10, width: 20 }; - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + const { height, width } = component.prop('style'); + expect(height).toBe(10); + expect(width).toBe(20); }); test('does not override "height" and "width" styles', () => { @@ -72,10 +71,12 @@ describe('components/Image', () => { height: 10, width: 20 }; - const component = render( + const component = shallow( ); - expect(component).toMatchSnapshot(); + const { height, width } = component.prop('style'); + expect(height).toBe(20); + expect(width).toBe(40); }); }); @@ -96,8 +97,8 @@ describe('components/Image', () => { undefined ].forEach(resizeMode => { test(`value "${resizeMode}"`, () => { - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('style').backgroundSize).toMatchSnapshot(); }); }); }); @@ -106,7 +107,7 @@ describe('components/Image', () => { test('is not set immediately if the image has not already been loaded', () => { const uri = 'https://google.com/favicon.ico'; const source = { uri }; - const component = render(); + const component = shallow(); expect(component.find('img')).toBeUndefined; }); @@ -149,8 +150,8 @@ describe('components/Image', () => { describe('prop "style"', () => { test('correctly supports "resizeMode" property', () => { - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('style').backgroundSize).toMatchSnapshot(); }); test('removes other unsupported View styles', () => { @@ -161,13 +162,13 @@ describe('components/Image', () => { }); test('prop "testID"', () => { - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('testID')).toBe('testID'); }); test('passes other props through to underlying View', () => { const fn = () => {}; - const component = render(); - expect(component).toMatchSnapshot(); + const component = shallow(); + expect(component.prop('onResponderGrant')).toBe(fn); }); });