add example stories and tests

web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts

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

web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx

-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
-import { standard } from './ExamplePostsCell.mock'
-
-const meta: Meta = {
-  title: 'Cells/ExamplePostsCell',
-}
-
-export default meta
-
-export const loading: StoryObj<typeof Loading> = {
-  render: () => {
-    return Loading ? <Loading /> : <></>
-  },
-}
-
-export const empty: StoryObj<typeof Empty> = {
-  render: () => {
-    return Empty ? <Empty /> : <></>
-  },
-}
-
-export const failure: StoryObj<typeof Failure> = {
-  render: (args) => {
-    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-  },
-}
-
-export const success: StoryObj<typeof Success> = {
-  render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>
-  },
-}

web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx

-import { render } from '@redwoodjs/testing/web'
-
-import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
-import { standard } from './ExamplePostsCell.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('ExamplePostsCell', () => {
-  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 examplePosts={standard().examplePosts} />)
-    }).not.toThrow()
-  })
-})

web/src/components/ExamplePostsCell/ExamplePostsCell.tsx

-import type { ExamplePostsQuery } from 'types/graphql'
-
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
-
-export const QUERY = gql`
-  query ExamplePostsQuery {
-    examplePosts {
-      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 = ({
-  examplePosts,
-}: CellSuccessProps<ExamplePostsQuery>) => {
-  return (
-    <ul>
-      {examplePosts.map((item) => {
-        return <li key={item.id}>{JSON.stringify(item)}</li>
-      })}
-    </ul>
-  )
-}

web/src/pages/HomePage/home-page.spec.tsx

+import * as RTL from '@redwoodjs/testing/web'
+
+import { HomePage } from './home-page'
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    RTL.render(<HomePage />)
+
+    RTL.screen.getByText(/welcome to my app/i)
+    RTL.screen.getByText(
+      /This is a simple example of how to add content to your app./i
+    )
+  })
+})

web/src/pages/HomePage/home-page.stories.tsx

+import type { Meta, StoryObj } from '@storybook/react'
+
+import { HomePage } from './home-page'
+
+const meta: Meta = {
+  component: HomePage,
+  title: 'Home',
+}
+
+export default meta
+
+export const Default: StoryObj<typeof HomePage> = {
+  render: () => <HomePage />,
+}