Type Ahead Demo

[TomMakes]

Tom the dev wants to build a library of reference components which he can use for future projects.

The Type Ahead, an input field that will suggest items from a fetched list, is one he wants.

The Type Ahead will:

• Be developed in the style of Test Driven Development.
• Use a material input component
• Include a drop down list which Tom can navigate using a keyboard or mouse.
• Include data-qa tags for easy targeting by UI tests.
• Fetch data from a service.

[TomMakes]

Breakdown of Work

• [x] Tests to check if a mat-form-field, input, and mat-autocomplete are rendered.
• [x] Create type-ahead with mat-form-field, input, and mat-autocomplete.
• [ ] Test to check if given list of options are rendered as mat-options.
• [ ] Test to check if typing certain words into the input displays certain options and not others.
• [ ] Add a input to type-ahead-input component which accepts an array of key value pairs which are used as options.
• [ ] Test to ensure type-ahead isn't rendered, and a mat-spinner is displayed when dataToDisplay is still being fetched.
• [ ] Add input for dataFetchFunc which will grab the data to display.
• [ ] Add input for dataKeyToDisplay
• [ ] Add input for dataKeyToStore
• [ ] Test to see if a data refresh will display updated options in the type ahead.
• [ ] Add an input for refreshData$ observable which a parents can use to tell the type ahead when to refresh the options it displays.
• [ ] Test to see if label with class input-label is rendered if an inputLabel is passed in as an input.
• [ ] Add an input inputLabel which is displayed above the type ahead, telling the user what the purpose of the field is.
• [ ] Test that a formControl can have it's value updated if it's passed in as an input.
• [ ] Add an input control that will bind a formControl to the value of the input element.
• [ ] Test that typing in no value for the provided formControl will render mat-errors, if the formControl requires a value.
• [ ] Test that typing in an invalid value for the provided formControl will render mat-errors.
• [ ] Add mat-error's to type ahead, which are displayed if a formControl value is required, or the value provided is invalid for the formControl.
• [ ] Test that the type-ahead component renders with the given data-qa tag.
• [ ] Add an input for dataQaUID which will be used to create the data-qa tag for the component.