fix(svg): migrate defaultProps to default parameters (#305)

Co-authored-by: Danilo Woznica <[email protected]>

src/web/Svg.tsx

@@ -4,23 +4,23 @@ import uid from '../shared/uid'
 import { IContentLoaderProps } from './'
 
 const SVG: React.FC<IContentLoaderProps> = ({
-  animate,
+  animate = true,
   animateBegin,
-  backgroundColor,
-  backgroundOpacity,
-  baseUrl,
+  backgroundColor = '#f5f6f7',
+  backgroundOpacity = 1,
+  baseUrl = '',
   children,
-  foregroundColor,
-  foregroundOpacity,
-  gradientRatio,
-  gradientDirection,
+  foregroundColor = '#eee',
+  foregroundOpacity = 1,
+  gradientRatio = 2,
+  gradientDirection = 'left-right',
   uniqueKey,
-  interval,
-  rtl,
-  speed,
-  style,
-  title,
-  beforeMask,
+  interval = 0.25,
+  rtl = false,
+  speed = 1.2,
+  style = {},
+  title = 'Loading...',
+  beforeMask = null,
   ...props
 }) => {
   const fixedId = uniqueKey || uid()
@@ -114,22 +114,4 @@ const SVG: React.FC<IContentLoaderProps> = ({
   )
 }
 
-SVG.defaultProps = {
-  animate: true,
-  backgroundColor: '#f5f6f7',
-  backgroundOpacity: 1,
-  baseUrl: '',
-  foregroundColor: '#eee',
-  foregroundOpacity: 1,
-  gradientRatio: 2,
-  gradientDirection: 'left-right',
-  id: null,
-  interval: 0.25,
-  rtl: false,
-  speed: 1.2,
-  style: {},
-  title: 'Loading...',
-  beforeMask: null,
-}
-
 export default SVG

src/web/__tests__/ContentLoader.test.tsx

@@ -58,22 +58,15 @@ describe('ContentLoader', () => {
       </ContentLoader>
     )
 
-    const { props: propsFromEmpty } = noPropsComponent.getRenderOutput()
     const { props: propsFromFullfield } = withPropsComponent.getRenderOutput()
 
     it("`speed` is a number and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.speed).toBe('number')
-      expect(propsFromEmpty.speed).toBe(1.2)
       // custom props
       expect(typeof propsFromFullfield.speed).toBe('number')
       expect(propsFromFullfield.speed).toBe(10)
     })
 
     it("`interval` is a number and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.interval).toBe('number')
-      expect(propsFromEmpty.interval).toBe(0.25)
       // custom props
       expect(typeof propsFromFullfield.interval).toBe('number')
       expect(propsFromFullfield.interval).toBe(0.5)
@@ -92,63 +85,42 @@ describe('ContentLoader', () => {
     })
 
     it("`gradientRatio` is a number and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.gradientRatio).toBe('number')
-      expect(propsFromEmpty.gradientRatio).toBe(2)
       // custom props
       expect(typeof propsFromFullfield.gradientRatio).toBe('number')
       expect(propsFromFullfield.gradientRatio).toBe(0.5)
     })
 
     it("`gradientDirection` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.gradientDirection).toBe('string')
-      expect(propsFromEmpty.gradientDirection).toBe('left-right')
       // custom props
       expect(typeof propsFromFullfield.gradientDirection).toBe('string')
       expect(propsFromFullfield.gradientDirection).toBe('top-bottom')
     })
 
     it("`animate` is a boolean and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.animate).toBe('boolean')
-      expect(propsFromEmpty.animate).toBe(true)
       // custom props
       expect(typeof propsFromFullfield.animate).toBe('boolean')
       expect(propsFromFullfield.animate).toBe(false)
     })
 
     it("`backgroundColor` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.backgroundColor).toBe('string')
-      expect(propsFromEmpty.backgroundColor).toBe('#f5f6f7')
       // custom props
       expect(typeof propsFromFullfield.backgroundColor).toBe('string')
       expect(propsFromFullfield.backgroundColor).toBe('#000')
     })
 
     it("`foregroundColor` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.foregroundColor).toBe('string')
-      expect(propsFromEmpty.foregroundColor).toBe('#eee')
       // custom props
       expect(typeof propsFromFullfield.foregroundColor).toBe('string')
       expect(propsFromFullfield.foregroundColor).toBe('#fff')
     })
 
     it("`backgroundOpacity` is a number and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.backgroundOpacity).toBe('number')
-      expect(propsFromEmpty.backgroundOpacity).toBe(1)
       // custom props
       expect(typeof propsFromFullfield.backgroundOpacity).toBe('number')
       expect(propsFromFullfield.backgroundOpacity).toBe(0.06)
     })
 
     it("`foregroundOpacity` is a number and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.foregroundOpacity).toBe('number')
-      expect(propsFromEmpty.foregroundOpacity).toBe(1)
       // custom props
       expect(typeof propsFromFullfield.foregroundOpacity).toBe('number')
       expect(propsFromFullfield.foregroundOpacity).toBe(0.12)
@@ -161,60 +133,41 @@ describe('ContentLoader', () => {
     })
 
     it("`style` is an object and it's used", () => {
-      // defaultProps
-      expect(propsFromEmpty.style).toMatchObject({})
       // custom props
       expect(propsFromFullfield.style).toMatchObject({ marginBottom: '10px' })
     })
 
     it("`rtl` is a boolean and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.rtl).toBe('boolean')
-      expect(propsFromEmpty.rtl).toBe(false)
       // custom props
       expect(typeof propsFromFullfield.rtl).toBe('boolean')
       expect(propsFromFullfield.rtl).toBe(true)
     })
 
     it("`title` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.title).toBe('string')
-      expect(propsFromEmpty.title).toBe('Loading...')
       // custom props
       expect(typeof propsFromFullfield.title).toBe('string')
       expect(propsFromFullfield.title).toBe('My custom loading title')
     })
 
     it("`baseUrl` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.baseUrl).toBe('string')
-      expect(propsFromEmpty.baseUrl).toBe('')
       // custom props
       expect(typeof propsFromFullfield.baseUrl).toBe('string')
       expect(propsFromFullfield.baseUrl).toBe('/mypage')
     })
 
     it("`uniqueKey` is a string and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.uniqueKey).toBe('undefined')
-      expect(propsFromEmpty.uniqueKey).toBe(undefined)
       // custom props
       expect(typeof propsFromFullfield.uniqueKey).toBe('string')
       expect(propsFromFullfield.uniqueKey).toBe('my-id')
     })
 
     it("`beforeMask` is a JSX Element and it's used", () => {
-      // defaultProps
-      expect(typeof propsFromEmpty.beforeMask).toBe('object')
-      expect(propsFromEmpty.beforeMask).toBe(null)
       // custom props
       expect(typeof propsFromFullfield.beforeMask).toBe('object')
       expect(propsFromFullfield.beforeMask).toEqual(<rect />)
     })
 
     it("`animateBegin` is a string and it's used", () => {
-      // defaultProps
-      expect(propsFromEmpty.animateBegin).toBe(undefined)
       // custom props
       expect(typeof propsFromFullfield.animateBegin).toBe('string')
       expect(propsFromFullfield.animateBegin).toEqual('5s')

src/web/__tests__/__snapshots__/snapshots.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
 <svg
   aria-labelledby="snapshots-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 476 124"
@@ -121,7 +120,6 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
 exports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `
 <svg
   aria-labelledby="snapshots-aria"
-  id={null}
   role="img"
   style={Object {}}
 >
@@ -205,7 +203,6 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `
 exports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `
 <svg
   aria-labelledby="snapshots-aria"
-  id={null}
   role="img"
   style={Object {}}
 >
@@ -283,7 +280,6 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `
 exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
 <svg
   aria-labelledby="snapshots-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 100 100"
@@ -402,7 +398,6 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
 <svg
   aria-labelledby="snapshots-aria"
   height={100}
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 100 100"
@@ -521,7 +516,6 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
 exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
 <svg
   aria-labelledby="snapshots-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox=""

src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`BulletListStyle renders correctly 1`] = `
 <svg
   aria-labelledby="BulletListStyle-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 245 125"

src/web/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`CodeStyle renders correctly 1`] = `
 <svg
   aria-labelledby="CodeStyle-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 340 84"

src/web/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`FacebookStyle renders correctly 1`] = `
 <svg
   aria-labelledby="FacebookStyle-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 476 124"

src/web/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`InstagramStyle renders correctly 1`] = `
 <svg
   aria-labelledby="InstagramStyle-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 400 460"

src/web/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`ListStyle renders correctly 1`] = `
 <svg
   aria-labelledby="ListStyle-aria"
-  id={null}
   role="img"
   style={Object {}}
   viewBox="0 0 400 110"