feat: configprovider: update context then add locale story and unit tests

src/components/ConfigProvider/ConfigProvider.test.tsx

@@ -0,0 +1,227 @@
+import React, { createContext } from 'react';
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { ConfigProvider, useConfig } from './ConfigProvider';
+import DisabledContext from './DisabledContext';
+import { IConfigContext } from './ConfigProvider.types';
+import ShapeContext, { Shape } from './ShapeContext';
+import SizeContext, { Size } from './SizeContext';
+import esES from '../Locale/es_ES';
+import iconSet from '../Icon/selection.json';
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+const ConfigContext: React.Context<Partial<IConfigContext>> = createContext<
+  Partial<IConfigContext>
+>({});
+
+describe('ConfigProvider', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock();
+  });
+
+  afterEach(() => {
+    matchMedia.clear();
+  });
+
+  test('Renders its children', () => {
+    const { getByTestId } = render(
+      <ConfigProvider>
+        <div data-testid="test-child" />
+      </ConfigProvider>
+    );
+    expect(getByTestId('test-child')).toBeTruthy();
+  });
+
+  test('Provides the theme if props are provided', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider themeOptions={{ name: 'red' }}>
+          {children}
+        </ConfigProvider>
+      ),
+    });
+    expect(result.current.themeOptions).toEqual({ name: 'red' });
+  });
+
+  test('Provides the no theme if no props are provided', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.themeOptions).toEqual(undefined);
+  });
+
+  test('Provides fontOptions config if provided as prop', () => {
+    const fontOptions = {
+      fontFamily: 'Roboto',
+      fontSize: 16,
+      fontStack: 'sans-serif',
+    };
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider fontOptions={{ customFont: fontOptions }}>
+          {children}
+        </ConfigProvider>
+      ),
+    });
+    expect(result.current.fontOptions.customFont).toEqual(fontOptions);
+  });
+
+  test('Provides disabled config if provided as prop', () => {
+    const { getByTestId } = render(
+      <ConfigProvider disabled>
+        <DisabledContext.Consumer>
+          {(disabled): JSX.Element => (
+            <div data-testid="disabled">{disabled.toString()}</div>
+          )}
+        </DisabledContext.Consumer>
+      </ConfigProvider>
+    );
+    expect(getByTestId('disabled').textContent).toBe('true');
+  });
+
+  test('Provides default disabled config if not provided as prop', () => {
+    const { getByTestId } = render(
+      <ConfigProvider disabled={null}>
+        <DisabledContext.Consumer>
+          {(disabled): JSX.Element => (
+            <div data-testid="disabled">{disabled.toString()}</div>
+          )}
+        </DisabledContext.Consumer>
+      </ConfigProvider>
+    );
+    expect(getByTestId('disabled').textContent).toBe('false');
+  });
+
+  test('Provides focusVisibleOptions if props are provided', () => {
+    const testScope = document.createElement('div'); // create a dummy element
+    const focusVisibleOptions = {
+      focusVisible: false,
+      focusVisibleElement: testScope, // set the testScope element as the focusVisibleElement
+    };
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider focusVisibleOptions={focusVisibleOptions}>
+          <div>{children}</div>
+        </ConfigProvider>
+      ),
+    });
+    expect(result.current.focusVisibleOptions).toEqual(focusVisibleOptions);
+  });
+
+  test('Provides default focusVisibleOptions if no props are provided', () => {
+    const defaultFocusVisibleOptions = {
+      focusVisible: true,
+      focusVisibleElement: document.documentElement,
+    };
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.focusVisibleOptions).toEqual(
+      defaultFocusVisibleOptions
+    );
+  });
+
+  test('Provides shape config if provided as prop', () => {
+    const shape = Shape.Underline;
+    const { getByTestId } = render(
+      <ConfigProvider shape={shape}>
+        <ShapeContext.Consumer>
+          {(shape: Shape): JSX.Element => (
+            <div data-testid="shape">{shape.toString()}</div>
+          )}
+        </ShapeContext.Consumer>
+      </ConfigProvider>
+    );
+    expect(getByTestId('shape').textContent).toEqual(shape);
+  });
+
+  test('Provides no shape config if not provided as prop or context', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.shape).toEqual(undefined);
+  });
+
+  test('Provides size config if provided as prop', () => {
+    const size = Size.Large;
+    const { getByTestId } = render(
+      <ConfigProvider size={size}>
+        <SizeContext.Consumer>
+          {(size: Size): JSX.Element => (
+            <div data-testid="size">{size.toString()}</div>
+          )}
+        </SizeContext.Consumer>
+      </ConfigProvider>
+    );
+    expect(getByTestId('size').textContent).toEqual(size);
+  });
+
+  test('Provides no size config if not provided as prop or context', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.size).toEqual(undefined);
+  });
+
+  test('Provides locale config if provided as prop', () => {
+    const locale = esES;
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider locale={locale}>{children}</ConfigProvider>
+      ),
+    });
+    expect(result.current.locale).toEqual(locale);
+  });
+
+  test('Provides no locale config if not provided as prop or context', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.locale).toEqual(undefined);
+  });
+
+  test('Provides icomoon icon set if provided as prop', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider icomoonIconSet={iconSet}>{children}</ConfigProvider>
+      ),
+    });
+    expect(result.current.icomoonIconSet).toEqual(iconSet);
+  });
+
+  test('Provides no icomoon icon set if not provided as prop or context', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.icomoonIconSet).toEqual({});
+  });
+
+  test('Provides form context values if provided as prop', () => {
+    const formProps = {
+      validateMessages: {
+        required: 'Test is required.',
+      },
+      requiredMark: true,
+      colon: true,
+    };
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) => (
+        <ConfigProvider form={formProps}>{children}</ConfigProvider>
+      ),
+    });
+    expect(result.current.form).toEqual(formProps);
+  });
+
+  test('Provides no form context values if not provided as prop or context', () => {
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ConfigProvider,
+    });
+    expect(result.current.form).toEqual(undefined);
+  });
+});

