How to mock $httpBackend in protractor

Some say this is not a good idea since end-to-end test should be genuinely END-TO-END, not END-TO-itself, ......whatever, I just need it.

My solution is based on this post, but I got 2 problems which screwed me good.
Working code as below
Note to myself, 2 things should be remembered

• The 3rd parameter of browser.addMockModule('mockHttp', addMockHttp, fakeHttpData)
• browser.removeMockModule() in afterEach()

The first problem was due to my intention to define fakeHttpData in outer scope of function addMockHttp().

I was doing this because I prefer a single place to hold my fake data and make it accessible globally throughout the file. Thus in later test body I can expect some result to be like

expect(result).toEqual(fakeHttpData.something)

instead of writing

expect(result).toEqual("is fake")

Yeah, I know the second one looks shorter, wait to see when something becomes a big object

Usually in javascript there is no problem addMockHttp() can see the exist of fakeHttpData, but protractor kept complaining about fakeHttpData not found.
It confused me a lot until I checked the reference of browser.addMockModule

Here is the mist, in the description of the 2nd parameter script:
Note that this will be executed in the browser context, so it cannot access variables from outside its scope.
Well that explains why, and thank god it offered the 3rd parameter to let in any additional arguments.

The second problem was that adding mockHttp module screws up all my other tests which don't need this mock.
Spent a while to find out that I simply need to remove it afterward, so

browser.removeMockModule('mockHttp');