fix(cli): Allow common custom scaffold template files

.changesets/11755.md

@@ -0,0 +1,5 @@
+- fix(cli): Allow common custom scaffold template files (#11755) by @esteban-url
+
+Adds the ability to generate test, stories and mock files when custom scaffold templates are in use.
+
+Adds initial tests, stories and mocks to the generator they can generated by using the flags `--tests` and `--stories`

__fixtures__/test-project/web/src/components/Contact/Contact/Contact.mock.ts

@@ -0,0 +1,10 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contact: {
+    __typename: 'Contact',
+    id: 42,
+    name: 'String',
+    email: 'String',
+    message: 'String',
+  },
+})

__fixtures__/test-project/web/src/components/Contact/Contact/Contact.stories.tsx

@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Contact from './Contact'
+
+const meta: Meta<typeof Contact> = {
+  component: Contact,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Contact>
+
+export const Primary: Story = {}

__fixtures__/test-project/web/src/components/Contact/Contact/Contact.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Contact from './Contact'
+import { standard } from './Contact.mock'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Contact', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Contact contact={standard().contact} />)
+    }).not.toThrow()
+  })
+})

__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.mock.ts

@@ -0,0 +1,10 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contact: {
+    __typename: 'Contact',
+    id: 42,
+    name: 'String',
+    email: 'String',
+    message: 'String',
+  },
+})

__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Failure, Success } from './ContactCell'
+import { standard } from './ContactCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/ContactCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+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} /> : <></>
+  },
+}

__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Failure, Success } from './ContactCell'
+import { standard } from './ContactCell.mock'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ContactCell', () => {
+  it('renders loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+  it('renders failure successfully', () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Success contact={standard().contact} />)
+    }).not.toThrow()
+  })
+})

__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.mock.ts

@@ -0,0 +1,10 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contact: {
+    __typename: 'Contact',
+    id: 42,
+    name: 'String',
+    email: 'String',
+    message: 'String',
+  },
+})

__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.stories.tsx

@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ContactForm from './ContactForm'
+
+const meta: Meta<typeof ContactForm> = {
+  component: ContactForm,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactForm>
+
+export const Primary: Story = {}

__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ContactForm from './ContactForm'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ContactForm', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ContactForm />)
+    }).not.toThrow()
+  })
+})

__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.mock.ts

@@ -0,0 +1,19 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contacts: [
+    {
+      __typename: 'Contact',
+      id: 42,
+      name: 'String',
+      email: 'String',
+      message: 'String',
+    },
+    {
+      __typename: 'Contact',
+      id: 43,
+      name: 'String',
+      email: 'String',
+      message: 'String',
+    },
+  ],
+})

__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.stories.tsx

@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Contacts from './Contacts'
+
+const meta: Meta<typeof Contacts> = {
+  component: Contacts,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Contacts>
+
+export const Primary: Story = {}

__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Contacts from './Contacts'
+import { standard } from './Contacts.mock'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Contacts', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Contacts contacts={standard().contacts} />)
+    }).not.toThrow()
+  })
+})

__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.mock.ts

@@ -0,0 +1,19 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contacts: [
+    {
+      __typename: 'Contact',
+      id: 42,
+      name: 'String',
+      email: 'String',
+      message: 'String',
+    },
+    {
+      __typename: 'Contact',
+      id: 43,
+      name: 'String',
+      email: 'String',
+      message: 'String',
+    },
+  ],
+})

__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.stories.tsx

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

__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.test.tsx

@@ -0,0 +1,30 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Failure, Empty, Success } from './ContactsCell'
+import { standard } from './ContactsCell.mock'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ContactsCell', () => {
+  it('renders loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+  it('renders failure successfully', () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+  it('renders empty successfully', () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Success contacts={standard().contacts} />)
+    }).not.toThrow()
+  })
+})

__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.mock.ts

@@ -0,0 +1,10 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  contact: {
+    __typename: 'Contact',
+    id: 42,
+    name: 'String',
+    email: 'String',
+    message: 'String',
+  },
+})

__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Failure, Success } from './EditContactCell'
+import { standard } from './EditContactCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/EditContactCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+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} /> : <></>
+  },
+}

__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Failure, Success } from './EditContactCell'
+import { standard } from './EditContactCell.mock'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('EditContactCell', () => {
+  it('renders loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+  it('renders failure successfully', () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Success contacts={standard().contacts} />)
+    }).not.toThrow()
+  })
+})