Story: Autosuggest - Githubissues

As a user, I would like to have suggestions appear when I type in the search box

ESTIMATE 8

Acceptance Criteria


Background:
  Given "language" is set to "en"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User is able to see autosuggested items when typing 3 or more characters into the search box and has selected "Starts With"
Given user is on landing page for the selected Dictionary
  Then “Starts with” is selected by default 
    And search bar is displayed below introductory text 
    And search bar contains a placeholder text “Enter keywords or phrases” 
  When user types "cancer" in the search bar
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  Then highlighting of the text entered appears in the autosuggest field (only highlight if it starts with using the first word)

Background
  Given "language" is set to "es"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User is able to see autosuggested items when typing 3 or more characters into the search box and has selected "Empieza con"
Given user is on landing page for the selected Dictionary
  Then "Empieza con" is selected by default 
    And search bar is displayed below introductory text 
    And search bar contains a placeholder text "Escriba frase o palabra clave"
 When user types "metastásico" in the search bar
    Then Autosuggest appears after user types in 3 or more characters 
  And highlighting of the text entered appears in the autosuggest field (only highlight if it starts with using the first word) 
  When user selects autosuggested term
  Then term is populated into the search bar
  When user submits their search clicking the "Buscar" button
  Then search is executed
  And URL contains selected term

Background:
  Given "language" is set to "en"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User is able to see autosuggested items when typing 3 or more characters into the search box and has selected the Contains option
  Given user is on landing page for the selected Dictionary
  When user selects “Contains” option
  Then search bar is displayed below introductory text 
    And search bar contains a placeholder text "Enter keywords or phrases"
  When user types "Breast Cancer" in the search bar
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  Then highlighting of the text entered appears in the autosuggest field (highlight any place of word, rather than beginning of word/phrase) 
  When user selects autosuggested term
  Then term is populated into the search bar
   When user submits their search clicking the "Search" button
  Then search is executed 
And URL contains selected term

Background
  Given "language" is set to "es"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User is able to see autosuggested items when typing 3 or more characters into the search box and has selected the Contains option in Spanish
   Given user is on landing page for the selected Dictionary
  When user selects “Contiene” option
  Then search bar is displayed below introductory text 
    And search bar contains a placeholder text “Escriba frase o palabra clave" 
 When user types "metasta" in the search bar
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  Then highlighting of the text entered appears in the autosuggest field (highlight any place of word, rather than beginning of word/phrase) 
  When user selects autosuggested term
  Then term is populated into the search bar
  When user submits their search clicking the "Buscar" button
  Then search is executed 
  And URL contains selected term

 Given "language" is set to "en"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User can execute search by clicking Search button without selecting an option from autocomplete
 Given user is on landing page for the selected Dictionary
  When user types "cancer"  in the search bar 
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  Then highlighting of the text entered appears in the autosuggest field (only highlight if it starts 
  with using the first word) 
  When user submits their search clicking the "Search" button
 Then search is executed
And URL contains searched term

 Given "language" is set to "en"
  And "dictionaryName" is set to "Cancer.gov"

Scenario: User can execute search by clicking Search button without selecting an option from autocomplete
 Given user is on landing page for the selected Dictionary
    And user selects "Contains" option
  When user types "cancer"  in the search bar 
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  Then highlighting of the text entered appears in the autosuggest field 
When user submits their search clicking the "Search" button
  Then Search is executed 
And URL contains searched term

Scenario: As a user, I would like to see an option to search when I am viewing the definition for a term
  Given the user is viewing the definition with the pretty url "metastatic"
  Then the page title is "metastatic"
    And the pronunciation text "(meh-tuh-STA-tik)" appears on the page
    And the definition text "Having to do with metastasis, which is the spread of cancer from the primary site (place where it started) to other places in the body." appears on the page
