feat(oracles): update test and storybook config

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,

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];

libs/oracles/.storybook/styles.scss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

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'],
 };

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');
+  });
+});

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',

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">

libs/oracles/src/setup-tests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

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),
   ],

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",

libs/oracles/tsconfig.spec.json

@@ -15,6 +15,7 @@
     "**/*.test.jsx",
     "**/*.spec.jsx",
     "**/*.d.ts",
-    "jest.config.ts"
+    "jest.config.ts",
+    "../../index.d.ts"
   ]
 }