Why you should use onPush detection strategy - Part 2

In the previous part you saw that "onPush" change detection strategy option - used for prevent angular to run the checks in vain (when no change which can affect the component made). Only when the thing that changed is the value passed to the component through input - the change detection will run, and reflect the change at HTML.

export class AppComponent  {
  name = 'Angular';
  onChangeNameClick() { 
    this.name = 'Angular the awesome'; // change the "name" which passed to inner
  }
}

Objects

But what about values which are not strings (like in example), but objects?
Lets say we have inner component that suppose to display selected product, When user clicks the "selectProduct" button - the new product should be displayed at inner component:

export class AppComponent  {
  product = {
    model: 'GSX1000R',
    manufacturer: 'Suzuki'
  };
  selectProductClick() { // nothing will change at inner component
    this.product.model = 'Z900';
    this.product.manufacturer = 'Kawassaki';
  }
}

As you can see - nothing changes at inner component after the click. But why?
The answer is - that angular consider the the input value changed only when object reference changed. In other words - the change will apply only when input value will receive new different object:

  selectProductCorrectClick() { // will display the change because reference changed
    this.product = {
      model: 'Z900',
      manufacturer: 'Kawassaki'
    }   
  }

Why you should use onPush detection strategy - Part 1

Angular is powerful framework. It gives you various options to write your components.
The simple one - using "Default" change detection strategy:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner></inner>
   </div>
  `
  // changeDetection not specified - means Default Strategy
})
export class AppComponent  {
  name = 'Angular';
}

"Default Strategy" means angular run change detection check every time he thinks that change is possible. (Changes may come as result of mouse or key events or Ajax requests)
That makes sense - every possibility of change requires careful check if HTML views need to be updated too.
But what if you have a dumb component that gets its data through the "input" property:

@Component({
  selector: 'inner',
  template: `
    
{{name}}
    {{somePublicMethod()}} 
  `
})
export class InnerComponent  {
  @Input() name;
  somePublicMethod() {
    console.log('change check runned'); // will run twice no matter what kind of event happened
  }
}

"somePublicMethod" will run twice no matter what kind of event happened (which is bad in terms of performance)
So, is there any way you can "help" angular not to do any unneeded checks inside this component unless the input data changed?
That is where "onPush" strategy appears very handful:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner [name]="name"></inner>
    <button (click)="onlyClick()">click to trigger some event</button>
   </div>
  `
})
export class AppComponent  {
  name = 'Angular';

  onlyClick() {
    // nothing changed, but mouse event "click" triggered
  }
}

...

@Component({
  selector: 'inner',
  template: `
    
{{name}}
  `,
  // onPush is used!!!
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InnerComponent  {
  @Input() name;
}

No change check will be run at "inner" component or its children in response to some event. The only case when check will run - is only when "name" property changed Read more in the next part

How to connect to gcp cluster from local terminal

Firstly you need Kubernetes installed on your machine

brew install kubernetes-cli

Open the cloud console UI, and navigate to "clusters" tab.

You will present with popup that displays command with exact parameters of the specific cluster

Note: if you already logged with different account - run "gcloud auth revoke --all"
and then: "gcloud auth login"

Now you can run the command in the console. It may happen you will be prompted with chrome asking for cloud credentials. After you get logged in, you can verify that you are in the correct cluster by, for example, checking for pods status:

kubectl get pods

How to unit test python

Lets start with something simple:
Lets say you have one method called "simple_inc" at module my:

# my.py
def simple_inc(x):   
    return x + 1 

Lets build some test using pytest framework:

# test_my.py
from my import simple_inc
def test_answer():
    res = simple_inc(3)
    assert res == 4

So far so good

Sub Method

Now lets change the code, so the "simple_inc" will use some sub method, lets call it "simple_child_inc":

def simple_inc(x):   
    return simple_child_inc(x)

def simple_child_inc(x):   
    return x + 1   

Now the test still should run as before, without any problems...

Mocking Sub Method

Since we want to stick to single responsibility principle, it will be better not to call the "real" submethod but its mock :

@mock.patch('my.simple_child_inc') 
def test_answer(mock_simple_child_inc):
    mock_simple_child_inc.return_value = 4 // correct val
    res = simple_inc(3)
    assert res == 4

If we change the correct value of the mock - the test will fail

@mock.patch('my.simple_child_inc') 
def test_answer(mock_simple_child_inc):
    mock_simple_child_inc.return_value = 4 // INCORRECT val
    res = simple_inc(3)
    assert res == 4

Async Method

Lets say the method we are testing is asynchronous:

import asyncio
async def inc(x):
    await asyncio.sleep(0.1)
    return x + 1

So the test should be modified in following way:

import asyncio

@pytest.mark.asyncio
async def test_answer():
    res = await inc(3)
    assert res == 4

The following test will also work if we make "inc" method to call "child_inc" (which is also async)

import asyncio

async def inc(x):
    res = await child_inc(x)
    return res

async def child_inc(x):
    await asyncio.sleep(0.1)
    return x + 1

Mocking Async Method

All we have to do is add asynctest package:

pip install asynctest

Now can change test:

import asynctest


@pytest.mark.asyncio
@asynctest.patch('my.child_inc')
async def test_answer(mock_child_inc):
    mock_child_inc.return_value = 4
    res = await inc(3)
    assert res == 4

What is decorator

After a lot of time working with angular, I suddenly found myself wondering: What exactly this syntax (like here):

@Component({
  selector: 'kinder-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  showFeddback = false;
}

(which I use so lot of times) means?
In other words: what is exactly decorator?
According to angularjs docs:
Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code Which means: after you create some class - the decorator adds some additional functionality to it.
I decided to to experiment with creating my own decorator (to see how it feels to write decorator):

import { Component } from '@angular/core';
export function Vasia() {  
     console.log(`hhh!!!!`)   
}
@Vasia()
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Beautifull Girl';
}

Now each time you refresh the page - you will see 'stay with me!!!!' output in the console