diff --git a/typeahead/typeahead-tests.ts b/typeahead/typeahead-tests.ts index 3c8495f860..bc8d734c30 100644 --- a/typeahead/typeahead-tests.ts +++ b/typeahead/typeahead-tests.ts @@ -4,7 +4,6 @@ // // Examples from http://twitter.github.com/typeahead.js/examples // -declare var Hogan: string; var substringMatcher = function (strs: any) { return function findMatches(q: any, cb: any) { @@ -24,11 +23,11 @@ var substringMatcher = function (strs: any) { // JavaScript object, refer to typeahead docs for more info matches.push({ value: str }); } -}); + }); cb(matches); - }; -}; + } +} var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', @@ -41,18 +40,234 @@ var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; -$('#the-basics .typeahead').typeahead({ - hint: true, - highlight: true, - minLength: 1 -}, -{ - name: 'states', - displayKey: 'value', - source: substringMatcher(states) -}); -module valueTest { +function test_method_names() { + $('#the-basics .typeahead').typeahead('destroy'); + $('#the-basics .typeahead').typeahead('open'); + $('#the-basics .typeahead').typeahead('close'); + $('#the-basics .typeahead').typeahead('val'); + $('#the-basics .typeahead').typeahead('val', 'test value'); +} + + +function test_options() { + + var dataSets: Twitter.Typeahead.Dataset[] = []; + + function with_empty_options() { + $('#the-basics .typeahead').typeahead({}, dataSets); + } + + function with_hint_option() { + $('#the-basics .typeahead').typeahead({ hint: true }, dataSets); + } + + function with_highlight_option() { + $('#the-basics .typeahead').typeahead({ highlight: true }, dataSets); + } + + function with_minLength_option() { + $('#the-basics .typeahead').typeahead({ minLength: 1 }, dataSets); + } + + function with_all_options() { + $('#the-basics .typeahead').typeahead({ + hint: true, + highlight: true, + minLength: 1 + }, + dataSets + ); + } +} + +function test_datasets_array() { + + var options: Twitter.Typeahead.Options = {}; + + function with_only_source() { + $('#the-basics .typeahead').typeahead(options, [{ + source: substringMatcher(states) + }]); + } + + function with_name_option() { + + $('#the-basics .typeahead').typeahead(options, [{ + name: 'states', + source: substringMatcher(states), + }]); + } + + function with_displayKey_option() { + $('#the-basics .typeahead').typeahead(options, [{ + displayKey: 'value', + source: substringMatcher(states) + }] + ); + } + + function with_templates_option() { + $('#the-basics .typeahead').typeahead(options, [{ + templates: {}, + source: substringMatcher(states) + }] + ); + } + + function with_all_options() { + $('#the-basics .typeahead').typeahead(options, [{ + name: 'states', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + }] + ); + } + + function with_multiple_datasets() { + $('#the-basics .typeahead').typeahead(options, [ + { + name: 'states', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + }, + { + name: 'states alternative', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + } + ]); + } +} + + +function test_datasets_objects() { + + var options: Twitter.Typeahead.Options = {}; + + function with_only_source() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states) + }); + } + + function with_name_option() { + + $('#the-basics .typeahead').typeahead(options, { + name: 'states', + source: substringMatcher(states), + }); + } + + function with_displayKey_option() { + $('#the-basics .typeahead').typeahead(options, + { + displayKey: 'value', + source: substringMatcher(states) + } + ); + } + + function with_templates_option() { + $('#the-basics .typeahead').typeahead(options, + { + templates: {}, + source: substringMatcher(states) + } + ); + } + + function with_all_options() { + $('#the-basics .typeahead').typeahead(options, + { + name: 'states', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + } + ); + } + + function with_multiple_objects() { + $('#the-basics .typeahead').typeahead(options, + { + name: 'states', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + }, + { + name: 'states alternative', + displayKey: 'value', + templates: {}, + source: substringMatcher(states) + } + ); + } +} + +function test_dataset_templates() { + + var options: Twitter.Typeahead.Options = {}; + + function with_no_options() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: {} + }); + } + + function with_empty_option() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: { empty: 'no results' } + }); + } + + function with_footer_option() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: { footer: 'custom footer' } + }); + } + + function with_header_option() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: { header: 'custom header' } + }); + } + + function with_suggestion_option() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: { + suggestion: function(context) { + return context.name; + } + } + }); + } + + function with_all_options() { + $('#the-basics .typeahead').typeahead(options, { + source: substringMatcher(states), + templates: { + empty: 'no results', + footer: 'custom footer', + header: 'custom header', + suggestion: function(context) { + return context.name; + } + } + }); + } +} + +function test_value() { var value: string = $('foo').typeahead('val'); $('foo').typeahead('val', value); } \ No newline at end of file diff --git a/typeahead/typeahead.d.ts b/typeahead/typeahead.d.ts index f847d3634d..28c6b0f3a1 100644 --- a/typeahead/typeahead.d.ts +++ b/typeahead/typeahead.d.ts @@ -8,7 +8,7 @@ interface JQuery { /** - * Destroys previously initialized typeaheads. This entails reverting + * Destroys previously initialized typeaheads. This entails reverting * DOM modifications and removing event handlers. * * @constructor @@ -17,7 +17,7 @@ interface JQuery { typeahead(methodName: 'destroy'): JQuery; /** - * Opens the dropdown menu of typeahead. Note that being open does not mean that the menu is visible. + * Opens the dropdown menu of typeahead. Note that being open does not mean that the menu is visible. * The menu is only visible when it is open and has content. * * @constructor @@ -68,7 +68,7 @@ interface JQuery { * @param query The query to be set in case method 'val' is used. */ typeahead(methodName: string, query: string): JQuery; - + /** * Accomodates specifying options such as hint and highlight. * This is in correspondence to the examples mentioned in http://twitter.github.io/typeahead.js/examples/ @@ -92,38 +92,38 @@ interface JQuery { declare module Twitter.Typeahead { /** - * A dataset is an object that defines a set of data that hydrates + * A dataset is an object that defines a set of data that hydrates * suggestions. Typeaheads can be backed by multiple datasets. - * Given a query, a typeahead instance will inspect its backing + * Given a query, a typeahead instance will inspect its backing * datasets and display relevant suggestions to the end-user. */ interface Dataset { /** - * The backing data source for suggestions. - * Expected to be a function with the signature (query, cb). - * It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set. - * cb can be invoked synchronously or asynchronously. - * + * The backing data source for suggestions. + * Expected to be a function with the signature (query, cb). + * It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set. + * cb can be invoked synchronously or asynchronously. + * */ source: (query: string, cb: (result: any) => void) => void; - /** - * The name of the dataset. - * This will be appended to tt-dataset- to form the class name of the containing DOM element. - * Must only consist of underscores, dashes, letters (a-z), and numbers. + /** + * The name of the dataset. + * This will be appended to tt-dataset- to form the class name of the containing DOM element. + * Must only consist of underscores, dashes, letters (a-z), and numbers. * Defaults to a random number. */ name?: string; /** - * For a given suggestion object, determines the string representation of it. - * This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. + * For a given suggestion object, determines the string representation of it. + * This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. * Defaults to value. */ displayKey?: string; /** - * A hash of templates to be used when rendering the dataset. + * A hash of templates to be used when rendering the dataset. * Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string. */ templates?: Templates; @@ -133,45 +133,45 @@ declare module Twitter.Typeahead { interface Templates { /** - * Rendered when 0 suggestions are available for the given query. - * Can be either a HTML string or a precompiled template. + * Rendered when 0 suggestions are available for the given query. + * Can be either a HTML string or a precompiled template. * If it's a precompiled template, the passed in context will contain query */ empty?: string; /** * Rendered at the bottom of the dataset. - * Can be either a HTML string or a precompiled template. + * Can be either a HTML string or a precompiled template. * If it's a precompiled template, the passed in context will contain query and isEmpty. */ footer?: string; /** - * Rendered at the top of the dataset. - * Can be either a HTML string or a precompiled template. + * Rendered at the top of the dataset. + * Can be either a HTML string or a precompiled template. * If it's a precompiled template, the passed in context will contain query and isEmpty. */ header?: string; /** - * Used to render a single suggestion. - * If set, this has to be a precompiled template. - * The associated suggestion object will serve as the context. + * Used to render a single suggestion. + * If set, this has to be a precompiled template. + * The associated suggestion object will serve as the context. * Defaults to the value of displayKey wrapped in a p tag i.e.
{{value}}
. */ suggestion?: (datum: any) => string; } - + /** * When initializing a typeahead, there are a number of options you can configure. */ interface Options { /** - * highlight: If true, when suggestions are rendered, + * highlight: If true, when suggestions are rendered, * pattern matches for the current query in text nodes will be wrapped in a strong element. - * Defaults to false. + * Defaults to false. */ highlight?: boolean; @@ -186,6 +186,7 @@ declare module Twitter.Typeahead { minLength?: number; } } + declare module Bloodhound { interface BloodhoundOptions