Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding this library to an Angular 2 project using Jasmine #59

Closed
MiguelAngel82 opened this issue Aug 30, 2016 · 6 comments
Closed

Adding this library to an Angular 2 project using Jasmine #59

MiguelAngel82 opened this issue Aug 30, 2016 · 6 comments
Labels
Type: TypeScript

Comments

@MiguelAngel82
Copy link

MiguelAngel82 commented Aug 30, 2016 •
edited
Loading

Hi all!

I think this is not an issue but can be an improvement in the doc.

I'm developing an Angular 2 RC5 app with Jasmine and I'm trying to load this library.

What I've done is:

In a unit-tests.html file I've included the following:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Ng App Unit Tests</title>
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
    <!-- #1. Polyfills -->
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <!-- #2. Zone.js dependencies -->
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/zone.js/dist/async-test.js"></script>
    <script src="node_modules/zone.js/dist/fake-async-test.js"></script>
    <!-- #3. Add specs dependencies -->
    <script src="app/treeNode.spec.ts"></script>
    <script src="app/template.spec.ts"></script>
    <script src="app/services/tree.side.service.spec.ts"></script>
    <script src="app/services/tree.service.spec.ts"></script>
    <!-- #4. Add Jasmine dependencies -->
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
    <script src="node_modules/jasmine-expect/dist/jasmine-matchers.js"></script>
[...]

And then, I've created a Spec file, like this:

describe('Service: TreeService', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                {provide: TreeService, useClass: TreeService},
                [...]
            ]
        })
    });

    it('get nodes',
        inject(
            [TreeService], fakeAsync((service: TreeService, backend: MockBackend) => {
                let res: TreeNode[];
                service.provider = '/test/api/treeNodes';
                service.getNodes();
                service.nodes.subscribe((response) => {
                    res = response as TreeNode[];
                });
                tick(500);
                expect(res).toBeArray();
                expect(res).toBeNonEmptyArray();
                expect(res.length).toBeGreaterThan(0);
            })));
});

But when I run the app, with npm test this error occurs:

app/services/tree.service.spec.ts(39,29): error TS2339: Property 'toBeArray' does not exist on type 'Matchers'.
app/services/tree.service.spec.ts(40,29): error TS2339: Property 'toBeNonEmptyArray' does not exist on type 'Matchers'.

So I don't know how to import this matcher inside the Spec file.

Any help is appreciate ;)

Thanks!

[EDIT]
As I mentioned, I believe this is not an issue, because I finally solve this problem. I've missed some important thing to do, considering I'm using TypeScript:

typings install dt~jasmine-expect --save-dev -DG

With this, a globalDevDependencies is added in file typings.json and this library is available to use.

I think that the documentation is great and very useful, but maybe it could be improve with a section explain how to use with TypeScript.

Thanks a lot!
@JamieMason
Copy link
Owner

JamieMason commented Aug 31, 2016 via email

@MiguelAngel82
Copy link
Author

I've added the resolution in the EDIT section of my previous comment:

I've missed some important thing to do, considering I'm using TypeScript:

typings install dt~jasmine-expect --save-dev -DG

With this, a globalDevDependencies is added in file typings.json and this library is available to use.

Is needed to add this resolution in any other section? I think, this is the unique thing to do, for me it works, but I'm not an Angular expert. So maybe something more is needed or another way to do.

@aaronbroad
Copy link

Also interested in current typings for this library. The ones Definitely Typed appear to be out of date. (Many libraries are including them in the NPM package now instead, which is better because it help ensure the version of the typings matches the library's API).

I'm using it in an Angular 2 project (using the current angular cli, which incorporates Karma for running tests). The matchers I've tried work great, but throw linting errors since typings are not present.

@JamieMason
Copy link
Owner

I've yet to use TypeScript @aaronbroad but if someone were to pull request how to include the typings as part of this project I'd be happy to keep them up to date from there on.

I see the Definitely Typed ones are here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jasmine-expect/jasmine-expect.d.ts.

@aaronbroad
Copy link

Ah, the ones I found were more out of date (v0.2.1):
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/jasmine-matchers/index.d.ts

I have not published types to npm before, but best I can tell it involves adding a types property to package.json that includes the path to the declaration file, something like:

"types": "./jasmine-matchers.d.ts"

The file you referenced looks closer to the current API. I'll submit a pull request reflecting this version and perhaps you could take a look and see which matchers are missing?

@JamieMason
Copy link
Owner

JamieMason commented Sep 29, 2016 via email

@aaronbroad aaronbroad mentioned this issue Sep 29, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: TypeScript
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add TypeScript declarations for typing aaronbroad/Jasmine-Matchers
3 participants
@JamieMason @MiguelAngel82 @aaronbroad