Fix consistent image proptype

jiahaog · Feb 11, 2018 · dcbeb9c · dcbeb9c
1 parent 2d310ef
commit dcbeb9c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 10 deletions.
diff --git a/src/components/IndexPage.test.jsx b/src/components/IndexPage.test.jsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import IndexPage from './IndexPage';
 
+import { imagePropType } from '../../test/fixtures';
+
 test('rendering', () => {
-  const wrapper = shallow(<IndexPage posts={[]} coverImageSizes={{}} />);
+  const wrapper = shallow(
+    <IndexPage posts={[]} coverImageSizes={imagePropType} />,
+  );
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/src/components/__snapshots__/IndexPage.test.jsx.snap b/src/components/__snapshots__/IndexPage.test.jsx.snap
@@ -4,7 +4,11 @@ exports[`rendering 1`] = `
 <div>
   <Styled(Image)
     alt="Index page cover"
-    sizes={Object {}}
+    sizes={
+      Object {
+        "sizes": "something",
+      }
+    }
     width="70vw"
   />
   <CoverDivider />

diff --git a/src/components/__snapshots__/Post.test.jsx.snap b/src/components/__snapshots__/Post.test.jsx.snap
@@ -19,7 +19,11 @@ exports[`rendering 1`] = `
   </styled.p>
   <Styled(Image)
     alt="title"
-    sizes={Object {}}
+    sizes={
+      Object {
+        "sizes": "something",
+      }
+    }
   />
   <div
     dangerouslySetInnerHTML={

diff --git a/src/pages/__snapshots__/index.test.jsx.snap b/src/pages/__snapshots__/index.test.jsx.snap
@@ -27,7 +27,11 @@ exports[`rendering 1`] = `
     title=""
   />
   <IndexPage
-    coverImageSizes={Object {}}
+    coverImageSizes={
+      Object {
+        "sizes": "something",
+      }
+    }
     posts={Array []}
   />
 </div>

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -38,7 +38,9 @@ export default function SiteIndex({
 SiteIndex.propTypes = {
   data: PropTypes.shape({
     allMarkdownRemark: allMarkdownRemarkPropType,
-    indexCover: imagePropType,
+    indexCover: PropTypes.shape({
+      sizes: imagePropType,
+    }),
   }).isRequired,
 };
 

diff --git a/src/proptypes/index.js b/src/proptypes/index.js
@@ -27,16 +27,23 @@ export const site = ptShape({
   }).isRequired,
 });
 
-// eslint-disable-next-line react/forbid-prop-types
-export const image = ptObject;
+export const image = ptShape({
+  // eslint-disable-next-line react/forbid-prop-types
+  sizes: ptString.isRequired,
+  // TODO: more fields here
+});
 
 export const markdownRemark = ptShape({
   frontmatter: ptShape({
     excerpt: ptString,
     title: ptString.isRequired,
     date: ptString.isRequired,
     path: ptString.isRequired,
-    cover: image,
+    cover: ptShape({
+      childImageSharp: ptShape({
+        sizes: image.isRequired,
+      }).isRequired,
+    }),
   }).isRequired,
   excerpt: ptString.isRequired,
   timeToRead: ptNumber.isRequired,

diff --git a/test/fixtures/index.js b/test/fixtures/index.js
@@ -1,12 +1,18 @@
-export const imagePropType = {};
+export const imagePropType = {
+  sizes: 'something',
+};
 
 export const markdownRemarkPropType = {
   frontmatter: {
     excerpt: 'excerpt',
     title: 'title',
     date: 'date',
     path: 'path',
-    cover: imagePropType,
+    cover: {
+      childImageSharp: {
+        sizes: imagePropType,
+      },
+    },
   },
   excerpt: 'excerpt',
   timeToRead: 10,