```ts // YourPage.stories.ts import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { moduleMetadata } from '@storybook/angular'; import { rest } from 'msw'; import { DocumentScreen } from './YourPage.component'; import { DocumentList } from './DocumentList.component'; import { DocumentHeader } from './DocumentHeader.component'; import { PageLayout } from './PageLayout.component'; export default { component: DocumentScreen, decorators: [ moduleMetadata({ declarations: [DocumentList, DocumentHeader, PageLayout], imports: [CommonModule, HttpClientModule], }), ], }; //👇The mocked data that will be used in the story const TestData = { user: { userID: 1, name: 'Someone', }, document: { id: 1, userID: 1, title: 'Something', brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', status: 'approved', }, subdocuments: [ { id: 1, userID: 1, title: 'Something', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, { id: 2, userID: 1, title: 'Something else', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'awaiting review', }, { id: 3, userID: 2, title: 'Another document', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, { id: 4, userID: 2, title: 'Something', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, ], }; export const MockedSuccess = { parameters: { msw: [ rest.get('https://your-restful-endpoint', (_req, res, ctx) => { return res(ctx.json(TestData)); }), ], }, }; export const MockedError = { parameters: { msw: [ rest.get('https://your-restful-endpoint', (_req, res, ctx) => { return res(ctx.delay(800), ctx.status(403)); }), ], }, }; ```