src/components/ConfigProvider/ConfigProvider.tsx

@@ -141,12 +141,18 @@ const ConfigProvider: FC<ConfigProviderProps> = ({
         <ConfigContext.Provider
           value={{
             fontOptions,
-            setFontOptions,
             themeOptions,
+            setFontOptions,
             setThemeOptions,
+            disabled,
+            focusVisibleOptions,
+            form,
+            icomoonIconSet,
+            locale,
             registeredFont,
             registeredTheme,
-            icomoonIconSet,
+            shape,
+            size,
           }}
         >
           {childNode}

src/components/ConfigProvider/ConfigProvider.types.ts

@@ -37,9 +37,19 @@ export interface IConfigContext {
   themeOptions: ThemeOptions;
   setFontOptions: (fontOptions: FontOptions) => void;
   setThemeOptions: (themeOptions: ThemeOptions) => void;
+  disabled?: boolean;
+  focusVisibleOptions?: FocusVisibleOptions;
+  form?: {
+    validateMessages?: ValidateMessages;
+    requiredMark?: RequiredMark;
+    colon?: boolean;
+  };
+  icomoonIconSet?: Object;
+  locale?: Locale;
   registeredFont?: IRegisterFont;
   registeredTheme?: IRegisterTheme;
-  icomoonIconSet?: Object;
+  shape?: Shape;
+  size?: Size;
 }
 
 export interface ConfigProviderProps {

src/components/DateTimePicker/Internal/Locale/cs_CZ.ts

@@ -2,31 +2,33 @@ import type { Locale } from '../OcPicker.types';
 
 const locale: Locale = {
   locale: 'cs_CZ',
-  today: 'Dnes',
-  now: 'Nyní',
   backToToday: 'Zpět na dnešek',
-  ok: 'OK',
   clear: 'Vymazat',
-  month: 'Měsíc',
-  year: 'Rok',
-  timeSelect: 'Vybrat čas',
-  dateSelect: 'Vybrat datum',
-  monthSelect: 'Vyberte měsíc',
-  yearSelect: 'Vyberte rok',
-  decadeSelect: 'Vyberte dekádu',
-  yearFormat: 'YYYY',
   dateFormat: 'D.M.YYYY',
-  dayFormat: 'D',
+  dateSelect: 'Vybrat datum',
   dateTimeFormat: 'D.M.YYYY HH:mm:ss',
+  dayFormat: 'D',
+  decadeSelect: 'Vyberte dekádu',
+  month: 'Měsíc',
   monthBeforeYear: true,
-  previousMonth: 'Předchozí měsíc (PageUp)',
+  monthSelect: 'Vyberte měsíc',
+  nextCentury: 'Následující století',
+  nextDecade: 'Následující dekáda',
   nextMonth: 'Následující (PageDown)',
-  previousYear: 'Předchozí rok (Control + left)',
   nextYear: 'Následující rok (Control + right)',
-  previousDecade: 'Předchozí dekáda',
-  nextDecade: 'Následující dekáda',
+  now: 'Nyní',
+  ok: 'OK',
   previousCentury: 'Předchozí století',
-  nextCentury: 'Následující století',
+  previousDecade: 'Předchozí dekáda',
+  previousMonth: 'Předchozí měsíc (PageUp)',
+  previousYear: 'Předchozí rok (Control + left)',
+  shortMonths: 'led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro'.split('_'),
+  shortWeekDays: 'ne_po_út_st_čt_pá_so'.split('_'),
+  timeSelect: 'Vybrat čas',
+  today: 'Dnes',
+  year: 'Rok',
+  yearFormat: 'YYYY',
+  yearSelect: 'Vyberte rok',
 };
 
 export default locale;

src/components/DateTimePicker/Internal/Locale/da_DK.ts

@@ -2,31 +2,33 @@ import type { Locale } from '../OcPicker.types';
 
 const locale: Locale = {
   locale: 'da_DK',
-  today: 'I dag',
-  now: 'Nu',
   backToToday: 'Gå til i dag',
-  ok: 'OK',
   clear: 'Ryd',
-  month: 'Måned',
-  year: 'År',
-  timeSelect: 'Vælg tidspunkt',
-  dateSelect: 'Vælg dato',
-  monthSelect: 'Vælg måned',
-  yearSelect: 'Vælg år',
-  decadeSelect: 'Vælg årti',
-  yearFormat: 'YYYY',
   dateFormat: 'D/M/YYYY',
-  dayFormat: 'D',
+  dateSelect: 'Vælg dato',
   dateTimeFormat: 'D/M/YYYY HH:mm:ss',
+  dayFormat: 'D',
+  decadeSelect: 'Vælg årti',
+  month: 'Måned',
   monthBeforeYear: true,
-  previousMonth: 'Forrige måned (Page Up)',
+  monthSelect: 'Vælg måned',
+  nextCentury: 'Næste århundrede',
+  nextDecade: 'Næste årti',
   nextMonth: 'Næste måned (Page Down)',
-  previousYear: 'Forrige år (Ctrl-venstre pil)',
   nextYear: 'Næste år (Ctrl-højre pil)',
-  previousDecade: 'Forrige årti',
-  nextDecade: 'Næste årti',
+  now: 'Nu',
+  ok: 'OK',
   previousCentury: 'Forrige århundrede',
-  nextCentury: 'Næste århundrede',
+  previousDecade: 'Forrige årti',
+  previousMonth: 'Forrige måned (Page Up)',
+  previousYear: 'Forrige år (Ctrl-venstre pil)',
+  shortMonths: 'jan_feb_mar_apr_maj_juni_juli_aug_sept_okt_nov_dec'.split('_'),
+  shortWeekDays: 'sø_ma_ti_on_to_fr_lø'.split('_'),
+  timeSelect: 'Vælg tidspunkt',
+  today: 'I dag',
+  year: 'År',
+  yearFormat: 'YYYY',
+  yearSelect: 'Vælg år',
 };
 
 export default locale;