fix: SB-640, SB-661 Fix and refactor storybooks

Approved-by: Patryk Ziemkowski

services/webapp/src/app/providers/responsiveThemeProvider/__tests__/responsiveThemeProvider.component.spec.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from 'styled-components';
 import { screen, getNodeText } from '@testing-library/react';
 import { ResponsiveThemeProvider, ResponsiveThemeProviderProps } from '../responsiveThemeProvider.component';
-import { makePropsRenderer } from '../../../../shared/utils/testUtils';
+import { render } from '../../../../tests/utils/rendering';
 import { Breakpoint, getActiveBreakpoint } from '../../../../theme/media';
 
 jest.mock('../../../../theme/media');
@@ -20,14 +20,12 @@ describe('ResponsiveThemeProvider: Component', () => {
     (getActiveBreakpoint as jest.Mock).mockReturnValue(Breakpoint.DESKTOP);
   });
 
-  const component = (props: Partial<ResponsiveThemeProviderProps>) => (
+  const Component = (props: Partial<ResponsiveThemeProviderProps>) => (
     <ResponsiveThemeProvider {...defaultProps} {...props} />
   );
 
-  const render = makePropsRenderer(component);
-
   it('should pass theme to child elements', () => {
-    render();
+    render(<Component />);
     const content = screen.getByTestId('content');
     expect(getNodeText(content)).toEqual(Breakpoint.DESKTOP);
   });

services/webapp/src/mocks/factories/crudDemoItem.ts

@@ -0,0 +1,53 @@
+import { MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+import { OperationDescriptor } from 'react-relay/hooks';
+
+import crudDemoItemDetailsQueryGraphql from '../../routes/crudDemoItem/crudDemoItemDetails/__generated__/crudDemoItemDetailsQuery.graphql';
+import EditCrudDemoItemQuery from '../../routes/crudDemoItem/editCrudDemoItem/__generated__/editCrudDemoItemQuery.graphql';
+import { connectionFromArray } from '../../tests/utils/fixtures';
+import CrudDemoItemListQuery from '../../routes/crudDemoItem/crudDemoItemList/__generated__/crudDemoItemListQuery.graphql';
+
+export const fillCrudDemoItemDetailsQuery = (
+  env: RelayMockEnvironment,
+  data = {
+    name: 'Demo item name',
+  },
+  variables = {}
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      CrudDemoItemType() {
+        return data;
+      },
+    })
+  );
+  env.mock.queuePendingOperation(crudDemoItemDetailsQueryGraphql, variables);
+};
+
+export const fillEditCrudDemoItemQuery = (
+  env: RelayMockEnvironment,
+  data: object = {
+    name: 'Default name',
+  },
+  variables = {}
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      CrudDemoItemType() {
+        return data;
+      },
+    })
+  );
+  env.mock.queuePendingOperation(EditCrudDemoItemQuery, variables);
+};
+
+export const fillCrudDemoItemListQuery = (
+  env: RelayMockEnvironment,
+  data = [{ name: 'First item' }, { name: 'Second item' }]
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      CrudDemoItemConnection: (...args) => connectionFromArray(data),
+    })
+  );
+  env.mock.queuePendingOperation(CrudDemoItemListQuery, {});
+};

services/webapp/src/mocks/factories/demoItem.ts

@@ -1,5 +1,13 @@
+import { times } from 'ramda';
+import { OperationDescriptor } from 'react-relay/hooks';
+import { MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+
 import { ContentfulDemoItem } from '../../shared/services/contentful';
 import { makeId } from '../../tests/utils/fixtures';
+import demoItemQueryGraphql from '../../routes/demoItem/__generated__/demoItemQuery.graphql';
+import demoItemsAllQueryGraphql from '../../routes/demoItems/__generated__/demoItemsAllQuery.graphql';
+import UseFavoriteDemoItemListQuery from '../../shared/hooks/useFavoriteDemoItem/__generated__/useFavoriteDemoItemListQuery.graphql';
+import { ContentfulDemoItemFavoriteType } from '../../shared/services/graphqlApi';
 import { createDeepFactory } from './factoryCreators';
 import { contentfulSysFactory } from './helpers';
 
@@ -15,3 +23,55 @@ export const demoItemFactory = createDeepFactory<ContentfulDemoItem>(() => ({
   },
   contentfulMetadata: { tags: [] },
 }));
