test(theme): add style-provider change mappings/theme tests

akveo · Dec 10, 2018 · d75cacb · d75cacb
1 parent c97fa06
commit d75cacb
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 3 deletions.
diff --git a/src/framework/theme/tests/config.ts b/src/framework/theme/tests/config.ts
@@ -15,6 +15,13 @@ export const theme: ThemeType = {
   textColorTestSuccess: values.textSuccess,
 };
 
+export const themeInverse: ThemeType = {
+  backgroundColorTestDefault: values.backgroundDark,
+  backgroundColorTestDark: values.backgroundDefault,
+  textColorTestDefault: values.textDark,
+  textColorTestSuccess: values.textDefault,
+};
+
 export const mappings = {
   testDefault: [
     {
@@ -38,6 +45,16 @@ export const mappings = {
       token: 'textColorTestSuccess',
     },
   ],
+  testInverseDefault: [
+    {
+      parameter: 'backgroundColor',
+      token: 'backgroundColorTestDefault',
+    },
+    {
+      parameter: 'textColor',
+      token: 'textColorTestDefault',
+    },
+  ],
   mockBackground: [
     {
       parameter: 'backgroundColor',
@@ -59,6 +76,10 @@ export const variants = {
     name: 'success',
     mapping: mappings.testSuccess,
   },
+  testInverseDefault: {
+    name: 'default',
+    mapping: mappings.testInverseDefault,
+  },
   mockDefault: {
     name: 'default',
     mapping: mappings.mockBackground,
@@ -75,6 +96,15 @@ export const themeMappings = {
     ],
     variants: [variants.testDefault, variants.testDark, variants.testSuccess],
   },
+  testInverse: {
+    name: 'Test',
+    parameters: [
+      {
+        name: 'backgroundColor',
+      },
+    ],
+    variants: [variants.testInverseDefault],
+  },
   mock: {
     name: 'Mock',
     parameters: [

diff --git a/src/framework/theme/tests/style.spec.tsx b/src/framework/theme/tests/style.spec.tsx
@@ -1,10 +1,68 @@
 import React from 'react';
-import { View } from 'react-native';
-import { render } from 'react-native-testing-library';
-import { StyledComponentProps, StyleProvider, StyledComponent } from '@rk-kit/theme';
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  render,
+  fireEvent,
+  waitForElement,
+} from 'react-native-testing-library';
+import {
+  StyleProvider,
+  StyledComponent,
+  StyleProviderProps,
+  StyledComponentProps,
+  ThemeMappingType,
+  ThemeType,
+} from '../component';
+
 import * as config from './config';
 
 const styleConsumerTestId = '@style/consumer';
+const styleTouchableTestId = '@style/touchable';
+
+interface ComplexStyleProviderProps {
+  changedMappings: [ThemeMappingType];
+  changedTheme: ThemeType;
+}
+
+class ComplexStyleProvider extends React.Component<ComplexStyleProviderProps & StyleProviderProps> {
+
+  state = {
+    mappings: [],
+    theme: {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      mappings: this.props.mapping,
+      theme: this.props.theme,
+    };
+  }
+
+  onTouchablePress = () => {
+    this.setState({
+      mappings: this.props.changedMappings,
+      theme: this.props.changedTheme,
+    });
+  };
+
+  render() {
+    return (
+      <StyleProvider
+        mapping={this.state.mappings}
+        theme={this.state.theme}>
+        <TouchableOpacity
+          testID={styleTouchableTestId}
+          onPress={this.onTouchablePress}>
+          {this.props.children}
+        </TouchableOpacity>
+      </StyleProvider>
+    );
+  }
+}
 
 type TestComponentProps = any;
 
@@ -71,3 +129,36 @@ describe('@style: style consumer checks', () => {
   });
 
 });
+
+describe('@style: complex hierarchy checks', async () => {
+
+  it('@style: provides correct styles on mapping/theme change', async () => {
+    const StyleConsumer = StyledComponent(Test);
+
+    const component = render(
+      <ComplexStyleProvider
+        mapping={[config.themeMappings.test]}
+        theme={config.theme}
+        changedMappings={[config.themeMappings.testInverse]}
+        changedTheme={config.themeInverse}>
+        <StyleConsumer variant='default'/>
+      </ComplexStyleProvider>,
+    );
+    const styledComponent = component.getByTestId(styleConsumerTestId);
+
+    const { themedStyle: initialStyle } = styledComponent.props;
+    expect(initialStyle.backgroundColor).toEqual(config.theme.backgroundColorTestDefault);
+
+    const touchableComponent = component.getByTestId(styleTouchableTestId);
+
+    fireEvent.press(touchableComponent);
+
+    const styledComponentChanged = await waitForElement(() => {
+      return component.getByTestId(styleConsumerTestId);
+    });
+
+    const { themedStyle: changedStyle } = styledComponentChanged.props;
+    expect(changedStyle.backgroundColor).toEqual(config.themeInverse.backgroundColorTestDefault);
+  });
+
+});