From 632b5dffb84bb20beba0b5c9bcaa30ebd8306aa9 Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Fri, 28 Apr 2023 16:08:55 +0300
Subject: [PATCH] feat(oracles): update test and storybook config

---
 libs/oracles/.storybook/main.js               |   4 +-
 libs/oracles/.storybook/preview.js            | 101 ++++++++++++++----
 libs/oracles/.storybook/styles.scss           |   3 -
 libs/oracles/jest.config.ts                   |   1 +
 .../oracle-basic-profile.spec.tsx             |  45 ++++++++
 .../oracle-basic-profile.stories.tsx          |   4 +-
 .../oracle-basic-profile.tsx                  |  15 ++-
 libs/oracles/src/setup-tests.ts               |   4 +
 libs/oracles/tailwind.config.js               |   1 +
 libs/oracles/tsconfig.lib.json                |   2 +-
 libs/oracles/tsconfig.spec.json               |   3 +-
 11 files changed, 153 insertions(+), 30 deletions(-)
 delete mode 100644 libs/oracles/.storybook/styles.scss
 create mode 100644 libs/oracles/src/setup-tests.ts

diff --git a/libs/oracles/.storybook/main.js b/libs/oracles/.storybook/main.js
index 9997fd7a1..01ae9b323 100644
--- a/libs/oracles/.storybook/main.js
+++ b/libs/oracles/.storybook/main.js
@@ -7,8 +7,8 @@ module.exports = {
 
   stories: [
     ...rootMain.stories,
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     ...rootMain.addons,
diff --git a/libs/oracles/.storybook/preview.js b/libs/oracles/.storybook/preview.js
index 77cf7b2b5..59e6d1d77 100644
--- a/libs/oracles/.storybook/preview.js
+++ b/libs/oracles/.storybook/preview.js
@@ -1,25 +1,90 @@
-import './styles.scss';
-import { useStorybookThemeObserver } from '@vegaprotocol/utils';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import '../src/styles.css';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: { disable: true },
-  themes: {
-    default: 'dark',
-    list: [
-      { name: 'dark', class: ['dark', 'bg-black'], color: '#000' },
-      { name: 'light', class: '', color: '#FFF' },
-    ],
+  layout: 'fullscreen',
+  a11y: {
+    config: {
+      rules: [
+        {
+          // Disabled only for storybook because we display both the dark and light variants of the components on the same page without differentiating the ids, so it will always error.
+          id: 'duplicate-id-aria',
+          selector: '[data-testid="form-group"] > label',
+        },
+        {
+          // Disabled because we can't control the radix radio group component and it claims to be accessible to begin with, so hopefully no issues.
+          id: 'button-name',
+          selector: '[role=radiogroup] > button',
+        },
+      ],
+    },
   },
 };
 
-export const decorators = [
-  (Story) => {
-    useStorybookThemeObserver();
-
-    return (
-      <div style={{ width: '100%', height: 500 }}>
-        <Story />
-      </div>
-    );
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'dark',
+    toolbar: {
+      icon: 'circlehollow',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' },
+        { value: 'sideBySide', title: 'Side by side' },
+      ],
+      showName: true,
+    },
   },
-];
+};
+
+const StoryWrapper = ({ children, fill }) => {
+  const classes = classNames(
+    'p-4',
+    'bg-white dark:bg-black',
+    'text-neutral-800 dark:text-neutral-200',
+    {
+      'w-screen h-screen': fill,
+    }
+  );
+  return <div className={classes}>{children}</div>;
+};
+
+const ThemeWrapper = (Story, context) => {
+  const theme = context.parameters.theme || context.globals.theme;
+  const { setTheme } = useThemeSwitcher();
+
+  useEffect(() => {
+    // in side by side mode a 'dark' class on the html tag will interfere
+    // making the light 'side' dark, so remove it in that case
+    if (theme === 'sideBySide') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      setTheme(theme);
+    }
+  }, [setTheme, theme]);
+
+  return theme === 'sideBySide' ? (
+    <>
+      <div className="bg-white text-black">
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      </div>
+      <div className="dark bg-black text-white">
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      </div>
+    </>
+  ) : (
+    <StoryWrapper fill={true}>
+      <Story />
+    </StoryWrapper>
+  );
+};
+
+export const decorators = [ThemeWrapper];
diff --git a/libs/oracles/.storybook/styles.scss b/libs/oracles/.storybook/styles.scss
deleted file mode 100644
index b5c61c956..000000000
--- a/libs/oracles/.storybook/styles.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/libs/oracles/jest.config.ts b/libs/oracles/jest.config.ts
index b08b7a5bc..aadf9082a 100644
--- a/libs/oracles/jest.config.ts
+++ b/libs/oracles/jest.config.ts
@@ -7,4 +7,5 @@ export default {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/oracles',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };
diff --git a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx
index e69de29bb..1a513e7dd 100644
--- a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx
+++ b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx
@@ -0,0 +1,45 @@
+import { OracleBasicProfile } from './oracle-basic-profile';
+import type { Provider } from '../../oracle-schema';
+import { render, screen } from '@testing-library/react';
+
+describe('OracleBasicProfile', () => {
+  const testProvider = {
+    name: 'Test oracle',
+    url: 'https://zombo.com',
+    description_markdown:
+      'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
+    oracle: {
+      status: 'GOOD',
+      status_reason: '',
+      first_verified: '2023-02-28T00:00:00.000Z',
+      last_verified: '2023-02-28T00:00:00.000Z',
+      type: 'eth_address',
+      eth_address: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+    },
+    proofs: [
+      {
+        format: 'signed_message',
+        available: true,
+        type: 'eth_address',
+        eth_address: '0x949AF81E51D57831AE52591d17fBcdd1014a5f52',
+        message: 'SOMEHEX',
+      },
+    ],
+    github_link:
+      'https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/eth_address-0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC.toml',
+  } as Provider;
+
+  it('should render successfully', () => {
+    const component = <OracleBasicProfile provider={testProvider} />;
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the name', () => {
+    render(<OracleBasicProfile provider={testProvider} />);
+    expect(screen.getByTestId('provider-name')).toHaveTextContent(
+      'Test oracle'
+    );
+    expect(screen.getByTestId('verified-proofs')).toHaveTextContent('1');
+    expect(screen.getByTestId('signed-proofs')).toHaveTextContent('1');
+  });
+});
diff --git a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.stories.tsx b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.stories.tsx
index 1e2cae04b..4265a3424 100644
--- a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.stories.tsx
+++ b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.stories.tsx
@@ -10,9 +10,9 @@ const Template: Story = (args) => (
   <OracleBasicProfile provider={args['provider']} />
 );
 
-export const Primary = Template.bind({});
+export const Default = Template.bind({});
 
-Primary.args = {
+Default.args = {
   provider: {
     name: 'Test oracle',
     url: 'https://zombo.com',
diff --git a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
index 38c08383f..3da3d0ea9 100644
--- a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
+++ b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
@@ -83,8 +83,13 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
             target="_blank"
           >
             <span>
-              <span className="underline pr-1">{provider.name}</span>
-              <span className="dark:text-vega-light-300 text-vega-dark-300">
+              <span data-testid="provider-name" className="underline pr-1">
+                {provider.name}
+              </span>
+              <span
+                data-testid="verified-proofs"
+                className="dark:text-vega-light-300 text-vega-dark-300"
+              >
                 ({verifiedProofs.length})
               </span>
             </span>
@@ -106,7 +111,10 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
         </span>
       </span>
       <p className="dark:text-vega-light-300 text-vega-dark-300">{message}</p>
-      <p className="dark:text-vega-light-300 text-vega-dark-300">
+      <p
+        data-testid="signed-proofs"
+        className="dark:text-vega-light-300 text-vega-dark-300"
+      >
         {t('Involved in %s %s', [
           signedProofs.length.toString(),
           signedProofs.length !== 1 ? t('markets') : t('market'),
@@ -118,6 +126,7 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
             <ExternalLink
               key={link.url}
               href={link.url}
+              data-testid={link.url}
               className="flex align-items-bottom underline text-sm"
             >
               <span className="pt-1">
diff --git a/libs/oracles/src/setup-tests.ts b/libs/oracles/src/setup-tests.ts
new file mode 100644
index 000000000..68773380a
--- /dev/null
+++ b/libs/oracles/src/setup-tests.ts
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
diff --git a/libs/oracles/tailwind.config.js b/libs/oracles/tailwind.config.js
index 1deb8143d..20447f23e 100644
--- a/libs/oracles/tailwind.config.js
+++ b/libs/oracles/tailwind.config.js
@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../tailwindcss-config/src/vega-custom-classes
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{ts,tsx,html,mdx}'),
+    join(__dirname, 'src/utils/shared.ts'),
     join(__dirname, '.storybook/preview.js'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
diff --git a/libs/oracles/tsconfig.lib.json b/libs/oracles/tsconfig.lib.json
index 5ad10446b..6a440c7bd 100644
--- a/libs/oracles/tsconfig.lib.json
+++ b/libs/oracles/tsconfig.lib.json
@@ -6,7 +6,7 @@
   },
   "files": [
     "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/next/typings/image.d.ts"
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
   ],
   "exclude": [
     "**/*.spec.ts",
diff --git a/libs/oracles/tsconfig.spec.json b/libs/oracles/tsconfig.spec.json
index 3da863401..a5eb12596 100644
--- a/libs/oracles/tsconfig.spec.json
+++ b/libs/oracles/tsconfig.spec.json
@@ -15,6 +15,7 @@
     "**/*.test.jsx",
     "**/*.spec.jsx",
     "**/*.d.ts",
-    "jest.config.ts"
+    "jest.config.ts",
+    "../../index.d.ts"
   ]
 }