+
+export const contentfulDemoItemFavoriteFactory = createDeepFactory<Partial<ContentfulDemoItemFavoriteType>>(() => ({
+  item: {
+    contentfuldemoitemfavoriteSet: {
+      edges: [],
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+      },
+    },
+    id: makeId(32),
+    isPublished: false,
+    fields: '',
+  },
+}));
+
+export const fillDemoItemQuery = (env: RelayMockEnvironment, data = demoItemFactory(), variables = {}) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      DemoItem() {
+        return data;
+      },
+    })
+  );
+  env.mock.queuePendingOperation(demoItemQueryGraphql, variables);
+};
+
+export const fillDemoItemsAllQuery = (
+  env: RelayMockEnvironment,
+  data = { items: times(() => demoItemFactory(), 3) }
+) => {
+  env.mock.queueOperationResolver((operation) =>
+    MockPayloadGenerator.generate(operation, {
+      DemoItemCollection() {
+        return data;
+      },
+    })
+  );
+  env.mock.queuePendingOperation(demoItemsAllQueryGraphql, {});
+};
+
+export const fillUseFavouriteDemoItemListQuery = (
+  env: RelayMockEnvironment,
+  data: Partial<ContentfulDemoItemFavoriteType> = {}
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      ContentfulDemoItemFavoriteType: () => data,
+    })
+  );
+  env.mock.queuePendingOperation(UseFavoriteDemoItemListQuery, {});
+};

services/webapp/src/mocks/factories/document.ts

@@ -1,5 +1,9 @@
-import { DocumentDemoItemType } from '../../shared/services/graphqlApi/__generated/types';
-import { makeId } from '../../tests/utils/fixtures';
+import { times } from 'ramda';
+import { MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+
+import { DocumentDemoItemType } from '../../shared/services/graphqlApi';
+import { connectionFromArray, makeId } from '../../tests/utils/fixtures';
+import DocumentsListQuery from '../../routes/documents/__generated__/documentsListQuery.graphql';
 import { createDeepFactory } from './factoryCreators';
 
 export const documentFactory = createDeepFactory<Partial<DocumentDemoItemType>>(() => ({
@@ -10,3 +14,12 @@ export const documentFactory = createDeepFactory<Partial<DocumentDemoItemType>>(
     url: `http://localhost/image/${makeId(32)}.pdf`,
   },
 }));
+
+export const fillDocumentsListQuery = (env: RelayMockEnvironment, data = times(() => documentFactory(), 3)) => {
+  env.mock.queueOperationResolver((operation) =>
+    MockPayloadGenerator.generate(operation, {
+      DocumentDemoItemConnection: () => connectionFromArray(data),
+    })
+  );
+  env.mock.queuePendingOperation(DocumentsListQuery, {});
+};

services/webapp/src/mocks/factories/notification.ts

@@ -1,6 +1,13 @@
+import { OperationDescriptor } from 'react-relay/hooks';
+import { MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+
 import { NotificationTypes } from '../../shared/components/notifications/notifications.types';
 import { NotificationType } from '../../shared/services/graphqlApi/__generated/types';
-import { makeId } from '../../tests/utils/fixtures';
+import { connectionFromArray, makeId } from '../../tests/utils/fixtures';
+import { ExtractNodeType } from '../../shared/utils/graphql';
+import { notificationsListContent$data } from '../../shared/components/notifications/notificationsList/__generated__/notificationsListContent.graphql';
+import notificationsListQueryGraphql from '../../shared/components/notifications/__generated__/notificationsListQuery.graphql';
+
 import { createFactory } from './factoryCreators';
 import { currentUserFactory } from './auth';
 
@@ -12,3 +19,15 @@ export const notificationFactory = createFactory<NotificationType>(() => ({
   readAt: null,
   user: currentUserFactory(),
 }));
+
+export const fillNotificationsListQuery = (
+  env: RelayMockEnvironment,
+  notifications: Array<Partial<ExtractNodeType<notificationsListContent$data['allNotifications']>>> = []
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      NotificationConnection: () => connectionFromArray(notifications),
+    })
+  );
+  env.mock.queuePendingOperation(notificationsListQueryGraphql, {});
+};

services/webapp/src/mocks/factories/stripe.ts

@@ -1,4 +1,7 @@
 import { createMockEnvironment, MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+import { times } from 'ramda';
+import { OperationDescriptor } from 'react-relay/hooks';
+
 import {
   StripePaymentMethod,
   StripePaymentMethodCardBrand,
@@ -8,13 +11,13 @@ import {
   TransactionHistoryEntry,
   TransactionHistoryEntryInvoice,
 } from '../../shared/services/api/stripe/history/types';
-import { makeId } from '../../tests/utils/fixtures';
+import { connectionFromArray, makeId } from '../../tests/utils/fixtures';
 import { DeepPartial } from '../../shared/utils/types';
 import { fillCommonQueryWithUser } from '../../shared/utils/commonQuery';
-import { connectionFromArray } from '../../shared/utils/testUtils';
 import StripeAllPaymentMethodsQueryGraphql from '../../modules/stripe/__generated__/stripeAllPaymentMethodsQuery.graphql';
-import { createDeepFactory, createFactory } from './factoryCreators';
+import StripeAllChargesQueryGraphql from '../../modules/stripe/__generated__/stripeAllChargesQuery.graphql';
 import { subscriptionPlanFactory } from './subscription';
+import { createDeepFactory, createFactory } from './factoryCreators';
 
 export const paymentMethodFactory = createDeepFactory<StripePaymentMethod>(() => ({
   id: makeId(32),
@@ -80,3 +83,15 @@ export const generateRelayEnvironmentWithPaymentMethods = (
   env.mock.queuePendingOperation(StripeAllPaymentMethodsQueryGraphql, {});
   return env;
 };
+
+export const fillAllStripeChargesQuery = (
+  env: RelayMockEnvironment,
+  data = times(() => transactionHistoryEntryFactory(), 5)
+) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      ChargeConnection: () => connectionFromArray(data),
+    })
+  );
+  env.mock.queuePendingOperation(StripeAllChargesQueryGraphql, {});
+};

services/webapp/src/mocks/factories/subscription.ts

@@ -1,12 +1,15 @@
 import { MockPayloadGenerator, RelayMockEnvironment } from 'relay-test-utils';
+import { OperationDescriptor } from 'react-relay/hooks';
+
 import {
   Subscription,
   SubscriptionPhase,
   SubscriptionPlan,
   SubscriptionPlanName,
 } from '../../shared/services/api/subscription/types';
 import SubscriptionActivePlanDetailsQuery from '../../modules/subscription/__generated__/subscriptionActivePlanDetailsQuery.graphql';
-import { makeId } from '../../tests/utils/fixtures';
+import { connectionFromArray, makeId } from '../../tests/utils/fixtures';
+import subscriptionPlansAllQueryGraphql from '../../modules/subscription/__generated__/subscriptionPlansAllQuery.graphql';
 import { createDeepFactory } from './factoryCreators';
 import { paymentMethodFactory } from './stripe';
 
@@ -44,17 +47,24 @@ export const subscriptionFactory = createDeepFactory<Subscription>(() => ({
   },
 }));
 
