Chapter 9 Change Detection For Unit Testing

Chapter-8 Angular Jasmine SpyOn

• Jasmine Spies help  us to mock the execution of the method /  function.
• It’s a easy way to check a method was called or not, without leaving Subject Under Test(SUT).
• We can chain the spyOn method to get dummy return value using .and.returnvalue()
• spyOn can call the original function using .and.callThrough().

CSS - Margin, Border, Padding Properties

Chapter-7 TestBed and Component Fixture

Testing String and Array using jasmine matchers with Angular

1.Test Strings using matchers:
toBe
toEqual
toContain
toMatch

2. Difference between toBe & toEqual
3. Test Arrays using matchers:
toEqual
toContain
4. How to exclude test cases from execution.

Setup & Tear-down in Angular 8 unit testing

Setup - a test method beforeEach that will be executed before each unit test case.Tear Down - a test method afterEach that will be executed after each unit test case.

CSS box model

• Content box: The innermost box, where text and image are placed.
• Padding box: It is a space between the element content and border of the element.
• Border box: The border goes around the element content and padding.
• Margin box: It is the area around border of the element.
• The above properties have four edges “top, right, bottom, left”. 
• Whenever we set height and width of the element we set it only for element content of the element.
• To calculate the total area of the element we need calculate the area of element with margin, padding

Angular 8 Unit testing Chapter4 - Arrange-Act-Assert(AAA) Pattern

• AAA is common standard for writing the unit test cases.
• Arrange: It means Arrange everything to setup the unit test case, like creating the objects, initializing/mocking data etc..
• Act: Act on your unit test case, meaning execute necessary functionality/methods that needs to be unit tested.
• Assert: This part verifies the functionality/method that we are unit testing is giving the result as per expectation.

Writing First Test Case

Jasmine Karma Configuration With Angular

Jasmine Karma Configuration With Angular



https://youtu.be/sBZf4KH08yE

CSS Background properties | CSS Basic

Angular Jasmine Karma Introduction Chapter 1

Angular - Jasmine - Karma - Chapter 1

css Color Pickers | HTML Basics |

CSS Color Properties | CSS Basics | Hexadecimal values | Color Names | h...

CSSValues | Basics of CSS | Relative | Absolute | Predefined

Selector, Properties and Values | CSS Basics

CSS 3D Ribbons and Stitched Effect

We can create various effect with CSS. We can add new design style to the menu by using ribbons created using CSS. This artciel explains about two effects created using CSS

1. Stitch Effect
2. 3D Ribbon Effect

  Following is the HTML used for creating effects:

<div>
    <div class="stitched">&nbsp;</div>
</div>

There is one class used in above HTML  "stitched".

1. stitch Effect:

  Stitch effect can be created using CSS box-shadow and border style.
   To get the stitched effect keep the border style to dashed and use the box-shadow with x=0 y=0 and blur to zero as well.

.stitched {
position: relative;
    border:2px dashed #fff;
    background: #ff0030;
    width: 356px;
    height: 40px;
    margin: 30px 10px 10px 20px;
    line-height: 120px;
    text-align: center;                                                                       /*The box shadow x=0 y=0 blur=0 and the spread radius is 8px*/                            box-shadow: 0 0 0 8px #ff0030;
    -moz-box-shadow: 0 0 0 8px #ff0030;
    -webkit-box-shadow: 0 0 0 8px #ff0030;
    z-index: 10;
}

Following is the effect created using the above class:

2. Ribbon Effect:
     
           Ribbon effect can be created using :after and :before pseudo elements.
Following is the arrow created using :after class:

Following is the class used to create the arrow shown in the above image.

.stitched:after {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:0px solid transparent;
    border-left:14px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    left: -9px;
    background: transparent;
    z-index: -1;
}

Following is the arrow created using :before class:

Following is the class used to create the arrow shown in the above image.

.stitched:before {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:14px solid transparent;
    border-left:0px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    right: -9px;
    z-index: -1;
}

Following is the final effect created using .stitched , .stitched:after and .stitched:before.

Following is the Final code for the Stitched ribbon:



Following is another example for ribbon with stitched effect:

Adding Arrow to Menu

While working on the menu's. I wanted to add a new features of Arrow to the menus. To add a Arrow where a child menu is present with the "Parent Menu".
Following is the sample of what we are going to create:

The "Product" and "Services" menus are the ones with sub/child menu. To indicate that these menus are having the child menus arrows are displayed on right side of the menu.


