ClerkProvider.test.tsx

import {
  beBY,
  csCZ,
  deDE,
  enUS,
  esES,
  frFR,
  itIT,
  jaJP,
  koKR,
  ptBR,
  ruRU,
  skSK,
  svSE,
  trTR,
  ukUA,
} from '@clerk/localizations';
import { dark } from '@clerk/ui/themes';
import { describe, expectTypeOf, it } from 'vitest';

import type { ClerkProvider } from '../ClerkProvider';
import type { ClerkProviderProps as GenericClerkProviderProps, Ui } from '../../types';

type ClerkProviderProps = Parameters<typeof ClerkProvider>[0];
type CustomAppearance = {
  options?: {
    customFlag?: boolean;
  };
};
const customUi = {} as Ui<CustomAppearance>;

describe('ClerkProvider', () => {
  describe('Type tests', () => {
    describe('publishableKey', () => {
      it('expects a publishableKey and children as the minimum accepted case', () => {
        expectTypeOf({ publishableKey: 'test', children: '' }).toMatchTypeOf<ClerkProviderProps>();
      });

      it('errors if no publishableKey', () => {
        expectTypeOf({ children: '' }).not.toMatchTypeOf<ClerkProviderProps>();
      });
    });
  });

  describe('prefetchUI', () => {
    const defaultProps = { publishableKey: 'test', children: '' };

    it('accepts false to disable UI prefetching', () => {
      expectTypeOf({ ...defaultProps, prefetchUI: false as const }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('accepts undefined for default behavior', () => {
      expectTypeOf({ ...defaultProps, prefetchUI: undefined }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('accepts true to explicitly enable UI prefetching', () => {
      expectTypeOf({ ...defaultProps, prefetchUI: true as const }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('rejects non-boolean values', () => {
      expectTypeOf({ ...defaultProps, prefetchUI: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
    });
  });

  describe('appearance', () => {
    const defaultProps = { publishableKey: 'test', children: '' };

    it('exists as a prop', () => {
      expectTypeOf({ ...defaultProps, appearance: {} }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('includes variables, elements, options baseTheme', () => {
      expectTypeOf({
        ...defaultProps,
        appearance: { elements: {}, variables: {}, options: {}, thene: dark },
      }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('errors if a non existent key is provided', () => {
      expectTypeOf({
        ...defaultProps,
        appearance: { variables: { nonExistentKey: '' } },
      }).not.toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        appearance: { options: { nonExistentKey: '' } },
      }).not.toMatchTypeOf<ClerkProviderProps>();

      // expectTypeOf({
      //   ...defaultProps,
      //   appearance: { elements: { nonExistentKey: '' } },
      // }).not.toMatchTypeOf<ClerkProviderProps>();
    });

    it('is driven by the passed ui object type', () => {
      expectTypeOf({
        ...defaultProps,
        ui: customUi,
        appearance: { options: { customFlag: true } },
      }).toMatchTypeOf<GenericClerkProviderProps<typeof customUi>>();

      expectTypeOf({
        ...defaultProps,
        appearance: { options: { customFlag: true } },
      }).not.toMatchTypeOf<ClerkProviderProps>();
    });
  });

  describe('localization', () => {
    const defaultProps = { publishableKey: 'test', children: '' };

    it('exists as a prop', () => {
      expectTypeOf({ ...defaultProps, localization: {} }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('errors if a non existent key is provided', () => {
      expectTypeOf({
        ...defaultProps,
        localization: { a: 'test' },
      }).not.toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: { signUp: { start: 'test' } },
      }).not.toMatchTypeOf<ClerkProviderProps>();
    });

    it('works with all our prebuilt localizations', () => {
      expectTypeOf({
        ...defaultProps,
        localization: beBY,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: deDE,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: frFR,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: enUS,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: esES,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: itIT,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: ptBR,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: ruRU,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: svSE,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: trTR,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: jaJP,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: jaJP,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: csCZ,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: koKR,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: skSK,
      }).toMatchTypeOf<ClerkProviderProps>();

      expectTypeOf({
        ...defaultProps,
        localization: ukUA,
      }).toMatchTypeOf<ClerkProviderProps>();
    });

    it('is able to receive multiple localizations', () => {
      expectTypeOf({
        ...defaultProps,
        localization: { ...frFR, ...deDE },
      }).toMatchTypeOf<ClerkProviderProps>();
    });
  });

  describe('children', () => {
    it('errors if no children', () => {
      expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
    });
  });

  describe('navigation options', () => {
    it('expects both routerPush & routerReplace to pass', () => {
      expectTypeOf({
        publishableKey: 'test',
        children: '',
        routerPush: () => {},
        routerReplace: () => {},
      }).toMatchTypeOf<ClerkProviderProps>();
    });
  });
});