And there should be a CGOV Image at position 1 with the following
         | src     | https://nci-media-dev.cancer.gov/pdq/media/images/764135-571.jpg                                                                                                                                                                                                                                 |
         | caption | Metastasis. In metastasis, cancer cells break away from where they first formed (primary cancer), travel through the blood or lymph system, and form new tumors (metastatic tumors) in other parts of the body. The metastatic tumor is the same type of cancer as the primary tumor.            |
         | href    | https://nci-media-dev.cancer.gov/pdq/media/images/764135.jpg                                                                                                                                                                                                                                     |
         | alt     | Metastasis; drawing shows primary cancer that has spread from the colon to other parts of the body (the liver and the lung). An inset shows cancer cells spreading from the primary cancer, through the blood and lymph system, to another part of the body where a metastatic tumor has formed. |
And a video is displayed with the following
         | video_id | fQwar_-QdiQ                                                                                                                                                                                                                                                                    |
         | title    | Metastasis: How Cancer Spreads                                                                                                                                                                                                                                                 |
         | caption  | Many cancer deaths are caused when cancer moves from the original tumor and spreads to other tissues and organs. This is called metastatic cancer. This animation shows how cancer cells travel from the place in the body where they first formed to other parts of the body. |
  Then heading "Search NCI's Dictionary of Cancer Terms" appears
  Then search options for "Starts with" and "Contains" appears
  Then "keywords" search box appears
  Then search button appears beside search box with "Search"
  Then "Browse:" appears with A-Z List of Links beside it
  When user types "Breast Cancer" in the search bar
  Then placeholder text disappears  
    And Autosuggest appears after user types in 3 or more characters 
  When user selects autosuggested term
  Then term is populated into the search bar
   When user submits their search clicking the "Buscar" button
  Then search is executed 
And URL contains selected term

Background:
  Given "language" is set to "es"

Scenario: As a user, I would like to see an option to search when I am viewing the definition for a term in Spanish
  Given the user is viewing the definition with the pretty url "cancer-terminal"
 Then the page title is "cáncer terminal"
     And the pronunciation text does not appear on the page
     And the definition text "Cáncer que no se puede curar y que es mortal. También se llama cáncer en estadio terminal." appears on the page
 Then there is a heading on the page with "Más información"
        And there is an resource item with the following link and text
            | https://www.cancer.gov/espanol/cancer/cancer-avanzado/opciones-de-cuidado/hoja-informativa-cuidado | Los cuidados al final de la vida de personas con cáncer                                    |
            | https://www.cancer.gov/espanol/cancer/cancer-avanzado/planes/etapa-final-pdq                       | Planificar la transición para la atención del cáncer avanzado en la etapa final de la vida |
  Then heading "Buscar en el Diccionario de cáncer" appears
   And "keywords" search box appears
    And search button appears beside search box with "Buscar"
    And "Ojear:" appears with A-Z List of Links beside it
When user types "meta" in the search bar
   When user submits their search clicking the "Buscar" button
  Then search is executed 
And URL contains searched term

Resources:

Notes

Since we will have multiple titles based on whichever dictionary is being viewed, and Spanish is complicated we will need to make it so that we pass in the text above the search bar to the initialization of the app.

Solution

Prerequisites

[x] Basic Term Page view has been built (#15)
[x] Basic Search Box has been built (#76)
[x] A-Z list has been built (#76)
[x] Starts With and Contains buttons have been built (first round - no autosuggest) (#76)

Tasks

[ ] Add Autosuggest component #128
[ ] Invoke autosuggest call from Search component
[ ] Update Search component test
[ ] Integrate autosuggest into Search component
[x] Write automated tests

Technical Notes

More notes, or technical nuances/direction

Resources:

Feature: https://tracker.nci.nih.gov/browse/CGOVWCMS-30

Notes

This should work for both English and Spanish dictionaries

Solution

Prerequisites

required dependency for identifying the problem, scope and then solution for this issue
[ ] Basic Search Function (#14)

Tasks

[ ] Short Task Description - Issue #9999
[ ] Short Task Description - Issue #9999

Technical Notes

More notes, or technical nuances/direction

NCIOCPL / glossary-app

Story: Autosuggest #17

As a user, I would like to have suggestions appear when I type in the search box

Acceptance Criteria

Resources:

Notes

Since we will have multiple titles based on whichever dictionary is being viewed, and Spanish is complicated we will need to make it so that we pass in the text above the search bar to the initialization of the app.

Solution

Prerequisites

Tasks

Technical Notes

Resources:

Notes

Solution

Prerequisites

Tasks

Technical Notes