Along with the parent menu "Product" first child menu "Product 1" is also having the arrow to indicate the arrow for multilevel sub-menu.

Now following is the HTML code for the menu:





Each level of menu is assigned a class for parent menu "parent_menu"  and for child menu "child_menu".
Another class is added for "Arrow" to the parent menus "has_child".

Following is the CSS code for creating and displaying the "Arrow" for the parent menu:
:after and :before pseudo classes are used to create the arrow.
For creating the arrow use the content property and set the position to "absolute".  Also note that to use only use the one property out of top, bottom, right, left and also use the margin property to set the proper position of the arrow.

• 
  
• .menucontainer li.has_child:after
• {
•     content: '';
•     position: absolute;
•     border: 7px solid transparent;
• /* This will set the direction of the arrow.*/
•     border-top: 7px solid white;
•     top: 34px;
•     margin-left: 5px;  
• }

Following is the hover effect for the arrow with menu.

• .menucontainer li.has_child:hover:after
• {
•     content: '';
•     position: absolute;
•     border: 7px solid transparent;
•     border-top: 7px solid black;
•     top: 34px;
•     margin-left: 5px;  
• }
• 
  

You can find the complete code on the jsFiddle: "Arrow to Menu"

CSS 3 Gradient

Gradient is a way of smooth image color transition from one color to other color. Now as of 2013 all the major browsers support the gradient. With support of the gradient we can have any number of combination of color using programming, unlike creating and deploying the images.
   Following are the type of gradients:
   1. Linear Gradient
   2. Radial  Gradient  
   3. Repeating Linear Gradient
   4. Repeating Radial Gradient  

When the gradients was introduced it was not supported so there are many prefixes used by different browser.

The gradient is used as the CSS <image>, so we can use the gradients with background property or background-image property.

1. linear-gradient

      The  linear gradient is defined by a line and the colors arranged by the line. Also each line has a color. The lines are perpendicular to the direction of the line.

          

Syntax:

linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

[angle] :
           The angle for the direction of the gradient can be decided by this.

to [side-or-corner] :
               It decides the starting point for the gradient. It has two attributes required, one decides the left or right horizontal line and thee other one decides the top or bottom vertical line. So it can be "to top" or "to bottom" or "to left bottom".

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.

Example:

Following example will be supported by version of those which support above syntax of the gradient


In the beginning the gradient property was not supported by the major browser and their syntax was not unified. Hence each browser had its own syntax, following is list of some browsers and their synatx:

Mozilla(From version 3.6 to 15.0)

-moz-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.

Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? : Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 11.1+ version, earlier version did not support the gradient.

-o-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9

   The internet explorer supported the browser using different syntax: 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

Or

-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

GradientType:  Can be 0 or 1.

But the above syntax supports only two colors for gradient.

IE 10

   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

IE11+

      For this version onward's syntax without prefix is used :

linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

Example With Browser Support:



   2. Radial  Gradient  

     The radial gradient is defined from a center point and transition of the colors from one to another happens in a circular manner.
Following is the syntax for radial gradient:

Syntax:
radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


<ending-shape> : 
              This can be circle or ellipse, it decides the shape of gradient either circle or ellipse.

<position> :
          This decides the center of the radial gradient. Default value for this is circle.

<size>:
          This decides the size of the ending shape. It has various values and defined as follow :

1. closest side :  The ending shape will be shaped at the closest side of the gradient center.
2. farthest side : The ending shape will be shaped at the farthest side of the gradient center.
3. closest corner: The ending shape will be sized so that it passes through the closest corner of gradient center.
4. farthest corner: The ending shape will be sized so that it passes through the farthest corner of gradient center.

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.


Like the linear gradient, there are different gradient syntax for the radial gradient. Following is the browser wise syntax for the radial gradient:

Mozilla(From version 3.6 to 15.0)

-moz-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.

Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? : Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ );

For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 12.1+ version, earlier version did not support the gradient.

-o-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9

   These versions of  internet explorer does not support radial gradient.

IE 10

   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )
(Consumer Preview version)

IE11+

      For this version onward's syntax without prefix is used :

radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

(Released version of IE 10 also supported above syntax)

Example With Browser Support:

   3. Repeating Linear Gradient

The repeating linear gradient is same as the linear gradient, only the colors are repeated in both the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

repeating-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);


Example:




  3. Repeating Radial Gradient

The repeating radial gradient is same as the linear gradient, only the colors are repeated in all the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

-repeating-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


Example: