-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding support for react-native styles as parameters for builders
- Loading branch information
1 parent
18095bd
commit a49d075
Showing
6 changed files
with
162 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,176 @@ | ||
| import { expect, assert } from 'chai' | ||
| import mock from 'mock-require' | ||
| import React, {Component as ReactComponent} from 'react' | ||
| import njsx from '../src/njsx.js' | ||
| import Rules from '../src/rules.js' | ||
|
|
||
| const {defineProperty} = Object | ||
| const {keys, assign, defineProperty} = Object | ||
|
|
||
| mock('react-native', { | ||
| StyleSheet: { | ||
| create: (styleDefinition) => keys(styleDefinition).reduce((acum, key) => assign(acum, {[key]: 1}), {}) | ||
| } | ||
| }) | ||
| const {StyleSheet} = require("../src/react-native.js") | ||
|
|
||
| describe('NJSX', () => { | ||
|
|
||
| describe('elements', () => { | ||
| describe('components', () => { | ||
| it('should be creatable from a type name', () => { | ||
| const element = njsx('foo')() | ||
| const component = njsx('foo')() | ||
|
|
||
| expect(element).to.deep.equal(<foo/>) | ||
| expect(component).to.deep.equal(<foo/>) | ||
| }) | ||
|
|
||
| it('should be creatable from a React component', () => { | ||
| class Component extends ReactComponent { render() { return <foo/> } } | ||
| const element = njsx(Component)() | ||
| const component = njsx(Component)() | ||
|
|
||
| expect(element).to.deep.equal(<Component/>) | ||
| expect(component).to.deep.equal(<Component/>) | ||
| }) | ||
|
|
||
| it('should be creatable from a React functional component', () => { | ||
| const FunctionalComponent = () => createReactElement('foo') | ||
| const element = njsx(FunctionalComponent)() | ||
| const component = njsx(FunctionalComponent)() | ||
|
|
||
| expect(element).to.deep.equal(<FunctionalComponent/>) | ||
| expect(component).to.deep.equal(<FunctionalComponent/>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing attributes as a hash', () => { | ||
| njsx.rules = [Rules.HASH_AS_ATRIBUTES] | ||
| const element = njsx('foo')({bar: 'baz'})() | ||
| const component = njsx('foo')({bar: 'baz'})() | ||
|
|
||
| expect(element).to.deep.equal(<foo bar='baz'/>) | ||
| expect(component).to.deep.equal(<foo bar='baz'/>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing a string representing a class name', () => { | ||
| njsx.rules = [Rules.STRING_AS_CLASS] | ||
| const element = njsx('foo')('.bar.baz')('.qux')() | ||
| const component = njsx('foo')('.bar.baz')('.qux')() | ||
|
|
||
| expect(element).to.deep.equal(<foo className="bar baz qux"/>) | ||
| expect(component).to.deep.equal(<foo className="bar baz qux"/>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing a string representing content', () => { | ||
| njsx.rules = [Rules.STRING_AS_CHILD] | ||
| const element = njsx('foo')('bar')() | ||
| const component = njsx('foo')('bar')() | ||
|
|
||
| expect(element).to.deep.equal(<foo>bar</foo>) | ||
| expect(component).to.deep.equal(<foo>bar</foo>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing a number representing content', () => { | ||
| njsx.rules = [Rules.NUMBER_AS_CHILD] | ||
| const element = njsx('foo')(5)() | ||
| const component = njsx('foo')(5)() | ||
|
|
||
| expect(element).to.deep.equal(<foo>5</foo>) | ||
| expect(component).to.deep.equal(<foo>5</foo>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing a boolean representing content', () => { | ||
| njsx.rules = [Rules.BOOLEAN_AS_CHILD] | ||
| const element = njsx('foo')(false)() | ||
| const component = njsx('foo')(false)() | ||
|
|
||
| expect(element).to.deep.equal(<foo>false</foo>) | ||
| expect(component).to.deep.equal(<foo>false</foo>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing other React elements as children', () => { | ||
| it('should be refinable by passing other React components as children', () => { | ||
| njsx.rules = [Rules.REACT_COMPONENT_AS_CHILD] | ||
| const element = njsx('foo')(<bar/>,<baz/>)() | ||
| const component = njsx('foo')(<bar/>,<baz/>)() | ||
|
|
||
| expect(element).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| expect(component).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing other NJSX elements as children', () => { | ||
| it('should be refinable by passing other NJSX components as children', () => { | ||
| njsx.rules = [Rules.NJSX_COMPONENT_AS_CHILD] | ||
| const element = njsx('foo')(njsx('bar'), njsx('baz'))() | ||
| const component = njsx('foo')(njsx('bar'), njsx('baz'))() | ||
|
|
||
| expect(element).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| expect(component).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| }) | ||
|
|
||
| it('should be refinable by passing an array of children', () => { | ||
| njsx.rules = [Rules.NJSX_COMPONENT_AS_CHILD] | ||
| const element = njsx('foo')([njsx('bar'), njsx('baz')])() | ||
| const component = njsx('foo')([njsx('bar'), njsx('baz')])() | ||
|
|
||
| expect(element).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| expect(component).to.deep.equal(<foo><bar/><baz/></foo>) | ||
| }) | ||
|
|
||
| it('should ignore null arguments', () => { | ||
| njsx.rules = [Rules.IGNORE_NULL] | ||
| const element = njsx('foo')(null, [null])() | ||
| const component = njsx('foo')(null, [null])() | ||
|
|
||
| expect(element).to.deep.equal(<foo/>) | ||
| expect(component).to.deep.equal(<foo/>) | ||
| }) | ||
|
|
||
| it('should ignore undefined arguments', () => { | ||
| njsx.rules = [Rules.IGNORE_UNDEFINED] | ||
| const element = njsx('foo')(undefined,[undefined])() | ||
| const component = njsx('foo')(undefined,[undefined])() | ||
|
|
||
| expect(element).to.deep.equal(<foo/>) | ||
| expect(component).to.deep.equal(<foo/>) | ||
| }) | ||
|
|
||
| it('should not be refinable by invalid arguments', () => { | ||
| const element = njsx('foo') | ||
| const component = njsx('foo') | ||
|
|
||
| expect(() => element((invalid) => 'argument')).to.throw(TypeError) | ||
| expect(() => component("unsupported argument")).to.throw(TypeError) | ||
| }) | ||
|
|
||
| it('should be refinable by dynamic messages if a handler is defined', () => { | ||
| njsx.dynamicSelectorHandler = Rules.STRING_AS_CLASS.apply | ||
| const element = njsx('foo').bar.baz.qux() | ||
| const component = njsx('foo').bar.baz.qux() | ||
|
|
||
| expect(element).to.deep.equal(<foo className="bar baz qux"/>) | ||
| expect(component).to.deep.equal(<foo className="bar baz qux"/>) | ||
| }) | ||
|
|
||
| it('should be refinable by property key accessing if a handler is defined', () => { | ||
| njsx.dynamicSelectorHandler = Rules.STRING_AS_CLASS.apply | ||
| const element = njsx('foo')['.bar']['baz qux']() | ||
| const component = njsx('foo')['.bar']['baz qux']() | ||
|
|
||
| expect(element).to.deep.equal(<foo className="bar baz qux"/>) | ||
| expect(component).to.deep.equal(<foo className="bar baz qux"/>) | ||
| }) | ||
|
|
||
| it('should not be refinable by dynamic messages if a handler is not defined', () => { | ||
| njsx.dynamicSelectorHandler = undefined | ||
| const element = njsx('foo').bar | ||
| const component = njsx('foo').bar | ||
|
|
||
| expect(element).to.deep.equal(undefined) | ||
| expect(component).to.deep.equal(undefined) | ||
| }) | ||
|
|
||
| it('should not be refinable by dynamic messages after the component is built', () => { | ||
| njsx.dynamicSelectorHandler = assert.fail | ||
| const element = njsx('foo')().bar | ||
| const component = njsx('foo')().bar | ||
| }) | ||
|
|
||
| describe('should be refinable by njsx styles when', () => { | ||
| const styleSheet = StyleSheet.create({style: {bar: "baz"} }) | ||
|
|
||
| it('no previous style is defined', () => { | ||
| njsx.rules = [Rules.STYLE_AS_STYLE] | ||
| const component = njsx('foo')(styleSheet.style)() | ||
|
|
||
| expect(component).to.deep.equal(<foo style={1}/>) | ||
| }) | ||
|
|
||
| it('style is already defined as array', () => { | ||
| njsx.rules = [Rules.STYLE_AS_STYLE, Rules.HASH_AS_ATRIBUTES] | ||
| const component = njsx('foo')({style: [5]})(styleSheet.style)() | ||
|
|
||
| expect(component).to.deep.equal(<foo style={[5,1]}/>) | ||
| }) | ||
|
|
||
| it('style is already defined as object', () => { | ||
| njsx.rules = [Rules.STYLE_AS_STYLE, Rules.HASH_AS_ATRIBUTES] | ||
| const component = njsx('foo')({style: {bar: "baz"}})(styleSheet.style)() | ||
|
|
||
| expect(component).to.deep.equal(<foo style={[{bar: "baz"}, 1]}/>) | ||
| }) | ||
|
|
||
| it('style is already defined as id', () => { | ||
| njsx.rules = [Rules.STYLE_AS_STYLE, Rules.HASH_AS_ATRIBUTES] | ||
| const component = njsx('foo')({style: 5})(styleSheet.style)() | ||
|
|
||
| expect(component).to.deep.equal(<foo style={[5,1]}/>) | ||
| }) | ||
|
|
||
| }) | ||
|
|
||
| }) | ||
|
|
||
| }) |