-export const fillSubscriptionScheduleQuery = (relayEnvironment: RelayMockEnvironment, subscription: any) => {
-  relayEnvironment.mock.resolveMostRecentOperation((operation) => {
+export const fillSubscriptionScheduleQuery = (
+  relayEnvironment: RelayMockEnvironment,
+  subscription: Partial<Subscription>
+) => {
+  relayEnvironment.mock.queueOperationResolver((operation) => {
     return MockPayloadGenerator.generate(operation, {
       SubscriptionScheduleType: (context, generateId) => ({
         ...subscription,
       }),
     });
   });
+  relayEnvironment.mock.queuePendingOperation(SubscriptionActivePlanDetailsQuery, {});
 };
 
-export const fillSubscriptionScheduleQueryWithPhases = (relayEnvironment: RelayMockEnvironment, phases: any) => {
+export const fillSubscriptionScheduleQueryWithPhases = (
+  relayEnvironment: RelayMockEnvironment,
+  phases: SubscriptionPhase[]
+) => {
   fillSubscriptionScheduleQuery(
     relayEnvironment,
     subscriptionFactory({
@@ -67,26 +77,11 @@ export const fillSubscriptionScheduleQueryWithPhases = (relayEnvironment: RelayM
   );
 };
 
-export const queueSubscriptionScheduleQuery = (relayEnvironment: RelayMockEnvironment, subscription: any) => {
-  relayEnvironment.mock.queueOperationResolver((operation) => {
-    return MockPayloadGenerator.generate(operation, {
-      SubscriptionScheduleType: (context, generateId) => ({
-        ...subscription,
-      }),
-    });
-  });
-  relayEnvironment.mock.queuePendingOperation(SubscriptionActivePlanDetailsQuery, {});
-};
-
-export const queueSubscriptionScheduleQueryWithPhases = (relayEnvironment: RelayMockEnvironment, phases: any) => {
-  queueSubscriptionScheduleQuery(
-    relayEnvironment,
-    subscriptionFactory({
-      defaultPaymentMethod: paymentMethodFactory({
-        billingDetails: { name: 'Owner' },
-        card: { last4: '1234' },
-      }),
-      phases,
+export const fillSubscriptionPlansAllQuery = (env: RelayMockEnvironment, data: SubscriptionPlan[] = []) => {
+  env.mock.queueOperationResolver((operation: OperationDescriptor) =>
+    MockPayloadGenerator.generate(operation, {
+      SubscriptionPlanConnection: () => connectionFromArray(data),
     })
   );
+  env.mock.queuePendingOperation(subscriptionPlansAllQueryGraphql, {});
 };

services/webapp/src/routes/auth/login/login.stories.tsx

@@ -1,18 +1,15 @@
 import { Story } from '@storybook/react';
-import { ProvidersWrapper } from '../../../shared/utils/testUtils';
+import { withProviders } from '../../../shared/utils/storybook';
 import { Login } from './login.component';
 
 const Template: Story = () => {
-  return (
-    <ProvidersWrapper>
-      <Login />
-    </ProvidersWrapper>
-  );
+  return <Login />;
 };
 
 export default {
-  title: 'Routes/Login',
+  title: 'Routes/Auth/Login',
   component: Login,
 };
 
 export const Default = Template.bind({});
+Default.decorators = [withProviders({})];

services/webapp/src/routes/auth/passwordReset/passwordResetConfirm/passwordResetConfirm.stories.tsx

@@ -1,18 +1,30 @@
 import { Story } from '@storybook/react';
-import { ProvidersWrapper } from '../../../../shared/utils/testUtils';
+import { Route, Routes } from 'react-router';
+import { withProviders } from '../../../../shared/utils/storybook';
+import { RoutesConfig } from '../../../../app/config/routes';
+import { createMockRouterProps } from '../../../../tests/utils/rendering';
 import { PasswordResetConfirm } from './passwordResetConfirm.component';
 
+const routePath = ['passwordReset', 'confirm'];
+const userParam = 'user';
+const tokenParam = 'token';
+
 const Template: Story = () => {
   return (
-    <ProvidersWrapper>
-      <PasswordResetConfirm />
-    </ProvidersWrapper>
+    <Routes>
+      <Route path={RoutesConfig.getLocalePath(routePath)} element={<PasswordResetConfirm />} />
+    </Routes>
   );
 };
 
 export default {
-  title: 'Shared/Auth/PasswordResetConfirm',
+  title: 'Routes/Auth/PasswordResetConfirm',
   component: PasswordResetConfirm,
 };
 
 export const Default = Template.bind({});
+Default.decorators = [
+  withProviders({
+    routerProps: createMockRouterProps(routePath, { user: userParam, token: tokenParam }),
+  }),
+];