From a23dcc5d56f15d0bc53a29a2a953b4060d683250 Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Thu, 23 Jun 2022 15:03:24 +0300
Subject: [PATCH] stories fixes

---
 .../@shared/AddToken/index.stories.tsx        |  7 +++---
 .../@shared/AddToken/index.test.tsx           | 16 ++++++++++++
 .../AssetComputeList/index.stories.tsx        |  5 +++-
 .../AssetListTitle/index.stories.tsx          |  5 +++-
 .../@shared/AssetList/index.stories.tsx       | 12 ++++++---
 .../@shared/AssetTeaser/index.stories.tsx     | 10 +++++++-
 .../FormFields/AssetSelection/index.test.tsx  | 25 +++++++++++++++++++
 .../index.module.css}                         |  0
 .../Datatoken/RefreshName/index.stories.tsx   | 25 +++++++++++++++++++
 .../index.tsx}                                | 10 +++++---
 .../@shared/Pagination/index.stories.tsx      |  1 -
 .../@shared/Publisher/Add/index.module.css    |  2 +-
 .../@shared/Publisher/Add/index.tsx           |  2 +-
 .../@shared/Publisher/index.stories.tsx       |  1 -
 14 files changed, 104 insertions(+), 17 deletions(-)
 create mode 100644 src/components/@shared/AddToken/index.test.tsx
 create mode 100644 src/components/@shared/FormFields/AssetSelection/index.test.tsx
 rename src/components/@shared/FormFields/Datatoken/{RefreshName.module.css => RefreshName/index.module.css} (100%)
 create mode 100644 src/components/@shared/FormFields/Datatoken/RefreshName/index.stories.tsx
 rename src/components/@shared/FormFields/Datatoken/{RefreshName.tsx => RefreshName/index.tsx} (80%)

diff --git a/src/components/@shared/AddToken/index.stories.tsx b/src/components/@shared/AddToken/index.stories.tsx
index 9c5962e8d..22005ecc3 100644
--- a/src/components/@shared/AddToken/index.stories.tsx
+++ b/src/components/@shared/AddToken/index.stories.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import AddToken, { AddTokenProps } from '@shared/AddToken'
+import Web3Provider from '@context/Web3'
 
 export default {
   title: 'Component/@shared/AddToken',
   component: AddToken
 } as ComponentMeta<typeof AddToken>
 
