From c8441284757695374cf9cdc429bbc85772f7b806 Mon Sep 17 00:00:00 2001
From: Ain Sal <ain@abcd.sa>
Date: Sat, 7 Jul 2018 13:35:41 +0300
Subject: [PATCH] Split example test

---
 test/Example.js      | 83 ++++++++++++++++++++++++++++++++++++++++++++
 test/example.test.js | 73 ++------------------------------------
 2 files changed, 85 insertions(+), 71 deletions(-)
 create mode 100644 test/Example.js

diff --git a/test/Example.js b/test/Example.js
new file mode 100644
index 0000000..902fd12
--- /dev/null
+++ b/test/Example.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { ScrollView, TouchableHighlight, View } from 'react-native';
+
+import s from '../src';
+
+// dom
+// s.View = s('div');
+// s.Text = s('p');
+// s.Touchable = s('button');
+
+// const View = 'div';
+// const TouchableHighlight = 'button';
+// const ScrollView = 'div';
+
+const RedBox = s(View)({ height: 40, width: 40, backgroundColor: 'red' });
+
+const Headline = s.Text({ fontSize: 28 });
+
+const Button = s.Touchable({
+  height: 40,
+  width: 40,
+  backgroundColor: 'green'
+});
+
+const BlueBox = s.View({ height: 40, width: 40, backgroundColor: 'blue' });
+
+const Subtitle = s.Text(props => ({
+  padding: props.padded ? 10 : 0,
+  backgroundColor: 'red'
+}));
+
+const Title = s.Text({ fontSize: 20 });
+
+const BoldTitle = Title.extend({ fontWeight: 'bold' });
+
+const RedBoldTitle = BoldTitle.extend({ color: 'green' });
+
+const OneLiner = s.Text({ color: 'blue' }).attrs({ numberOfLines: 1 });
+
+const HighlightedButton = Button.withComponent(TouchableHighlight);
+
+const ButtonText = s.Text({ color: 'green' });
+
+const ButtonContainer = s.Touchable({ flex: 1 });
+
+const AnotherButton = ButtonContainer.withChild(ButtonText);
+
+export default class Example extends React.PureComponent {
+  container = React.createRef();
+
+  componentDidMount() {
+    if (!this.container.current) alert('ref is not working');
+  }
+
+  render() {
+    return (
+      <Container backgroundColor="#f5fcff" ref={this.container}>
+        <RedBox />
+        <Headline>Hello world</Headline>
+        <Button />
+        <BlueBox />
+        <Subtitle>Hello world</Subtitle>
+        <Subtitle padded>Hello world</Subtitle>
+        <Title>Hello world</Title>
+        <BoldTitle>Hello world</BoldTitle>
+        <RedBoldTitle>Hello world</RedBoldTitle>
+        <OneLiner>{'Hello world '.repeat(5)}</OneLiner>
+        <HighlightedButton onPress={() => null}>
+          <RedBox />
+        </HighlightedButton>
+        <AnotherButton>BUTTON</AnotherButton>
+      </Container>
+    );
+  }
+}
+
+const Container = s(ScrollView, { name: 'Container', multi: true })({
+  style: ({ backgroundColor }) => ({ backgroundColor }),
+  contentContainerStyle: { flex: 1, paddingTop: 20 }
+});
+
+Container.defaultProps = { backgroundColor: '#000' };
diff --git a/test/example.test.js b/test/example.test.js
index 557032a..e20e22d 100644
--- a/test/example.test.js
+++ b/test/example.test.js
@@ -2,79 +2,10 @@ import React from 'react';
 
 import { create as r } from 'react-test-renderer';
 
-import { ScrollView, TouchableHighlight, View } from 'react-native';
-
-import s from '../src';
-
-const RedBox = s(View)({ height: 40, width: 40, backgroundColor: 'red' });
-
-const Headline = s.Text({ fontSize: 28 });
-
-const Button = s.Touchable({
-  height: 40,
-  width: 40,
-  backgroundColor: 'green'
-});
-
-const BlueBox = s.View({ height: 40, width: 40, backgroundColor: 'blue' });
-
-const Subtitle = s.Text(props => ({
-  padding: props.padded ? 10 : 0,
-  backgroundColor: 'red'
-}));
-
-const Title = s.Text({ fontSize: 20 });
-const BoldTitle = Title.extend({ fontWeight: 'bold' });
-const RedBoldTitle = BoldTitle.extend({ color: 'green' });
-
-const OneLiner = s.Text({ color: 'blue' }).attrs({ numberOfLines: 1 });
-
-const HighlightedButton = Button.withComponent(TouchableHighlight);
-
-const ButtonText = s.Text({ color: 'green' });
-const ButtonContainer = s.Touchable({ flex: 1 });
-const AnotherButton = ButtonContainer.withChild(ButtonText);
-
-class App extends React.PureComponent {
-  container = React.createRef();
-
-  componentDidMount() {
-    this.container.current.setNativeProps({ foo: 123 });
-  }
-
-  render() {
-    return (
-      <Container backgroundColor="#f5fcff" ref={this.container}>
-        <RedBox />
-        <Headline>Hello world</Headline>
-        <Button />
-        <BlueBox />
-        <Subtitle>Hello world</Subtitle>
-        <Subtitle padded>Hello world</Subtitle>
-        <Title>Hello world</Title>
-        <BoldTitle>Hello world</BoldTitle>
-        <RedBoldTitle>Hello world</RedBoldTitle>
-        <OneLiner>{'Hello world '.repeat(5)}</OneLiner>
-        <HighlightedButton onPress={() => null}>
-          <RedBox />
-        </HighlightedButton>
-        <AnotherButton>BUTTON</AnotherButton>
-      </Container>
-    );
-  }
-}
-
-const Container = s(ScrollView, { name: 'Container', multi: true })({
-  style: ({ backgroundColor }) => ({ backgroundColor }),
-  contentContainerStyle: { flex: 1, paddingTop: 20 }
-});
-
-Container.defaultProps = { backgroundColor: '#000' };
+import Example from './Example';
 
 it('works', () => {
-  const app = r(<App />).toJSON();
-
-  expect(Container.displayName).toBe('Container');
+  const app = r(<Example />).toJSON();
 
   expect(app).toMatchSnapshot();
 });