Jasmine tests always failing in RxJS 7 when using toBeObservable() - rxjs

I've updated my dependencies and am now confronted with this error message:
DEPRECATION: The matcher factory for "toBeObservable" accepts custom equality testers, but this parameter will no longer be passed in a future release. See <https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#matchers-cet> for details.
Error: Expected $[0].notification to be a kind of Object, but was Notification({ kind: 'N', value: true, error: undefined, hasValue: true }).
at <Jasmine>
at toBeObservableComparer (node_modules/jasmine-marbles/es6/index.js:80:1)
at <Jasmine>
The test is very simple:
const expected = cold('a', {a: true});
expect(new BehaviorSubject(true)).toBeObservable(expected);
It might have to do something with the deprecation notice, but I'm just using toBeObservable() from latest version of the jasmine-marbles package and can't see a custom parameter. Also I don't understand why Notification isn't a kind of Object.
Versions:
rxjs: 7.5.2
jasmine-core: 4.0.0
jasmine-marbles: 0.8.4
karma-jasmine: 4.0.1
The script works on rxjs 6.6.7.

I think the new documentation shows the new expectObservable:
expectObservable(new BehaviorSubject(true).asObservable()).toBe(expected);
Check out the documentation here: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/testing/marble-testing.md#marble-syntax

jasmine-marbles version => 0.9.0 supports RxJS 7.x
https://www.npmjs.com/package/jasmine-marbles

Related

upgrading project to Angular 8

I've followed the instruction from https://update.angular.io/#7.2:8.0l3 and deleted the rxjs-compat from my project. From now I have this error during ng serve:
../node_modules/rxjs/Rx.d.ts:1:15 - error TS2307: Cannot find module 'rxjs-compat'.
export * from 'rxjs-compat';
also I have
Property 'catch' does not exist on type 'Observable<HttpEvent<any>>'.
.catch((err: HttpErrorResponse) => {
What should I do to fix this? I have "primeng": "9.1.2",
"rxjs": "6.6.0" in my package.json
Hello mario the reason is quite simple, there is no more catch operator in rxjs the new one is called catchError if you go in the rxjs changelog here
and scroll to 5.5.0 beta you will see the introduction of the new pipebale operators where the catchError is introduced as the successor of catch, where catch was later on removed/deprecated (version 6-7). The case is the same for the do and tap operator.
The thing that I will suggest is to go here at rxjs docs and read the full migration guide, it is very helpful.

Docusaurus v2 and GraphQL Playground integration

I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully

uirouter/angular-hybrid AoT build bootstrapModuleFactory promise injector fails to get UIRouter

I've got a sample uirouter/angular-hybrid app, successfully built with #ngtools/webpack AngularCompiler plugin and running. I've updated the main.aot.ts boot function to use bootstrapModuleFactory and can get the injector from the platformRef available in the promise success handler. But injector.get(UIRouter) fails with "Cannot read property 'config' of null."
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then((platformRef) => {
const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
function startUIRouter() {
urlService.listen();
urlService.sync();
}
platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);
});
I confirmed that the injector.get(NgZone) will succeed and injector.get(UIRouter) will fail. I tried moving the call to injector.get(UIRouter) inside the NgZone run func without success.
I also tried moving the upgrade.bootstrap call into the promise success function above to ensure it had booted first, without fixing the problem.
A simple angularjs component is rendering fine, so the boot process seems to be succeeding, except for not being able to call the listen() and sync() functions on the UIRouter.urlService.
I also confirmed the development config and non-aot production config, for this same sample app, do not have this problem and seem to be working fine.
Using versions:
uirouter/angular-hybrid v6.0.2
angular packages at v7.1.4, but also failed with 6.0.0 (which is the angular version in the package.json in the docs for uirouter/angular-hybrid v6.0.2)
Thanks for any ideas.
The problem was that the config object I was passing to UIRouterUpgradeModule.forRoot was being imported from a file that was using a default export of the object, and the object had a reference to a config function that was not being exported. This combination hid the problem during the build, and resulted in the symptom at runtime of not having the UIRouter object available to the injector.
Replacing the default export with a named export triggered the AOT compiler to complain about the non-exported function reference. Additionally exporting the function then allowed a successful build, a happy injector, and a successful runtime boot.

Jasmine Ajax request.respondWith is not working

I am using Jasmine 2.0.4 with jasmine-ajax 2.99.0 to try to test a module that calls a web service.
The code is the following:
define(['models/data-service', 'models/admin', 'models/contest', 'models/participant', 'ContestResponse'],
function(dataService, admin, Contest, Participant, ContestResponse){
"use strict";
describe("Data Service Tests", function(){
var onSuccess, onFailure, request;
describe("on new contests loaded", function(){
beforeEach(function(){
jasmine.Ajax.install();
});
it("calls onSuccess with an array of Contests", function(){
onSuccess = jasmine.createSpy('onSuccess');
onFailure = jasmine.createSpy('onFailure');
dataService.getContests()
.done(onSuccess)
.fail(onFailure);
request = jasmine.Ajax.requests.mostRecent();
expect(request.url).toBe('/api/contest');
expect(request.method).toBe('GET');
request.respondWith(ContestResponse.getResponse().contest.success);
expect(onSuccess).toHaveBeenCalled();
var successArgs = onSuccess.calls.mostRecent().args[0];
expect(successArgs.length).toEqual(4);
});
});
});
});
Everything works until it reaches the line where I try to call the respondWith method of the request. Even though I can see that the object returned from the jasmine.Ajax.requests.mostRecent() is of type FakeXMLHttpRequest, respondWidth is marked as undefined. Any Ideas?
Thanks
[UPDATE]
I have been able to narrow it down. It looks like the mock-ajax.js file is not being loaded. I have the karma-jasmine-ajax node module installed and have added jasmine-ajax to the frameworks array of the karma.conf.js like this:
frameworks: ['jasmine-ajax','jasmine', 'requirejs'],
is there anything else I need to do?
[RANT] no wonder why so few developers are running unit test with javascript [/RANT]
I faced the same issue, it looks like the latest version doesn't have respondWith method.
Downgrading the jasmine-ajax plugin made the trick:
npm install karma-jasmine-ajax#0.1.1
Now I can see respondWith is working fine.
This appears to have been a transitional problem in one of the jasmine-ajax libraries. Upgrading to latest version (3.1.0 at the time of this writing) will fix your problem.
npm install jasmine-ajax
bower install jasmine-ajax
or
jasmine-ajax on github
If you can't change jasmine-ajax versions due to conflicts (ie: you use Jasmine 1.3 or something else that has a dependency on a different version of jasmine-ajax), you can use: request.response instead of request.respondWith

zepto $.type() function

I'm currently trying to make the jquery tokeninput plugin zepto compatible.
according to the zepto documentation in version 1.0 there should be a function called $.type() (i'm using the latest 1.0rc)
but whenever i try to call this function i recieve the following error:
Object function (a,b){return w.init(a,b)} has no method 'type'
has someone has a quick answer/fix for that?
thx
in my case typeof() did the job for my needs.
since zepto is finally out in version 1.0 it has $.type support as well.

Resources