DEV Community: Morcatko

Synctractor - Testing React/Vue apps with Protractor

Morcatko — Tue, 14 May 2019 12:49:57 +0000

Protractor

Probably every frontend developer have heard about Protractor. An end-to-end test framework for Angular. There are many other similar frameworks. However Protractor has one great feature when testing Angular application. It automatically waits for your website to be ready. It does not test your website in the middle of loading. Protractor knows when to wait and when to test.

Protractor can be used with any website. No matter if it is written in Angular, React, jQuery or a static html. To be able to do that you have to disable a synchronization in Protractor config file

onPrepare: function() {
    browser.ignoreSynchronization = true;
}

This disables waiting forcing Protractor to test as quickly as possible, even before your page fully loads and … most likely it will start failing.

The workaround is to do the waiting manually.

await browser.get("/login")
await $("#username").sendKeys("user");
await $("#password").sendKeys("password");
await $("#loginBUtton").click();
expect(await $("#message).getText()).toEqual("Welcome 'user'");

Code that is very clear and contains only user actions and expectations must be extended with waits, sleeps and timeouts

await browser.get("/login")
// Wait for page load by checking presence of login button
await browser.wait(EC.presenceOf($(#loginButton)));
await $("#username").sendKeys("user");
await $("#password").sendKeys("password");
await $("#loginButton").click();
// Wait for login call & new page render
await browser.sleep(2000);
expect(await $("#message).getText()).toEqual("Welcome 'user'");

This works but is very fragile. browser.sleep waits 2 seconds. In that time the user will be most likely logged in (or maybe not). The usual "fix" is to use very long sleeps, wait for some specific page elements, or markers that your app injects into a page when it is ready or similar workarounds.

You might be wondering how is it possible that it is so easy with Angular and so complicated with other frameworks. Well Protractor has actually two parts. One is the Protractor itself and the other piece is in Angular framework. These two parts communicate together during a running E2E test and ensure that everything works.

Synctractor

There comes synctractor. A library that allows you to use Protractor with non-Angular apps (react, vue) and rely on build-in synchronization and automatic waiting. It wraps asynchronous calls (fetch, setTimeout) and provides needed information for Protractor during a test run by emulating the Angular part.

It is easy to use

install it npm i -save synctractor
Add this to the very first line of your app entry point

    import * as synctractor from 'synctractor'; 
    synctractor.init();
    synctractor.monitorFetch();
    synctractor.monitorTimeout((_, t) => t !== 11000);

(see github for explanation of the magic number 11000)

That is it. You can remove browser.ignoreSynchronization = true; from your Protractor config file and all sleeps from your spec files. Protractor will communicate with your app and wait when it is needed.

Check React and Vue examples in a synctractor repo

PS: Currently only fetch is supported. AJAX calls are not monitored and Protractor won't wait for it.

Morcatko / synctractor

Angular-Protractor synchronization for non-angular apps (React, Vue, ...)

Synctractor

Angular-Protractor synchronization for non-angular apps (React, Vue, ...) Using this library you can get rid of almost all browser.sleeps and browser.waits in your protractor tests and relly on the same synchronization mechanism that is used by protract and angular.

Quick Setup

Install synctractor npm i --save synctractor
Remove ignoreSynchronization from protractor config as it is not needed anymore

Add this as the very first lines of your app entry point

import * as synctractor from 'synctractor';
synctractor.init();
synctractor.monitorFetch();
synctractor.monitorTimeout((_, t) => t !== 11000);

(see setTimeout details bellow for explanation of this magic number)

Manual Mode

There is automatic mode (synctractor.monitorXXX()) where you setup synctractor on your app entry point and that is all and there is also a manual mode, where you only initialize synctractor but you have to update calls all over your code. In automatic mode. you can get to unmonitored calls by synctractor.nativeXXX()

View on GitHub

JSON Merge Patch in ASP.NET Core

Morcatko — Mon, 04 Feb 2019 15:04:47 +0000

REST is well-known and commonly used pattern for creating web APIs. There are many HTTP verbs, but the most frequently used for building REST services are:

POST - create new item
GET - read item
PUT - update/replace item
DELETE - delete item

These methods are usually enough for a client to make all operations with a resource. But what if the client wants to change only particular properties of a resource?
For demonstration scenario lets say we have following object and we want to change the weapon property to "Knife"

{
    name: "James Bond"
    age: "45"
    weapon: "Gun"
}

Client code in pseudo-C#:

srcJson = GET {resourceUrl}
model = Json.Parse<UserModel>(srcJson)
model.weapon = "Knife"
dstJson = Json.Serialize(model)
PUT {resourceUrl}

That is the obvious solution - GET the resource, modify it and PUT it back to a server. Depending on your architecture and used languages this might have some drawbacks.
Imagine what happens when your UserModel is missing some properties. They will get lost and not send to the server in a PUT call. In case of default ASP.NET Core/C# setup they will be interpreted as a change to default values leading to a data loss.

JSON Patch

PUT call replaces whole object rather then performing partial resource update only. JSON Patch was created to modify the resource exactly as you want by sending list of operations rather then the object itself.

JSON PATCH request

[
 { op: "replace", path: "/weapon", value: "Knife" }
]

Implementation of JSON Patch is part of ASP.NET Core,
This structure allows full control of all properties of a resource including arrays, but also tends to be quite chatty and not very human writeable/readable.

JSON Merge Patch

If you are looking for something simpler then JSON Patch, there is other way.
JSON Merge Patch allows you to send changes in the form of original model. There is not a list of operations, but rather a patch object containing only changes that are merged with original resource on the server

JSON Merge patch

{
    weapon: "Knife"
}

And the result will be

{
    name: "James Bond"
    age: "45"
    weapon: "Knife"
}

JSON Merge patch is limited compared to full JSON Patch. You cannot remove a property (as missing property means "no change" rather then "remove") and also array operations are limited.

Morcatko.AspNetCore.JsonMergePatch

Using JSON Merge Patch in C# is not easy. C# is statically typed language and JSON Merge Patch format expects the exact opposite - it defines the operations by property (non)existence.
Morcatko.AspNetCore.JsonMergePatch is my implementation of JSON Merge Patch for ASP.NET Core. It is designed to fit nicely into ASP.NET Core architecture. Its API is same as API of full JSON patch. All you have to do to use it is to initialize it in your startup class and make an endpoint that accepts patch object.

// Startup.ConfigureServices
services
    .AddMvc()
    .AddJsonMergePatch();

// Controller
[HttpPatch]
[Consumes(JsonMergePatchDocument.ContentType)]
public void Patch(JsonMergePatchDocument<UserModel> patch)
{
    ...
    patch.ApplyTo(backendModel);
    ...
}

That is it.
Notice the Consumes attribute. You can use it together with full JSON Patch. Requests ContentType is a way how to distinquish betweens both versions.

In case you are using swagger to generate API documentation for your service you will need to add a DocumentFilter to your swagger configuration - see github for more details

Morcatko / Morcatko.AspNetCore.JsonMergePatch

JsonMergePatch support for ASP.NET Core

JSON Merge Patch support for ASP.NET Core

- Morcatko.AspNetCore.JsonMergePatch (ASP.NET Core 2.x)
- Morcatko.AspNetCore.JsonMergePatch.NewtonsoftJson (ASP.NET Core 3+)
- Morcatko.AspNetCore.JsonMergePatch.SystemText (ASP.NET Core 3+)
- Morcatko.AspNetCore.JsonMergePatch.Document (ASP.NET Core 3+ - base package)

JSON Merge Patch

RFC 7396
performs partial resource update similar to JSON Patch
Supports Swagger
netstandard 2.0

C# object:

var backendModel = new Model()
{
    Name = "James Bond"
    Age = "45"
    Weapon = "Gun"
}

JSON Merge Patch:

 var mergePatch = new object() {
   "Weapon": "Knife"
 }

Resulting C# object:

var newObject = new Model() {
  Name = "James Bond"
  Age = "45"
  Weapon = "Knife"
}

How to

See 2.1-testApp, 3.0 testApp or 6.0/testApp for sample

Install nuget (Use JsonMergePathch version same as your .NET) .

ASP.NET Core 2.x Morcatko.AspNetCore.JsonMergePatch
ASP.NET Core 3+ (Newtonsoft.Json)…

View on GitHub