ngx-jsonapi-material

This is a library (Angular 6+) of components based on Angular material, which makes use of jsonapi to work. ## Online demo

You can test library on this online example 👌 ngx-jsonapi-material

Data is obtained from Json Api Playground server.

Usage

Just install, configure and learn with examples.

First of all, it's advisable to read Jsonapi specification. Understanding JsonApi documents structure is recommended.

Installation

yarn add ngx-jsonapi-material --save
# or npm if you wish...

Directives

JamFloatingFilters

Selector: jam-floating-filters

Simple floating filters

<jam-floating-filter [hasAdvancedFilters]="false">
    <ng-container class="jam-filter-header">
        your code...
    </ng-container>
</jam-floating-filter>

more info

Local Demo App

You can run JsonApi Demo App locally following the next steps:

git clone git@github.com:reyesoft/ngx-jsonapi-material.git
cd ngx-jsonapi-material
yarn
yarn serve

We use as backend Json Api Playground.

Running cypress test in console

yarn cy:run

Running cypress test in browser

yarn cy:open

Creating a test

Go to the following location cypress -> integration, and create a file with the extension .spec.ts. The file contains the following structure:

describe('ListBase', () => {
    before(() => {
        cy.disableScreenshot();
    });
    it('ListBase integrity test', () => {
        cy.spyAuthors();
        cy.visit('/#/authors?pageSize=10');
    })
});

Simulate backend response in cypress

Go to the following location cypress -> fixtures, and create a file with the extension .json. In it we will have the supposed response from the backend.

{
    "meta": {
        "page": 1,
        "resources_per_page": 10,
        "total_resources": 11
    },
    "data": [
        {
            "type": "authors",
            "id": "14",
            "attributes": {
                "name": "Anais Carroll",
                "birthplace": "Taiwan",
                "date_of_birth": "1986-08-12",
                "date_of_death": "2000-10-05"
            },
            "relationships": {
                "photos": {
                    "data": []
                },
                "books": {
                    "data": [
                        {
                            "type": "books",
                            "id": "23"
                        },
                        {
                            "type": "books",
                            "id": "49"
                        }
                    ]
                }
            },
            "links": {
                "self": "/authors/14"
            }
        }
    ]
}

Colaborate

Check Environment development file 😉.