fix(theme): theme change fix (#399)

akveo · May 22, 2019 · 318c038 · 318c038
1 parent cbe5056
commit 318c038
Show file tree

Hide file tree

Showing 10 changed files with 6,012 additions and 4,583 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/framework/theme/application/application.spec.tsx b/src/framework/theme/application/application.spec.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
 import {
+  View,
+  Button,
+} from 'react-native';
+import {
+  fireEvent,
   render,
   RenderAPI,
   shallow,
@@ -12,10 +17,39 @@ import {
 import {
   mapping,
   theme,
+  themeInverse,
 } from '../support/tests';
+import { ThemeType } from '@kitten/theme';
 
 describe('@app: application wrapper check', () => {
 
+  interface TestAppState {
+    theme: ThemeType;
+  }
+
+  class TestApp extends React.Component<any, TestAppState> {
+
+    public state: TestAppState = {
+      theme: theme,
+    };
+
+    private onSwitchTheme = (): void => {
+      this.setState({ theme: themeInverse });
+    };
+
+    public render(): React.ReactNode {
+      return (
+        <View>
+          <Button title='Switch Theme' onPress={this.onSwitchTheme}/>
+          <Mock
+            mapping={mapping}
+            theme={this.state.theme}
+          />
+        </View>
+      );
+    }
+  }
+
   const Mock = (props?: ApplicationProviderProps): React.ReactElement<ApplicationProviderProps> => {
     return (
       <ApplicationProvider {...props} />
@@ -49,4 +83,18 @@ describe('@app: application wrapper check', () => {
     expect(state.styles).toMatchSnapshot();
   });
 
+
+  it('* theme switching checks', () => {
+    const application: RenderAPI = render(<TestApp/>);
+    fireEvent(application.getByType(Button), 'press');
+    const { output } = shallow(application.getByType(ApplicationProvider));
+
+    const stringify = (obj: any): string => {
+      return JSON.stringify(obj);
+    };
+
+    // @ts-ignore just for theme prop changing
+    expect(stringify(output.props.theme)).toBe(JSON.stringify(themeInverse));
+  });
+
 });
diff --git a/src/framework/theme/application/applicationProvider.component.tsx b/src/framework/theme/application/applicationProvider.component.tsx
@@ -26,7 +26,6 @@ export type ApplicationProviderProps = ComponentProps & ThemeProviderProps;
 
 interface State {
   styles: ThemeStyleType;
-  theme: ThemeType;
 }
 
 /**
@@ -85,10 +84,7 @@ export class ApplicationProvider extends React.Component<ApplicationProviderProp
 
     const styles: ThemeStyleType = this.createStyles(mapping, customMapping);
 
-    this.state = {
-      styles,
-      theme,
-    };
+    this.state = { styles };
   }
 
   private createStyles = (mapping: SchemaType, custom: CustomSchemaType): ThemeStyleType => {
@@ -99,7 +95,9 @@ export class ApplicationProvider extends React.Component<ApplicationProviderProp
 
   public render(): React.ReactNode {
     return (
-      <StyleProvider {...this.state}>
+      <StyleProvider
+        theme={this.props.theme}
+        styles={this.state.styles}>
         <ModalPanel>
           {this.props.children}
         </ModalPanel>

diff --git a/src/framework/theme/modal/modalPanel.spec.tsx.snap b/src/framework/theme/modal/modalPanel.spec.tsx.snap
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@modal panel checks * close modal checking inner 1`] = `
-<Component
+<View
   style={
     Object {
       "flex": 1,
     }
   }
 >
-  <Component>
-    <Component>
+  <View>
+    <Text>
       Modal Panel Test
-    </Component>
-  </Component>
+    </Text>
+  </View>
   <Button
     onPress={[Function]}
     testID="@modal/show"
@@ -23,22 +23,22 @@ exports[`@modal panel checks * close modal checking inner 1`] = `
     testID="@modal/hide-outer"
     title="Hide Modal"
   />
-</Component>
+</View>
 `;
 
 exports[`@modal panel checks * close modal checking outer 1`] = `
-<Component
+<View
   style={
     Object {
       "flex": 1,
     }
   }
 >
-  <Component>
-    <Component>
+  <View>
+    <Text>
       Modal Panel Test
-    </Component>
-  </Component>
+    </Text>
+  </View>
   <Button
     onPress={[Function]}
     testID="@modal/show"
@@ -49,22 +49,22 @@ exports[`@modal panel checks * close modal checking outer 1`] = `
     testID="@modal/hide-outer"
     title="Hide Modal"
   />
-</Component>
+</View>
 `;
 
 exports[`@modal panel checks * modal panel render with props / children checking 1`] = `
-<Component
+<View
   style={
     Object {
       "flex": 1,
     }
   }
 >
-  <Component>
-    <Component>
+  <View>
+    <Text>
       Modal Panel Test
-    </Component>
-  </Component>
+    </Text>
+  </View>
   <Button
     onPress={[Function]}
     testID="@modal/show"
@@ -75,22 +75,22 @@ exports[`@modal panel checks * modal panel render with props / children checking
     testID="@modal/hide-outer"
     title="Hide Modal"
   />
-</Component>
+</View>
 `;
 
 exports[`@modal panel checks * modal panel renders properly 1`] = `
-<Component
+<View
   style={
     Object {
       "flex": 1,
     }
   }
 >
-  <Component>
-    <Component>
+  <View>
+    <Text>
       Modal Panel Test
-    </Component>
-  </Component>
+    </Text>
+  </View>
   <Button
     onPress={[Function]}
     testID="@modal/show"
@@ -101,7 +101,7 @@ exports[`@modal panel checks * modal panel renders properly 1`] = `
     testID="@modal/hide-outer"
     title="Hide Modal"
   />
-</Component>
+</View>
 `;
 
 exports[`@modal-service: service checks * unexpected branch cover 1`] = `

diff --git a/src/framework/theme/style/style.spec.tsx.snap b/src/framework/theme/style/style.spec.tsx.snap
@@ -133,7 +133,7 @@ Object {
   "selectBorderRadius": 12,
   "selectHeight": 24,
   "selectWidth": 24,
-  "textColor": "#000000",
+  "textColor": "#FFFFFF",
   "textFontSize": 16,
   "textFontWeight": "500",
   "textMarginLeft": 12,

diff --git a/src/framework/theme/support/tests/themeInverse.json b/src/framework/theme/support/tests/themeInverse.json
@@ -7,8 +7,8 @@
   "gray-dark": "#8992A3",
   "gray-highlight": "#EDF0F5",
   "pink-primary": "#FF3D71",
-  "text-primary": "#000000",
-  "text-primary-inverse": "#ffffff",
+  "text-primary": "#FFFFFF",
+  "text-primary-inverse": "#000000",
 
   "gray-100": "#f7f8fa",
   "gray-200": "#edf0f5",