[TWRNC] Added test suite

packages/design-system-twrnc-preset/jest.config.js

@@ -14,10 +14,6 @@ module.exports = merge(baseConfig, {
   // The display name when running multiple projects
   displayName,
 
-  // TODO add tests to twrnc preset https://github.com/MetaMask/metamask-design-system/issues/90
-  // Pass with no tests if no test files are found
-  passWithNoTests: true,
-
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
@@ -38,4 +34,11 @@ module.exports = merge(baseConfig, {
   moduleNameMapper: {
     '\\.(css|less|scss)$': 'identity-obj-proxy',
   },
+  // Exclude pure type files from coverage since they contain no executable code
+  // Also exclude enum files that Jest has difficulty tracking coverage for
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'typography\\.types\\.ts$',
+    'Theme\\.types\\.ts$',
+  ],
 });

packages/design-system-twrnc-preset/package.json

@@ -65,6 +65,7 @@
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
+    "react-native": "^0.72.15",
     "react-test-renderer": "^18.3.1",
     "ts-jest": "^29.2.5",
     "typescript": "~5.2.2"

packages/design-system-twrnc-preset/src/Theme.types.test.ts

@@ -0,0 +1,86 @@
+import { Theme } from './Theme.types';
+
+describe('Theme', () => {
+  it('has correct light theme value', () => {
+    expect(Theme.Light).toBe('light');
+  });
+
+  it('has correct dark theme value', () => {
+    expect(Theme.Dark).toBe('dark');
+  });
+
+  it('has exactly two theme values', () => {
+    const themeValues = Object.values(Theme);
+    expect(themeValues).toHaveLength(2);
+    expect(themeValues).toContain('light');
+    expect(themeValues).toContain('dark');
+  });
+
+  it('enum keys match expected values', () => {
+    expect(Object.keys(Theme)).toStrictEqual(['Light', 'Dark']);
+  });
+
+  it('can be used as string values', () => {
+    const lightTheme: string = Theme.Light;
+    const darkTheme: string = Theme.Dark;
+
+    expect(typeof lightTheme).toBe('string');
+    expect(typeof darkTheme).toBe('string');
+    expect(lightTheme).toBe('light');
+    expect(darkTheme).toBe('dark');
+  });
+
+  it('can be used as object keys', () => {
+    const themeConfig = {
+      [Theme.Light]: 'light-config',
+      [Theme.Dark]: 'dark-config',
+    };
+
+    expect(themeConfig[Theme.Light]).toBe('light-config');
+    expect(themeConfig[Theme.Dark]).toBe('dark-config');
+    expect(themeConfig.light).toBe('light-config');
+    expect(themeConfig.dark).toBe('dark-config');
+  });
+
+  it('can be iterated over', () => {
+    const themes = Object.values(Theme);
+    const result: string[] = [];
+
+    themes.forEach((theme) => {
+      result.push(theme);
+    });
+
+    expect(result).toStrictEqual(['light', 'dark']);
+  });
+
+  it('enum comparison works correctly', () => {
+    expect(Theme.Light).toBe('light');
+    expect(Theme.Dark).toBe('dark');
+    // Test that they are distinct values
+    const allThemes = [Theme.Light, Theme.Dark];
+    expect(allThemes).toHaveLength(2);
+    expect(new Set(allThemes).size).toBe(2); // All values are unique
+    // Test enum values are different strings
+    expect(Theme.Light).not.toBe(Theme.Dark);
+  });
+
+  it('enum values can be compared and used in logic', () => {
+    // Test direct enum usage without switch statements to avoid conditional logic warnings
+    expect(Theme.Light).toBe('light');
+    expect(Theme.Dark).toBe('dark');
+
+    // Test that we can distinguish between the two enum values
+    expect(Theme.Light).not.toBe(Theme.Dark);
+    expect(Theme.Light).toBe(Theme.Light);
+    expect(Theme.Dark).toBe(Theme.Dark);
+  });
+
+  it('maintains type safety', () => {
+    const validTheme: Theme = Theme.Light;
+    const anotherValidTheme: Theme = Theme.Dark;
+
+    // These should compile without error
+    expect([validTheme, anotherValidTheme]).toContain('light');
+    expect([validTheme, anotherValidTheme]).toContain('dark');
+  });
+});

packages/design-system-twrnc-preset/src/ThemeProvider.test.tsx

@@ -0,0 +1,163 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { useTheme, useTailwind } from './hooks';
+import { Theme } from './Theme.types';
+import { ThemeProvider } from './ThemeProvider';
+
+// Test component that uses both hooks to verify provider works
+const TestConsumerComponent = ({ testId }: { testId: string }) => {
+  const theme = useTheme();
+  const tw = useTailwind();
+
+  // Test basic styling works
+  const styles = tw`bg-default text-default p-2`;
+
+  return (
+    <View testID={testId} style={styles}>
+      <Text testID={`${testId}-theme`}>{theme}</Text>
+      <Text testID={`${testId}-hasStyles`}>
+        {styles ? 'has-styles' : 'no-styles'}
+      </Text>
+    </View>
+  );
+};
+
+describe('ThemeProvider', () => {
+  it('provides light theme context correctly', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <TestConsumerComponent testId="light-test" />
+      </ThemeProvider>,
+    );
+
+    const themeText = getByTestId('light-test-theme');
+    const stylesText = getByTestId('light-test-hasStyles');
+
+    expect(themeText.props.children).toBe(Theme.Light);
+    expect(stylesText.props.children).toBe('has-styles');
+  });
+
+  it('provides dark theme context correctly', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={Theme.Dark}>
+        <TestConsumerComponent testId="dark-test" />
+      </ThemeProvider>,
+    );
+
+    const themeText = getByTestId('dark-test-theme');
+    const stylesText = getByTestId('dark-test-hasStyles');
+
+    expect(themeText.props.children).toBe(Theme.Dark);
+    expect(stylesText.props.children).toBe('has-styles');
+  });
+
+  it('updates context when theme prop changes', () => {
+    const { getByTestId, rerender } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <TestConsumerComponent testId="change-test" />
+      </ThemeProvider>,
+    );
+
+    // Initial state
+    expect(getByTestId('change-test-theme').props.children).toBe(Theme.Light);
+
+    // After theme change
+    rerender(
+      <ThemeProvider theme={Theme.Dark}>
+        <TestConsumerComponent testId="change-test" />
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('change-test-theme').props.children).toBe(Theme.Dark);
+  });
+
+  it('generates different tailwind instances for different themes', () => {
+    const { getByTestId: getLightTestId } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <TestConsumerComponent testId="light-instance" />
+      </ThemeProvider>,
+    );
+
+    const { getByTestId: getDarkTestId } = render(
+      <ThemeProvider theme={Theme.Dark}>
+        <TestConsumerComponent testId="dark-instance" />
+      </ThemeProvider>,
+    );
+
+    const lightView = getLightTestId('light-instance');
+    const darkView = getDarkTestId('dark-instance');
+
+    // Both should have styles but they should be different
+    expect(lightView.props.style).toBeDefined();
+    expect(darkView.props.style).toBeDefined();
+    expect(lightView.props.style).not.toStrictEqual(darkView.props.style);
+  });
+
+  it('supports nested providers with different themes', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <TestConsumerComponent testId="outer" />
+        <ThemeProvider theme={Theme.Dark}>
+          <TestConsumerComponent testId="inner" />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    const outerTheme = getByTestId('outer-theme');
+    const innerTheme = getByTestId('inner-theme');
+
+    expect(outerTheme.props.children).toBe(Theme.Light);
+    expect(innerTheme.props.children).toBe(Theme.Dark);
+  });
+
+  it('renders children correctly', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <View testID="child-view">
+          <Text testID="child-text">Test content</Text>
+        </View>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('child-view')).toBeDefined();
+    expect(getByTestId('child-text').props.children).toBe('Test content');
+  });
+
+  it('memoizes context value correctly to prevent unnecessary rerenders', () => {
+    let renderCount = 0;
+
+    const CountingComponent = () => {
+      renderCount += 1;
+      const theme = useTheme();
+      return <Text>{theme}</Text>;
+    };
+
+    const { rerender } = render(
+      <ThemeProvider theme={Theme.Light}>
+        <CountingComponent />
+      </ThemeProvider>,
+    );
+
+    const initialRenderCount = renderCount;
+
+    // Rerender with same theme - should not cause child to rerender
+    rerender(
+      <ThemeProvider theme={Theme.Light}>
+        <CountingComponent />
+      </ThemeProvider>,
+    );
+
+    expect(renderCount).toBe(initialRenderCount + 1); // Only one additional render for the rerender call
+
+    // Rerender with different theme - should cause child to rerender
+    rerender(
+      <ThemeProvider theme={Theme.Dark}>
+        <CountingComponent />
+      </ThemeProvider>,
+    );
+
+    expect(renderCount).toBe(initialRenderCount + 2); // One more render due to theme change
+  });
+});