Address MSW snippets feedback

storybookjs · Apr 19, 2024 · 8eaeb94 · 8eaeb94
1 parent 3f7e44c
commit 8eaeb94
Show file tree

Hide file tree

Showing 17 changed files with 37 additions and 71 deletions.
diff --git a/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx
@@ -1,20 +1,16 @@
 ```ts
 // YourPage.stories.ts
-
-import { moduleMetadata } from '@storybook/angular';
-
 import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
+import { graphql, HttpResponse, delay } from 'msw';
 
-import { graphql } from 'msw';
-
-import { DocumentScreen } from './YourPage.component';
-import { DocumentList } from './DocumentList.component';
 import { DocumentHeader } from './DocumentHeader.component';
+import { DocumentList } from './DocumentList.component';
 import { PageLayout } from './PageLayout.component';
-
+import { DocumentScreen } from './YourPage.component';
 import { MockGraphQLModule } from './mock-graphql.module';
 
 const meta: Meta<DocumentScreen> = {
@@ -79,7 +75,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/...gular/msw-addon-configure-handlers.ts.mdx → .../msw-addon-configure-handlers-http.ts.mdx b/...gular/msw-addon-configure-handlers.ts.mdx → .../msw-addon-configure-handlers-http.ts.mdx
@@ -1,9 +1,8 @@
 ```ts
 // YourPage.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage.component';
 

diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx
@@ -1,6 +1,5 @@
 ```js
 // YourPage.stories.js|jsx
-
 import { http, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';

diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx
@@ -1,10 +1,9 @@
 ```ts
 // YourPage.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
+// Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 import { MyComponent } from './MyComponent';
 

diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx
@@ -1,10 +1,9 @@
 ```ts
 // YourPage.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
+// Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 import { MyComponent } from './MyComponent';
 

diff --git a/docs/snippets/common/msw-addon-initialize.ts.mdx b/docs/snippets/common/msw-addon-initialize.ts.mdx
@@ -1,8 +1,8 @@
 ```ts
 // .storybook/preview.ts
 
-// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import { Preview } from '@storybook/your-framework';
+// Replace your-renderer with the renderer you are using (e.g., react, vue, etc.)
+import { Preview } from '@storybook/your-renderer';
 
 import { initialize, mswLoader } from 'msw-storybook-addon';
 

diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx
@@ -1,9 +1,7 @@
 ```js
 // YourPage.stories.js|jsx
-
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-
-import { graphql } from 'msw';
+import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
 
@@ -81,7 +79,7 @@ export const MockedError = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -1,11 +1,9 @@
 ```ts
 // YourPage.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-
-import { graphql } from 'msw';
+import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
 
@@ -85,7 +83,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx
@@ -1,10 +1,8 @@
 ```ts
 // YourPage.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-
 import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -85,7 +83,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx
@@ -1,16 +1,12 @@
 ```js
 // YourPage.stories.js
+import { graphql, HttpResponse, delay } from 'msw';
 
-import { graphql } from 'msw';
-
-import DocumentScreen from './YourPage.svelte';
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+import DocumentScreen from './YourPage.svelte';
 
 export default {
   component: DocumentScreen,
-  render: () => ({
-    Component: DocumentScreen,
-  }),
   decorators: [() => MockApolloWrapperClient],
 };
 
@@ -62,7 +58,7 @@ export const MockedError = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -1,18 +1,14 @@
 ```ts
 // YourPage.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import { graphql } from 'msw';
+import { graphql, HttpResponse, delay } from 'msw';
 
-import DocumentScreen from './YourPage.svelte';
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+import DocumentScreen from './YourPage.svelte';
 
 const meta = {
   component: DocumentScreen,
-  render: () => ({
-    Component: DocumentScreen,
-  }),
   decorators: [() => MockApolloWrapperClient],
 } satisfies Meta<typeof DocumentScreen>;
 
@@ -67,7 +63,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx
@@ -1,18 +1,14 @@
 ```ts
 // YourPage.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import { graphql } from 'msw';
+import { graphql, HttpResponse, delay } from 'msw';
 
-import DocumentScreen from './YourPage.svelte';
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+import DocumentScreen from './YourPage.svelte';
 
 const meta: Meta<typeof DocumentScreen> = {
   component: DocumentScreen,
-  render: () => ({
-    Component: DocumentScreen,
-  }),
   decorators: [() => MockApolloWrapperClient],
 };
 
@@ -67,7 +63,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx
@@ -1,11 +1,9 @@
 ```js
 // YourPage.stories.js
-
-import DocumentScreen from './YourPage.vue';
+import { graphql, HttpResponse, delay } from 'msw';
 
 import WrapperComponent from './ApolloWrapperClient.vue';
-
-import { graphql } from 'msw';
+import DocumentScreen from './YourPage.vue';
 
 export default {
   component: DocumentScreen,
@@ -63,7 +61,7 @@ export const MockedError = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -1,13 +1,11 @@
 ```ts
 // YourPage.stories.ts
-
-import { graphql } from 'msw';
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import DocumentScreen from './YourPage.vue';
+import { graphql, HttpResponse, delay } from 'msw';
 
 import WrapperComponent from './ApolloWrapperClient.vue';
+import DocumentScreen from './YourPage.vue';
 
 const meta = {
   component: DocumentScreen,
@@ -68,7 +66,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx
@@ -1,13 +1,11 @@
 ```ts
 // YourPage.stories.ts
-
-import { graphql } from 'msw';
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import DocumentScreen from './YourPage.vue';
+import { graphql, HttpResponse, delay } from 'msw';
 
 import WrapperComponent from './ApolloWrapperClient.vue';
+import DocumentScreen from './YourPage.vue';
 
 const meta: Meta<typeof DocumentScreen> = {
   component: DocumentScreen,
@@ -68,7 +66,7 @@ export const MockedError: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
-          delay(800);
+          await delay(800);
           return new HttpResponse.json({
             errors: [
               {

diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
@@ -1,7 +1,6 @@
 ```js
 // YourPage.stories.js
-
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 export default {
   component: 'demo-document-screen',

diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
@@ -1,9 +1,8 @@
 ```ts
 // YourPage.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 const meta: Meta = {
   component: 'demo-document-screen',