UNPKG

@ryusei/light

Version:

<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>

149 lines (132 loc) 4.66 kB
import { CATEGORY_ATTRIBUTE, CATEGORY_BRACKET, CATEGORY_CLASS, CATEGORY_DELIMITER, CATEGORY_FUNCTION, CATEGORY_IDENTIFIER, CATEGORY_KEYWORD, CATEGORY_LINEBREAK, CATEGORY_OPERATOR, CATEGORY_STRING, CATEGORY_TAG, } from '../../../constants/categories'; import { LINE_BREAK } from '../../../constants/characters'; describe( 'tsx', () => { test( 'can tokenize a function component with typings.', () => { const tsx = ` type Props = { message: string; } const Message: React.FC<Props> = props => { return <span style={ { margin: '1rem' } }>{ props.message }</span> } `; expect( tsx ).toBeTokenized( 'tsx', [ [ CATEGORY_KEYWORD, 'type' ], [ CATEGORY_CLASS, 'Props' ], [ CATEGORY_OPERATOR, '=' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_IDENTIFIER, 'message' ], [ CATEGORY_OPERATOR, ':' ], [ CATEGORY_KEYWORD, 'string' ], [ CATEGORY_DELIMITER, ';' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_LINEBREAK, LINE_BREAK ], [ CATEGORY_KEYWORD, 'const' ], [ CATEGORY_CLASS, 'Message' ], [ CATEGORY_OPERATOR, ':' ], [ CATEGORY_CLASS, 'React' ], [ CATEGORY_DELIMITER, '.' ], [ CATEGORY_CLASS, 'FC' ], [ CATEGORY_OPERATOR, '<' ], [ CATEGORY_CLASS, 'Props' ], [ CATEGORY_OPERATOR, '>' ], [ CATEGORY_OPERATOR, '=' ], [ CATEGORY_IDENTIFIER, 'props' ], [ CATEGORY_OPERATOR, '=>' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_KEYWORD, 'return' ], [ CATEGORY_BRACKET, '<' ], [ CATEGORY_TAG, 'span' ], [ CATEGORY_ATTRIBUTE, 'style' ], [ CATEGORY_DELIMITER, '=' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_IDENTIFIER, 'margin' ], [ CATEGORY_OPERATOR, ':' ], [ CATEGORY_STRING, "'1rem'" ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_BRACKET, '>' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_IDENTIFIER, 'props' ], [ CATEGORY_DELIMITER, '.' ], [ CATEGORY_IDENTIFIER, 'message' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_BRACKET, '<' ], [ CATEGORY_DELIMITER, '/' ], [ CATEGORY_TAG, 'span' ], [ CATEGORY_BRACKET, '>' ], [ CATEGORY_BRACKET, '}' ], ] ); } ); test( 'can tokenize a class component with typings.', () => { const tsx = ` class Component extends React.Component<{ message: string }, {}> { protected readonly items: Array<[string, string]> = []; render() { return <span>{ this.props.message }</span> } } `; expect( tsx ).toBeTokenized( 'tsx', [ [ CATEGORY_KEYWORD, 'class' ], [ CATEGORY_CLASS, 'Component' ], [ CATEGORY_KEYWORD, 'extends' ], [ CATEGORY_CLASS, 'React' ], [ CATEGORY_DELIMITER, '.' ], [ CATEGORY_CLASS, 'Component' ], [ CATEGORY_OPERATOR, '<' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_IDENTIFIER, 'message' ], [ CATEGORY_OPERATOR, ':' ], [ CATEGORY_KEYWORD, 'string' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_DELIMITER, ',' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_OPERATOR, '>' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_KEYWORD, 'protected' ], [ CATEGORY_KEYWORD, 'readonly' ], [ CATEGORY_IDENTIFIER, 'items' ], [ CATEGORY_OPERATOR, ':' ], [ CATEGORY_CLASS, 'Array' ], [ CATEGORY_OPERATOR, '<' ], [ CATEGORY_BRACKET, '[' ], [ CATEGORY_KEYWORD, 'string' ], [ CATEGORY_DELIMITER, ',' ], [ CATEGORY_KEYWORD, 'string' ], [ CATEGORY_BRACKET, ']' ], [ CATEGORY_OPERATOR, '>' ], [ CATEGORY_OPERATOR, '=' ], [ CATEGORY_BRACKET, '[' ], [ CATEGORY_BRACKET, ']' ], [ CATEGORY_DELIMITER, ';' ], [ CATEGORY_LINEBREAK, LINE_BREAK ], [ CATEGORY_FUNCTION, 'render' ], [ CATEGORY_BRACKET, '(' ], [ CATEGORY_BRACKET, ')' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_KEYWORD, 'return' ], [ CATEGORY_BRACKET, '<' ], [ CATEGORY_TAG, 'span' ], [ CATEGORY_BRACKET, '>' ], [ CATEGORY_BRACKET, '{' ], [ CATEGORY_KEYWORD, 'this' ], [ CATEGORY_DELIMITER, '.' ], [ CATEGORY_IDENTIFIER, 'props' ], [ CATEGORY_DELIMITER, '.' ], [ CATEGORY_IDENTIFIER, 'message' ], [ CATEGORY_BRACKET, '}' ], [ CATEGORY_BRACKET, '<' ], [ CATEGORY_DELIMITER, '/' ], [ CATEGORY_TAG, 'span' ], [ CATEGORY_BRACKET, '>' ], [ CATEGORY_BRACKET, '}' ], // render [ CATEGORY_BRACKET, '}' ], // Component ] ); } ); } );