-const Template: ComponentStory<typeof AddToken> = (args: AddTokenProps) => (
-  <AddToken {...args} />
-)
+const Template: ComponentStory<typeof AddToken> = (args: AddTokenProps) => {
+  return <AddToken {...args} />
+}
 
 interface Props {
   args: AddTokenProps
diff --git a/src/components/@shared/AddToken/index.test.tsx b/src/components/@shared/AddToken/index.test.tsx
new file mode 100644
index 000000000..671e47cdb
--- /dev/null
+++ b/src/components/@shared/AddToken/index.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import AddToken from './'
+
+test('render AddToken ', async () => {
+  const args = {
+    address: '0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8',
+    symbol: 'OCEAN',
+    logo: 'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/datatoken.png'
+  }
+  // TODO: remove eslint rule (testing-library/no-unnecessary-act) and solve act issue
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  await act(async () => {
+    render(<AddToken {...args} />)
+  })
+})
diff --git a/src/components/@shared/AssetList/AssetComputeList/index.stories.tsx b/src/components/@shared/AssetList/AssetComputeList/index.stories.tsx
index eef8c0009..06444ca3c 100644
--- a/src/components/@shared/AssetList/AssetComputeList/index.stories.tsx
+++ b/src/components/@shared/AssetList/AssetComputeList/index.stories.tsx
@@ -5,6 +5,7 @@ import AssetComputeList, {
 } from '@shared/AssetList/AssetComputeList'
 import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__'
 import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/AssetList/AssetComputeList',
@@ -16,7 +17,9 @@ const Template: ComponentStory<typeof AssetComputeList> = (
 ) => {
   return (
     <MarketMetadataProvider>
-      <AssetComputeList {...args} />
+      <UserPreferencesProvider>
+        <AssetComputeList {...args} />
+      </UserPreferencesProvider>
     </MarketMetadataProvider>
   )
 }
diff --git a/src/components/@shared/AssetList/AssetListTitle/index.stories.tsx b/src/components/@shared/AssetList/AssetListTitle/index.stories.tsx
index ee4ac699e..d7d289530 100644
--- a/src/components/@shared/AssetList/AssetListTitle/index.stories.tsx
+++ b/src/components/@shared/AssetList/AssetListTitle/index.stories.tsx
@@ -4,6 +4,7 @@ import AssetListTitle, {
   AssetListTitleProps
 } from '@shared/AssetList/AssetListTitle'
 import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/AssetList/AssetListTitle',
@@ -15,7 +16,9 @@ const Template: ComponentStory<typeof AssetListTitle> = (
 ) => {
   return (
     <MarketMetadataProvider>
-      <AssetListTitle {...args} />
+      <UserPreferencesProvider>
+        <AssetListTitle {...args} />
+      </UserPreferencesProvider>
     </MarketMetadataProvider>
   )
 }
diff --git a/src/components/@shared/AssetList/index.stories.tsx b/src/components/@shared/AssetList/index.stories.tsx
index 5745d53c3..7711dacb0 100644
--- a/src/components/@shared/AssetList/index.stories.tsx
+++ b/src/components/@shared/AssetList/index.stories.tsx
@@ -4,6 +4,8 @@ import AssetList, { AssetListProps } from '@shared/AssetList'
 import * as config from '../../../../app.config'
 import { assets, mockWallet } from '../../../../.storybook/__mockdata__'
 import UrqlClientProvider from '@context/UrqlProvider'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetList',
@@ -12,9 +14,13 @@ export default {
 
 const Template: ComponentStory<typeof AssetList> = (args: AssetListProps) => {
   return (
-    <UrqlClientProvider>
-      <AssetList {...args} />
-    </UrqlClientProvider>
+    <MarketMetadataProvider>
+      <UrqlClientProvider>
+        <UserPreferencesProvider>
+          <AssetList {...args} />
+        </UserPreferencesProvider>
+      </UrqlClientProvider>
+    </MarketMetadataProvider>
   )
 }
 
diff --git a/src/components/@shared/AssetTeaser/index.stories.tsx b/src/components/@shared/AssetTeaser/index.stories.tsx
index 291cb38c1..0da2bf205 100644
--- a/src/components/@shared/AssetTeaser/index.stories.tsx
+++ b/src/components/@shared/AssetTeaser/index.stories.tsx
@@ -7,6 +7,8 @@ import {
   prices
 } from '../../../../.storybook/__mockdata__'
 import AssetTeaser, { AssetTeaserProps } from '@shared/AssetTeaser'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetTeaser',
@@ -16,7 +18,13 @@ export default {
 const Template: ComponentStory<typeof AssetTeaser> = (
   args: AssetTeaserProps
 ) => {
-  return <AssetTeaser {...args} />
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <AssetTeaser {...args} />
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
 }
 
 interface Props {
diff --git a/src/components/@shared/FormFields/AssetSelection/index.test.tsx b/src/components/@shared/FormFields/AssetSelection/index.test.tsx
new file mode 100644
index 000000000..fb68edae7
--- /dev/null
+++ b/src/components/@shared/FormFields/AssetSelection/index.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__/index'
+import UrqlClientProvider from '../../../../@context/UrqlProvider'
+import AssetSelection from './'
+import MarketMetadataProvider from '@context/MarketMetadata'
+
+test('render Asset Selection List', async () => {
+  const args = {
+    assets: assetSelectionAsset,
+    multiple: true,
+    disabled: false
+  }
+  // TODO: remove eslint rule (testing-library/no-unnecessary-act) and solve act issue
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  await act(async () => {
+    render(
+      <MarketMetadataProvider>
+        <UrqlClientProvider>
+          <AssetSelection {...args} />
+        </UrqlClientProvider>
+      </MarketMetadataProvider>
+    )
+  })
+})
diff --git a/src/components/@shared/FormFields/Datatoken/RefreshName.module.css b/src/components/@shared/FormFields/Datatoken/RefreshName/index.module.css
similarity index 100%
rename from src/components/@shared/FormFields/Datatoken/RefreshName.module.css
rename to src/components/@shared/FormFields/Datatoken/RefreshName/index.module.css
diff --git a/src/components/@shared/FormFields/Datatoken/RefreshName/index.stories.tsx b/src/components/@shared/FormFields/Datatoken/RefreshName/index.stories.tsx
new file mode 100644
index 000000000..8e09cd546
--- /dev/null
+++ b/src/components/@shared/FormFields/Datatoken/RefreshName/index.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import RefreshName, {
+  RefreshNameProps
+} from '@shared/FormFields/Datatoken/RefreshName'
+
+export default {
+  title: 'Component/@shared/FormFields/Datatoken/RefreshName',
+  component: RefreshName
+} as ComponentMeta<typeof RefreshName>
+
+const Template: ComponentStory<typeof RefreshName> = (
+  args: RefreshNameProps
+) => <RefreshName {...args} />
+
+interface Props {
+  args: RefreshNameProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  generateName: () => {
+    console.log('A new name generated!')
+  }
+}
diff --git a/src/components/@shared/FormFields/Datatoken/RefreshName.tsx b/src/components/@shared/FormFields/Datatoken/RefreshName/index.tsx
similarity index 80%
rename from src/components/@shared/FormFields/Datatoken/RefreshName.tsx
rename to src/components/@shared/FormFields/Datatoken/RefreshName/index.tsx
index 1c8ca2a71..bcb52d658 100644
--- a/src/components/@shared/FormFields/Datatoken/RefreshName.tsx
+++ b/src/components/@shared/FormFields/Datatoken/RefreshName/index.tsx
@@ -1,13 +1,15 @@
 import React, { ReactElement } from 'react'
-import styles from './RefreshName.module.css'
+import styles from './index.module.css'
 import Button from '@shared/atoms/Button'
 import Refresh from '@images/refresh.svg'
 
+export interface RefreshNameProps {
+  generateName: () => void
+}
+
 export default function RefreshName({
   generateName
-}: {
-  generateName: () => void
-}): ReactElement {
+}: RefreshNameProps): ReactElement {
   return (
     <Button
       style="text"
diff --git a/src/components/@shared/Pagination/index.stories.tsx b/src/components/@shared/Pagination/index.stories.tsx
index 927a2c9ca..b2e1d62e7 100644
--- a/src/components/@shared/Pagination/index.stories.tsx
+++ b/src/components/@shared/Pagination/index.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Pagination from '@shared/Pagination'
 import { PaginationProps } from './_types'
-import { UserPreferencesProvider } from '@context/UserPreferences'
 import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
diff --git a/src/components/@shared/Publisher/Add/index.module.css b/src/components/@shared/Publisher/Add/index.module.css
index 3482d355f..95f96a838 100644
--- a/src/components/@shared/Publisher/Add/index.module.css
+++ b/src/components/@shared/Publisher/Add/index.module.css
@@ -3,5 +3,5 @@
 }
 
 .linksExternal {
-  composes: linksExternal from './index.module.css';
+  composes: linksExternal from '../index.module.css';
 }
diff --git a/src/components/@shared/Publisher/Add/index.tsx b/src/components/@shared/Publisher/Add/index.tsx
index f40437fc7..482781c0f 100644
--- a/src/components/@shared/Publisher/Add/index.tsx
+++ b/src/components/@shared/Publisher/Add/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import External from '@images/external.svg'
-import styles from './Add.module.css'
+import styles from './index.module.css'
 
 export default function Add(): ReactElement {
   return (
diff --git a/src/components/@shared/Publisher/index.stories.tsx b/src/components/@shared/Publisher/index.stories.tsx
index 526474ec8..dff4fe5d1 100644
--- a/src/components/@shared/Publisher/index.stories.tsx
+++ b/src/components/@shared/Publisher/index.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Publisher, { PublisherProps } from '@shared/Publisher'
-import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/Publisher',