Adds option to cell generation for lists of a given model (#2569)

* Adds list option to cell generation * Renders an unordered list * Fixes unordered list success rendering * Update snapshots/ schema issue. Destroy cell fails * Get to green on cell destroy * Refactored plural cell generator Co-authored-by: Daniel Choudhury <dac09@users.noreply.github.com> * Update packages/cli/src/commands/generate/helpers.js Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com> * Force pluralisation is now many{Something} Co-authored-by: Daniel Choudhury <dac09@users.noreply.github.com> Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com> Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
redwoodjs · May 21, 2021 · b5794b3 · b5794b3
1 parent 2312b5c
commit b5794b3
Show file tree

Hide file tree

Showing 9 changed files with 433 additions and 27 deletions.
diff --git a/packages/cli/src/commands/destroy/cell/__tests__/cell.test.js b/packages/cli/src/commands/destroy/cell/__tests__/cell.test.js
@@ -1,4 +1,5 @@
 global.__dirname = __dirname
+
 jest.mock('fs')
 jest.mock('src/lib', () => {
   return {
@@ -33,7 +34,11 @@ afterEach(() => {
 
 test('destroys cell files', async () => {
   const unlinkSpy = jest.spyOn(fs, 'unlinkSync')
-  const t = tasks({ componentName: 'cell', filesFn: files, name: 'User' })
+  const t = tasks({
+    componentName: 'cell',
+    filesFn: files,
+    name: 'User',
+  })
   t.setRenderer('silent')
 
   return t.run().then(() => {

diff --git a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
@@ -1,9 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"equipment" with list flag 1`] = `
+"export const QUERY = gql\`
+  query ManyEquipmentQuery {
+    manyEquipment {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ manyEquipment }) => {
+  return (
+    <ul>
+      {manyEquipment.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}
+"
+`;
+
+exports[`"equipment" withOUT list flag should find equipment by id 1`] = `
+"export const QUERY = gql\`
+  query FindEquipmentQuery($id: !) {
+    equipment: equipment(id: $id) {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ equipment }) => {
+  return <div>{JSON.stringify(equipment)}</div>
+}
+"
+`;
+
 exports[`creates a cell component with a camelCase word name 1`] = `
 "export const QUERY = gql\`
-  query UserProfileQuery {
-    userProfile {
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
       id
     }
   }
@@ -25,8 +77,8 @@ export const Success = ({ userProfile }) => {
 
 exports[`creates a cell component with a kebabCase word name 1`] = `
 "export const QUERY = gql\`
-  query UserProfileQuery {
-    userProfile {
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
       id
     }
   }
@@ -48,8 +100,8 @@ export const Success = ({ userProfile }) => {
 
 exports[`creates a cell component with a multi word name 1`] = `
 "export const QUERY = gql\`
-  query UserProfileQuery {
-    userProfile {
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
       id
     }
   }
@@ -71,8 +123,8 @@ export const Success = ({ userProfile }) => {
 
 exports[`creates a cell component with a single word name 1`] = `
 "export const QUERY = gql\`
-  query UserQuery {
-    user {
+  query FindUserQuery($id: Int!) {
+    user: user(id: $id) {
       id
     }
   }
@@ -94,8 +146,8 @@ export const Success = ({ user }) => {
 
 exports[`creates a cell component with a snakeCase word name 1`] = `
 "export const QUERY = gql\`
-  query UserProfileQuery {
-    userProfile {
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
       id
     }
   }
@@ -474,3 +526,61 @@ describe('UserProfileCell', () => {
 })
 "
 `;
+
+exports[`generates list cells if list flag passed in 1`] = `
+"export const QUERY = gql\`
+  query MembersQuery {
+    members {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ members }) => {
+  return (
+    <ul>
+      {members.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}
+"
+`;
+
+exports[`generates list cells if name is plural 1`] = `
+"export const QUERY = gql\`
+  query MembersQuery {
+    members {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ members }) => {
+  return (
+    <ul>
+      {members.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}
+"
+`;
diff --git a/packages/cli/src/commands/generate/cell/__tests__/cell.test.js b/packages/cli/src/commands/generate/cell/__tests__/cell.test.js
@@ -20,48 +20,87 @@ let singleWordFiles,
   camelCaseWordFiles,
   withoutTestFiles,
   withoutStoryFiles,
-  withoutTestAndStoryFiles
+  withoutTestAndStoryFiles,
+  listFlagPassedIn,
+  listInferredFromName,
+  modelPluralMatchesSingularWithList,
+  modelPluralMatchesSingularWithoutList
 
 beforeAll(async () => {
   singleWordFiles = await cell.files({
     name: 'User',
     tests: true,
     stories: true,
+    list: false,
   })
   multiWordFiles = await cell.files({
     name: 'UserProfile',
     tests: true,
     stories: true,
+    list: false,
   })
   snakeCaseWordFiles = await cell.files({
     name: 'user_profile',
     tests: true,
     stories: true,
+    list: false,
   })
   kebabCaseWordFiles = await cell.files({
     name: 'user-profile',
     tests: true,
     stories: true,
+    list: false,
   })
   camelCaseWordFiles = await cell.files({
     name: 'userProfile',
     tests: true,
     stories: true,
+    list: false,
   })
   withoutTestFiles = await cell.files({
     name: 'User',
     tests: false,
     stories: true,
+    list: false,
   })
   withoutStoryFiles = await cell.files({
     name: 'User',
     tests: true,
     stories: false,
+    list: false,
   })
   withoutTestAndStoryFiles = await cell.files({
     name: 'User',
     tests: false,
     stories: false,
+    list: false,
+  })
+
+  listFlagPassedIn = await cell.files({
+    name: 'Member',
+    tests: true,
+    stories: true,
+    list: true,
+  })
+
+  listInferredFromName = await cell.files({
+    name: 'Members',
+    tests: true,
+    stories: true,
+  })
+
+  modelPluralMatchesSingularWithList = await cell.files({
+    name: 'equipment',
+    tests: true,
+    stories: true,
+    list: true,
+  })
+
+  modelPluralMatchesSingularWithoutList = await cell.files({
+    name: 'equipment',
+    tests: true,
+    stories: true,
+    list: false,
   })
 })
 
@@ -301,3 +340,119 @@ test("doesn't include storybook and test files when --stories and --tests is set
     path.normalize('/path/to/project/web/src/components/UserCell/UserCell.js'),
   ])
 })
+
+test('generates list cells if list flag passed in', () => {
+  const CELL_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.js'
+  )
+
+  const TEST_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.test.js'
+  )
+
+  const STORY_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.stories.js'
+  )
+
+  const MOCK_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.mock.js'
+  )
+
+  // Check the file names
+  expect(Object.keys(listFlagPassedIn)).toEqual([
+    MOCK_PATH,
+    TEST_PATH,
+    STORY_PATH,
+    CELL_PATH,
+  ])
+
+  // Check the contents
+  expect(listFlagPassedIn[CELL_PATH]).toMatchSnapshot()
+})
+
+test('generates list cells if name is plural', () => {
+  const CELL_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.js'
+  )
+
+  const TEST_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.test.js'
+  )
+
+  const STORY_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.stories.js'
+  )
+
+  const MOCK_PATH = path.normalize(
+    '/path/to/project/web/src/components/MembersCell/MembersCell.mock.js'
+  )
+
+  // Check the file names
+  expect(Object.keys(listInferredFromName)).toEqual([
+    MOCK_PATH,
+    TEST_PATH,
+    STORY_PATH,
+    CELL_PATH,
+  ])
+
+  // Check the contents
+  expect(listInferredFromName[CELL_PATH]).toMatchSnapshot()
+})
+
+test('"equipment" with list flag', () => {
+  const CELL_PATH = path.normalize(
+    '/path/to/project/web/src/components/ManyEquipmentCell/ManyEquipmentCell.js'
+  )
+
+  const TEST_PATH = path.normalize(
+    '/path/to/project/web/src/components/ManyEquipmentCell/ManyEquipmentCell.test.js'
+  )
+
+  const STORY_PATH = path.normalize(
+    '/path/to/project/web/src/components/ManyEquipmentCell/ManyEquipmentCell.stories.js'
+  )
+
+  const MOCK_PATH = path.normalize(
+    '/path/to/project/web/src/components/ManyEquipmentCell/ManyEquipmentCell.mock.js'
+  )
+
+  // Check the file names
+  expect(Object.keys(modelPluralMatchesSingularWithList)).toEqual([
+    MOCK_PATH,
+    TEST_PATH,
+    STORY_PATH,
+    CELL_PATH,
+  ])
+
+  // Check the contents
+  expect(modelPluralMatchesSingularWithList[CELL_PATH]).toMatchSnapshot()
+})
+
+test('"equipment" withOUT list flag should find equipment by id', () => {
+  const CELL_PATH = path.normalize(
+    '/path/to/project/web/src/components/EquipmentCell/EquipmentCell.js'
+  )
+
+  const TEST_PATH = path.normalize(
+    '/path/to/project/web/src/components/EquipmentCell/EquipmentCell.test.js'
+  )
+
+  const STORY_PATH = path.normalize(
+    '/path/to/project/web/src/components/EquipmentCell/EquipmentCell.stories.js'
+  )
+
+  const MOCK_PATH = path.normalize(
+    '/path/to/project/web/src/components/EquipmentCell/EquipmentCell.mock.js'
+  )
+
+  // Check the file names
+  expect(Object.keys(modelPluralMatchesSingularWithoutList)).toEqual([
+    MOCK_PATH,
+    TEST_PATH,
+    STORY_PATH,
+    CELL_PATH,
+  ])
+
+  // Check the contents
+  expect(modelPluralMatchesSingularWithoutList[CELL_PATH]).toMatchSnapshot()
+})