> git clone https://github.com/testcodingskill/receipe-app.git
> cd recipe-app
> npm install
> ng serve
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
Below are the E2E test scenarios are covered:
Given the Recipe Book App is opened
When the page title is available
✓ Should display the browser title as "RecipeApp"
When the page header navigation is shown
✓ Should display title as "Recipe Book"
✓ Should display "Recipes" link
✓ Should display "Shopping List" link
✓ Should active/highlighted link text be "Recipes"
When the page sub header section is shown
✓ Should display "New Recipe" Button
✓ Should display "New Recipe" Button is disabled
✓ Should display information panel with text "Please select a recipe from the list"
When the recipes list is shown
✓ Should display 5 Recipes
When Recipes with image, title and description is displayed
✓ Item #1 - Should display recipe title as Chinese Chicken
✓ Item #1 - Should display description title as Chinese Chicken with sweet and sour sauce
✓ Item #1 - Should display image 636d8d6cfbf1862e5ad5f89571c55430.jpg
✓ Item #2 - Should display recipe title as Sausage Casserole
✓ Item #2 - Should display description title as Sausage Casserole with onion gravy
✓ Item #2 - Should display image Italian-Sausage.jpg
✓ Item #3 - Should display recipe title as Taco Meat Recipe
✓ Item #3 - Should display description title as Taco with minced beef and onion
✓ Item #3 - Should display image taco-meat-leftovers-recipes
✓ Item #4 - Should display recipe title as Egg delight
✓ Item #4 - Should display description title as Lightly toasted wraps with fresh eggs
✓ Item #4 - Should display image dinner-recipes-under-300-calories
✓ Item #5 - Should display recipe title as Fried EggPlant
✓ Item #5 - Should display description title as Eggplant daked with cheese
✓ Item #5 - Should display image maxresdefault.jpg
When click on the Recipe Item from the list
✓ Item #1 - Should display recipe title as Chinese Chicken
✓ Item #1 - Should display recipe description
for Chinese Chicken as Chinese Chicken with sweet and sour sauce
✓ Item #1 - Should display recipe for Chinese Chicken Image as 636d8d6cfbf1862e5ad5f89571c55430.jpg
✓ Item #1 - Should display Action Button for Chinese Chicken as "Manage Recipes"
✓ Item #1 - Should display recipe ingredient
for Chinese Chicken as 4 Chicken Portions,1 Chinese spices
✓ Item #1 - Should display recipe ingredient
for Chinese Chicken as Add to shopping List,Edit Recipe,Delete Recipe
✓ Item #2 - Should display recipe title as Sausage Casserole
✓ Item #2 - Should display recipe description
for Sausage Casserole as Sausage Casserole with onion gravy
✓ Item #2 - Should display recipe for Sausage Casserole Image as Italian-Sausage.jpg
✓ Item #2 - Should display Action Button for Sausage Casserole as "Manage Recipes"
✓ Item #2 - Should display recipe ingredient
for Sausage Casserole as 6 Sausages,2 onions
✓ Item #2 - Should display recipe ingredient
for Sausage Casserole as Add to shopping List,Edit Recipe,Delete Recipe
✓ Item #3 - Should display recipe title as Taco Meat Recipe
✓ Item #3 - Should display recipe description
for Taco Meat Recipe as Taco with minced beef and onion
✓ Item #3 - Should display recipe for Taco Meat Recipe Image as taco-meat-leftovers-recipes
✓ Item #3 - Should display Action Button for Taco Meat Recipe as "Manage Recipes"
✓ Item #3 - Should display recipe ingredient
for Taco Meat Recipe as 2 Minced Beef,2 onions
✓ Item #3 - Should display recipe ingredient
for Taco Meat Recipe as Add to shopping List,Edit Recipe,Delete Recipe
✓ Item #4 - Should display recipe title as Egg delight
✓ Item #4 - Should display recipe description
for Egg delight as Lightly toasted wraps with fresh eggs
✓ Item #4 - Should display recipe for Egg delight Image as dinner-recipes-under-300-calories
✓ Item #4 - Should display Action Button for Egg delight as "Manage Recipes"
✓ Item #4 - Should display recipe ingredient
for Egg delight as 6 Eggs,2 Wraps,1 Cheese
✓ Item #4 - Should display recipe ingredient
for Egg delight as Add to shopping List,Edit Recipe,Delete Recipe
✓ Item #5 - Should display recipe title as Fried EggPlant
✓ Item #5 - Should display recipe description
for Fried EggPlant as Eggplant daked with cheese
✓ Item #5 - Should display recipe for Fried EggPlant Image as maxresdefault.jpg
✓ Item #5 - Should display Action Button for Fried EggPlant as "Manage Recipes"
✓ Item #5 - Should display recipe ingredient
for Fried EggPlant as 6 Aubergine,2 Cheese
✓ Item #5 - Should display recipe ingredient
for Fried EggPlant as Add to shopping List,Edit Recipe,Delete Recipe
When a recipe is added to the shopping list
✓ Should active/highlighted link text be "Shopping List" on the banner/navigation header
✓ Should display name input field
✓ Should display amount input field
✓ Should "Add" Button is disabled
✓ Should "Clear" Button is enabled
✓ Should display the ingredients of the selected recipe
When a ingredient from the shopping list is selected
✓ Should display the selected ingredient name in name input control
✓ Should display the selected ingredient Amount in number input control
✓ Should display update and delete button
When the selected ingredient's name/amount is updated
✓ Should update the list with the new value of the ingredient
✓ Should update the list with the new edited value of the ingredient
When the clear button is clicked upon elected ingredient's name/amount
✓ Should clear the value from the name and amount input control
When the selected ingredient's name/amount is deleted
✓ Should remove the ingredient from the list
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.