how to fix Compiler option noEmitOnError not working with tsc in Typescript?

it is the best practice to use "noEmitOnError" option to prevent typescript compiler to generate the JavaScript file

however the config setting file does not work, when we execute the compiler command. such as the following

tsc myfile.ts 

the output is myfile.js. obviously the compiler did not pick the configuration from the config file. we have to run it expressively 

tsc --noEmitOnError myfile.ts

or force the compile to read from the tsconfig.json file

tsc -p ./tsconfig.json

how to access Azure Active Directory from other portals?

 we should all know that we can use Azure portal to access the Azure Active directory. after you log into the portal we can click on the Azure Active Directory from the left blade, or type " Azure Active Directory " in the search box to access Azure Active Directory features

However Microsoft also provide tow alternative ways to access the Azure Active Directory with same login credential as we use for azure portal.

here are the two web portals we can use to access Azure Directory.

https://admin.microsoft.com

https://myapps.microsoft.com 

how to fix "The files of the specified task cannot be accessed as the task state is still active" in az batch task file command execution?

when we run the az batch task file list to show all the task file in batch execution. we encounter the following error immediately.

 " The specified operation is not valid for the current state of the resource.
RequestId:bfad4b09-53a4-4a7f-b9a5-d54a630699d7
Time:2021-03-14T17:17:42.8558070Z
Reason: The files of the specified task cannot be accessed as the task state is still active"

afterwe try to az batch task file download, we got the same error.

actually we can solve this issue by requesting dedicated nodes manually on the portal for that specific batch account.

 here are the steps to reach our goal.

 1. go the batch account

 

 

 

 

  

2. click on the pools item on the blade to show the pools under this batch account

 

 

 

 

 3. click on the pool name that we created for batch action.

 

 

 

 

4.click on the nodes item on the blade.

 

 

5.click on the any node under the name column to view the contents in the node

6.click on the workitems folder to view the batch  job which is myjob that we created previously

7.click on myjob folder, then click on myjob1, and click on the task1 to show the content of task1.

8. click on the stardout.txt to show the task execution result.

now we can verify our batch process manually in the azure portal.

how to fix "Error from server (BadRequest): container "nodeapp" in pod "nodeapp" is waiting to start: trying and failing to pull image"?

 if you try to run the image from AKR(Azure Kubernetes Registry) with the following command in the Azure CLI

 kubectl run nodeapp \

  --image=mydanaksacr.azurecr.io/node:v1 \

  --port=8080

the output indicate that the pod was create. however when you check the pod. the result is below

danny@Azure:~/clouddrive$ kubectl get pods

NAME      READY   STATUS         RESTARTS   AGE

nodeapp   0/1     ErrImagePull   0          36s

after I check the log with kubectl logs on the pod 

danny@Azure:~/clouddrive$ kubectl logs nodeapp

Error from server (BadRequest): container "nodeapp" in pod "nodeapp" is waiting to start: image can't be pulled

the message indicates that the service principal does not have the right to pull the image from AKR

here is the solution to solve the issue. run the following command in the cli to grant the service principal to the acrpull role.

az role assignment create --assignee "<<service principal ID>>" --role acrpull --scope "<<AKR resource ID>>"

this is the specific example running in the development environment

 az role assignment create --assignee "34d6880e-bc51-416f-b250-b87904390d0c" --role acrpull --scope "/subscriptions/3f2c3687-9d93-45be-a8e0-b8ca6e4f5944/resourceGroups/MyResourceGroup/providers/Microsoft.ContainerRegistry/registries/myDanAksAcr"

how to fix " ReferenceError: fetch is not defined" in redux testing with nock and jest?

when i implemented a test a case against the API call to test the reducer, we can use NOCK to mock the API with JEST test run.

here is the sample code for the above test case.

import { createStore, applyMiddleware } from 'redux'

import thunk from 'redux-thunk'

import nock from 'nock'

import { fetchUser } from '../../src/actions'

import usersReducer from '../../src/reducers/users'

// global.fetch = require('node-fetch');

const middlewares = [ thunk ]

let store

beforeEach(() => {

  store = createStore(usersReducer, applyMiddleware(thunk))

})

afterEach(() => {

  nock.cleanAll()

})

test('initial state should be empty array (no users)', () => {

  expect(store.getState()).toEqual([])

})

test('fetchUser action should add user object to state', () => {

  const username = 'dan'

  const realname = 'Dan Deng'

  const userObj = { username:username, realname:realname }

  console.log(userObj)

  nock('http://localhost:8080/')

    .get(`/api/users/${username}`)

    .reply(200, userObj)

  expect.assertions(1)

  const action = fetchUser(username)

  return store.dispatch(action)

    .then(() =>

      expect(store.getState()).toContainEqual(userObj)

    )

})

however i ran the test case with JEST, the following error came immediately. since i use fetch function from fetch-node module.

 ● fetchUser action should add user object to state

    ReferenceError: fetch is not defined

      23 |     types:[FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE],
      24 |     promise: fetch(`http://localhost:8080/api/users/${username}`)
    > 25 |     .then(response=>response.json())
         |      ^
      26 | })
      27 |
      28 | export const createUser=(username, realname, password)=>thunkCreator({

      at fetchUser (src/actions/users.js:25:6)
      at Object.<anonymous> (_test_/reducers/users.test.js:88:18)

  ● fetchUser action should add user object to state

    expect.assertions(1)

    Expected one assertion to be called but received zero assertion calls.

      84 |     .reply(200, userObj)
      85 |
    > 86 |   expect.assertions(1)
         |          ^
      87 |
      88 |   const action = fetchUser(username)
      89 |   return store.dispatch(action)

      at Object.<anonymous> (_test_/reducers/users.test.js:86:10)

the fix is very easy, we just have to add the reference to fetch in the test file. the test case was passed and succeed.

 global.fetch = require('node-fetch');

how to use test object array contain element which match giving object?

 when we write a test case to verify that an object array contains specific object within JEST framework

we can use the following code to handle it .

let posts=[]

beforeAll(()=>{

    posts.push({title:'test', user:'dan'})

    posts.push({title:'hello world', user:'dan'})

})

test('test post exists',()=>{

    expect(posts).toEqual(

        expect.arrayContaining([

            expect.objectContaining({title: 'test'})

        ])

    )

})

how to quickly fix "future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:void(0)"

 when we implement a click event to trigger api call or dispatch an action in redux, we will like to use this simple syntax to handle it.

<a href="javascript:void(0)" onClick={clearFilter}>all posts</a>

we will see the following warming in the development tool windows

since React 16.9 update had deprecate the JavaScript URL, you can check out this link for more information

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

but the work around is quiet simple. we can fix it withe code below.

<a href="#" onClick={ev => {

            ev.preventDefault();

           clearFilter

            return false; // old browsers, may not be needed

            }}>all posts</a>