From e8e812aef468a187ac67b6d75098ec04a6f4f33f Mon Sep 17 00:00:00 2001
From: bruno <bruno@process.st>
Date: Tue, 12 Dec 2023 20:05:15 -0300
Subject: [PATCH] add example stories and tests
---
.../ExamplePostsCell/ExamplePostsCell.mock.ts | 4 --
.../ExamplePostsCell.stories.tsx | 34 ---------------
.../ExamplePostsCell.test.tsx | 42 -------------------
.../ExamplePostsCell/ExamplePostsCell.tsx | 31 --------------
web/src/pages/HomePage/home-page.spec.tsx | 14 +++++++
web/src/pages/HomePage/home-page.stories.tsx | 14 +++++++
6 files changed, 28 insertions(+), 111 deletions(-)
delete mode 100644 web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts
delete mode 100644 web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx
delete mode 100644 web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx
delete mode 100644 web/src/components/ExamplePostsCell/ExamplePostsCell.tsx
create mode 100644 web/src/pages/HomePage/home-page.spec.tsx
create mode 100644 web/src/pages/HomePage/home-page.stories.tsx
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts b/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts
deleted file mode 100644
index 67c1c7d..0000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
- examplePosts: [{ id: 42 }, { id: 43 }, { id: 44 }],
-})
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx
deleted file mode 100644
index 9e25b4e..0000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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} /> : <></>
- },
-}
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx
deleted file mode 100644
index 0e8a5b5..0000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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()
- })
-})
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx
deleted file mode 100644
index e7eac7d..0000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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>
- )
-}
diff --git a/web/src/pages/HomePage/home-page.spec.tsx b/web/src/pages/HomePage/home-page.spec.tsx
new file mode 100644
index 0000000..c1eaa3b
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.spec.tsx
@@ -0,0 +1,14 @@
+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
+ )
+ })
+})
diff --git a/web/src/pages/HomePage/home-page.stories.tsx b/web/src/pages/HomePage/home-page.stories.tsx
new file mode 100644
index 0000000..0836686
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.stories.tsx
@@ -0,0 +1,14 @@
+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 />,
+}
--
GitLab