✨ yarn rw g cell Comments

web/src/components/CommentsCell/CommentsCell.mock.ts

@@ -0,0 +1,4 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  comments: [{ id: 42 }, { id: 43 }, { id: 44 }],
+})

web/src/components/CommentsCell/CommentsCell.stories.tsx

@@ -0,0 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './CommentsCell'
+import { standard } from './CommentsCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
+
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
+
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
+
+export default { title: 'Cells/CommentsCell' }

web/src/components/CommentsCell/CommentsCell.test.tsx

@@ -0,0 +1,41 @@
+import { render } from '@redwoodjs/testing/web'
+import { Loading, Empty, Failure, Success } from './CommentsCell'
+import { standard } from './CommentsCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('CommentsCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success comments={standard().comments} />)
+    }).not.toThrow()
+  })
+})

web/src/components/CommentsCell/CommentsCell.tsx

@@ -0,0 +1,29 @@
+import type { CommentsQuery } from 'types/graphql'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+
+export const QUERY = gql`
+  query CommentsQuery {
+    comments {
+      id
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ comments }: CellSuccessProps<CommentsQuery>) => {
+  return (
+    <ul>
+      {comments.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}