Forem: CodepediaOrg

How to use test.each to avoid repetitive tests in jest

Adrian Matei — Fri, 10 Mar 2023 06:23:59 +0000

Jest is a popular JavaScript testing framework that provides an intuitive and powerful way to write automated tests for your codebase. One of the features that make Jest stand out is its test.each function, which enables you to write more concise and readable tests by parameterising test cases.

With test.each, you can define an array of test cases and run the same test function against each test case with the input arguments substituted. This feature is particularly useful when you need to test a function with a large number of input combinations, making your test code more maintainable and less verbose.

In this blog post, you'll see an example of how I refactored several repetitive tests to use test.each in Jest and simplify my test code.

The method under test

The method under test is setSpecialSearchTermsFilter, which extends the document search filter with special ones you can set on Codever:

let setSpecialSearchTermsFilter = function (docType, isPublic, userId, specialSearchFilters, filter) {
  let newFilter = {...filter};

  //one is not entitled to see private bookmarks of another user
  if ( specialSearchFilters.userId && (isPublic || specialSearchFilters.userId === userId) ) {
    newFilter.userId = specialSearchFilters.userId;
  }

  if ( specialSearchFilters.privateOnly && !isPublic ) { //
    newFilter.public = false;
  }

  if ( specialSearchFilters.site ) {
    if(docType === DocType.BOOKMARK) {
      newFilter.location = new RegExp(specialSearchFilters.site, 'i');
    } else if (docType === DocType.SNIPPET) {
      newFilter.sourceUrl = new RegExp(specialSearchFilters.site, 'i');//TODO when performance becomes an issue extract domains from URLs and make a direct comparison with the domain
    } else {
      throw new Error(`${docType} is not supported as document type`)
    }
  }

  return newFilter;
};

Before

In the snippet below you can see the tests before using jest test.each

describe('setSpecialSearchTermsFilter', () => {
  it('should set the userId filter when specialSearchTerms.userId is present and isPublic is true', () => {
    const filter = {};
    const specialSearchTerms = {userId: '123'};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.SNIPPET, true, '123', specialSearchTerms, filter);
    expect(result).toEqual({userId: '123'});
  });

  it('should set the userId filter when specialSearchTerms.userId is present and matches the userId', () => {
    const filter = {};
    const specialSearchTerms = {userId: '123'};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.SNIPPET, false, '123', specialSearchTerms, filter);
    expect(result).toEqual({userId: '123'});
  });

  it('should not set the userId filter when specialSearchTerms.userId is present and does not match the userId', () => {
    const filter = {};
    const specialSearchTerms = {userId: '456'};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.SNIPPET, false, '123', specialSearchTerms, filter);
    expect(result).toEqual({});
  });

  it('should set the public filter to false when specialSearchTerms.privateOnly is present', () => {
    const filter = {};
    const specialSearchTerms = {privateOnly: true};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.SNIPPET, false, '123', specialSearchTerms, filter);
    expect(result).toEqual({public: false});
  });

  it('should set the sourceUrl filter when specialSearchTerms.site is present for snippets', () => {
    const filter = {};
    const specialSearchTerms = {site: 'example.com'};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.SNIPPET, false, '123', specialSearchTerms, filter);
    expect(result).toEqual({sourceUrl: /example.com/i});
  });

  it('should set the location filter when specialSearchTerms.site is present for bookmarks', () => {
    const filter = {};
    const specialSearchTerms = {site: 'example.com'};
    const result = searchUtils.setSpecialSearchTermsFilter(DocType.BOOKMARK, false, '123', specialSearchTerms, filter);
    expect(result).toEqual({location: /example.com/i});
  });

  it('should set the location filter when specialSearchTerms.site is present for bookmarks', () => {
    const filter = {};
    const specialSearchTerms = {site: 'example.com'};
    expect(() => searchUtils.setSpecialSearchTermsFilter('unknown', false, '123', specialSearchTerms, filter)).toThrow(Error);
  });
});

After

By using test.each the test become more concise and more rapid to read

describe('setSpecialSearchTermsFilter', () => {
  describe('valid calls', () => {
    test.each([
      [{}, DocType.SNIPPET, {userId: '123'}, true, '123', {userId: '123'}],
      [{}, DocType.SNIPPET, {userId: '123'}, false, '123', {userId: '123'}],
      [{}, DocType.SNIPPET, {userId: '456'}, false, '123', {}],
      [{}, DocType.SNIPPET, {privateOnly: true}, false, '123', {public: false}],
      [{}, DocType.SNIPPET, {site: 'example.com'}, false, '123', {sourceUrl: /example.com/i}],
      [{}, DocType.BOOKMARK, {site: 'example.com'}, false, '123', {location: /example.com/i}]
    ])('should set the filter correctly', (filter, docType, specialSearchTerms, isPublic, userId, expected) => {
      const result = searchUtils.setSpecialSearchTermsFilter(docType, isPublic, userId, specialSearchTerms, filter);
      expect(result).toEqual(expected);
    });
  });

  it('should throw error when document type not known', () => {
    const filter = {};
    const specialSearchTerms = {site: 'example.com'};
    expect(() => searchUtils.setSpecialSearchTermsFilter('unknown', false, '123', specialSearchTerms, filter)).toThrow(Error);
  });
});

Let me explain a bit the signature of test.each(table)(name, fn, timeout):

test.each(table) is a Jest function that allows you to define a table of input data to use for parameterized tests.
table is an array of arrays, where each sub-array represents a set of input arguments for a test case. Each set of input arguments is used to run the same test function multiple times, with the input arguments substituted.
name is a string that describes the test case. It should be unique and descriptive enough to identify the test case in the test results.
fn is the test function that takes the input arguments from the table and performs assertions to check if the function under test behaves as expected with those inputs.
timeout is an optional parameter that specifies the timeout for the test case. If the test function takes longer than the specified timeout to complete, Jest will mark the test as failed.

Test names

Hold on, regarding the name you said it should be unique and descriptive to identify the test case in the test results...
You are right and the test.each docs offers several possibilities
when setting the name, but one of my favorite ways so far where I have the most control is with the following refactoring
of the test:

describe('setSpecialSearchTermsFilter', () => {
  describe('set the filter correctly', () => {
    test.each([
      [
        'should set the userId filter when specialSearchTerms.userId is present and isPublic is true',
        {}, DocType.SNIPPET, {userId: '123'}, true, '123', {userId: '123'}
      ],
      [
        'should set the userId filter when specialSearchTerms.userId is present and matches the userId',
        {}, DocType.SNIPPET, {userId: '123'}, false, '123', {userId: '123'}
      ],
      [
        'should not set the userId filter when specialSearchTerms.userId is present and does not match the userId',
        {}, DocType.SNIPPET, {userId: '456'}, false, '123', {}
      ],
      [
        'should set the public filter to false when specialSearchTerms.privateOnly is present',
        {}, DocType.SNIPPET, {privateOnly: true}, false, '123', {public: false}
      ],
      [
        'should set the sourceUrl filter when specialSearchTerms.site is present for snippets',
        {}, DocType.SNIPPET, {site: 'example.com'}, false, '123', {sourceUrl: /example.com/i}
      ],
      [
        'should set the location filter when specialSearchTerms.site is present for bookmarks',
        {}, DocType.BOOKMARK, {site: 'example.com'}, false, '123', {location: /example.com/i}
      ]
    ])('%s', (testName, filter, docType, specialSearchTerms, isPublic, userId, expected) => {
      const result = searchUtils.setSpecialSearchTermsFilter(docType, isPublic, userId, specialSearchTerms, filter);
      expect(result).toEqual(expected);
    });
  });

  it('should throw error when document type not known', () => {
    const filter = {};
    const specialSearchTerms = {site: 'example.com'};
    expect(() => searchUtils.setSpecialSearchTermsFilter('unknown', false, '123', specialSearchTerms, filter)).toThrow(Error);
  });
});

In this refactored test suite, each test case has a unique name (testName) which is passed as an argument to the test.each function. The name of the test case is interpolated into the string %s in the template string, which is used as the first argument to test.each.

This way, Jest can generate unique test names for each test case, and if a test case fails, it will be easier to identify which specific test case failed.

Name setting of jest test was also covered in the other blog post - An easy way to set test name in jest repetitive tests (test.each)

Conclusion

I hope you could grasp through this blog post that by using test.each, you can write concise and maintainable test code, reduce code duplication, and make your test suite easier to read and understand.

In conclusion, if you're not already using parameterized tests in your Jest test suite,
test.each is a great way to get started. It's a powerful tool that can help you write better tests and catch more bugs in your code.

We use a lot of jest test.each tests in backend that supports Codever. Check out the project and see for yourself 👉 https://github.com/CodeverDotDev/codever

Javascript call by value or by reference, actually by sharing

Adrian Matei — Sat, 07 Aug 2021 07:28:36 +0000

Still confused about how passing variables in Javascript functions works? So was I, until recently. It took me some effort to understand, and I'd like to share my understanding with an example.

First try guessing the outcome of the following javascript snippet

Input

const number = 1983
const string = 'Adrian'
let obj1 = {
  value: 'obj1'
}
let obj2 = {
  value: 'obj2'
}
let obj3 = obj2;

let obj4 = ['a'];


function change(numberParam, stringParam, obj1Param, obj2Param, obj4Param) {
    console.log('\nSTART logs in function');

    numberParam = numberParam * 10;
    stringParam = 'Ionut';
    console.log('numberParam - ', numberParam);
    console.log('stringParam - ', stringParam);

    console.log('obj1Param.value in function before obj1Param = obj2Param assignment - ', obj1Param.value);
    obj1Param = obj2Param;
    console.log('obj1Param.value in function after obj1Param = obj2Param assignment - ', obj1Param.value);

    console.log('obj2Param.value in function before obj2Param.value change - ', obj2Param.value);
    obj2Param.value = 'changed'; // obj1Param.value = 'changed'; would yield the same result
    console.log('obj1Param.value in function after obj2Param.value change - ', obj1Param.value);
    console.log('obj2Param.value in function after obj2Param.value change - ', obj2Param.value);

    //obj4Param = ['b'];
    obj4Param.push('b');
    console.log('obj4Parma - ', obj4Param);

    console.log('END logs in function \n');
}

change(number, string, obj1, obj2, obj4);

console.log('number final - ', number);
console.log('string final - ', string);
console.log('obj1.value final - ', obj1.value);
console.log('obj2.value final - ', obj2.value);
console.log('obj3.value final - ', obj3.value);
console.log('obj4 final - ', obj4);

Before you read the output I suggest you read the explanation of Call by sharing on Wikipedia, which is the best explanation on the topic I found.

Output

START logs in function
numberParam -  19830
stringParam -  Ionut
obj1Param.value in function before obj1Param = obj2Param assignment -  obj1
obj1Param.value in function after obj1Param = obj2Param assignment -  obj2
obj2Param.value in function before obj2Param.value change -  obj2
obj1Param.value in function after obj2Param.value change -  changed
obj2Param.value in function after obj2Param.value change -  changed
obj4Parma -  ["b"]
END logs in function

number final -  1983
string final -  Adrian
obj1.value final -  obj1
obj2.value final -  changed
obj3.value final -  changed
obj4 final -  ["a"]

Ok, so what's going on?

number and string primitives are "boxed"¹ in Number and String objects² before passing. Boxed objects are always a copy of the value object, hence new objects (Number and String) are created in memory with the same primitive values. In the function execution (scope) they get "unboxed", their value is changed and placed in the new memory space, but once the function is over the new space in memory is cleared, with the original remaining unaffected.
a copy reference to obj1 and obj2 is passed to the function, pointing to the same address of the "original" objects in memory (call by sharing)³. With the obj1Param = obj2Param assignment in the function, both obj1Param and obj2Param to the original obj2 object in memory, so when changing its property obj2Param.value = 'changed' it will also be visible outside of the function scope, after it is terminated. obj1Param.value = 'changed' would have had the same effect after the assignment.
what about obj4? obj4param is also a copy reference to the obj4 object (remember in Javascript arrays are objects), but with the obj4Param = ['b'] assignment it's pointing now to a newly created object (the ['b'] array object), which is visible only in the function's scope and is destroyed when the function is over. Thus, it has no effect on the original object. On the other hand, a statement like obj4param.push('b') would have changed the original array and would display a ["a", "b"] value.

Shared with love from Codever. Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Using a PlSql cursor in a FOR loop example

Adrian Matei — Mon, 01 Feb 2021 07:41:02 +0000

To use a PL/SQL cursor we set up a scenario where we want to update values from a main table and also add auditing data about it.

We create tables in oracle database to hold data about bookmarks and revision info data (bookmarks auditing table, and a revision info table):

BOOKMARK - to hold data about bookmarks
REVINFO - holds data about the revisions that took place in our system
BOOKMARK_AUD - audit table, to hold data from the main table (BOOKMARK) that were affected by the different revisions

The concept from the scenarios is inspired from the Hibernate Envers project, where you would the same functionality
in java, automatically, with annotations. There might be cases where you need to this at the SQL level, maybe for
some single time house keeping jobs or similar...

CREATE TABLE bookmark (
    id                 NUMBER(10, 0), -- number 10 digits before the decimal and 0 digits after the decimal
    title              VARCHAR2(255 CHAR) NOT NULL, -- String with a maximum length of 255 charachters
    url                VARCHAR2(500 CHAR) UNIQUE NOT NULL, -- holds unique values across the table data
    category      VARCHAR2(500 CHAR) NOT NULL, -- holds unique values across the table data
    is_public      NUMBER(1, 0) NOT NULL, -- plays the role of a boolean '0'-false, '1'-true ,
    created_at   DATE NOT NULL, --  when the entry is created
    PRIMARY KEY( id )
);


-- revision info table
CREATE TABLE revinfo
(
    id NUMBER(10, 0) NOT NULL,
    revtstmp NUMBER(10, 0), -- unix time in milliseconds
    PRIMARY KEY( id )
)

-- audit table for BOOKMARK table
CREATE TABLE bookmark_aud (
    id                 NUMBER(10, 0),
    rev NUMBER(10, 0) NOT NULL, -- the id of the revision
    revtype NUMBER(1, 0), -- 0=CREATE, 1=MODIFY and 2=DELETE
    title              VARCHAR2(255 CHAR) NOT NULL,
    url                VARCHAR2(500 CHAR) UNIQUE NOT NULL,
    category      VARCHAR2(500 CHAR) NOT NULL,
    is_public      NUMBER(1, 0) NOT NULL,
    created_at   DATE NOT NULL,
    PRIMARY KEY( id )
);

More exactly, we want to update all the entries from the bookmark table that have a given category (v_category in plsql code), with a new one (v_new_category in the plsql script). We select the values afect in a cursor (bookmark_cur in plsql script), which we iterate over in a plsql FOR LOOP to do the individual updates and inserts. If any exception occurs in the loop it will be printed in the DBMS_OUTPUT:

SET SERVEROUTPUT ON;
DECLARE
    v_category VARCHAR2(500) := 'javax';
    v_new_category VARCHAR2(500) := 'java';
    next_rev_id NUMBER := HIBERNATE_SEQUENCE.nextval;
    created_at NUMBER(19, 0);
    CURSOR bookmark_cur IS
        SELECT
            *
        FROM
            bookmark
        WHERE
          category = v_category
       );
BEGIN
    -- get current timestamp as number
    SELECT
                EXTRACT(DAY FROM(sys_extract_utc(systimestamp) - to_timestamp('1970-01-01', 'YYYY-MM-DD'))) * 86400000
            + to_number(TO_CHAR(sys_extract_utc(systimestamp), 'SSSSSFF3'))
    INTO created_at
    FROM
        dual;

    -- update REVISION table
    INSERT
    INTO revinfo (
               rev,
               revtstmp
    )
    VALUES (
       next_rev_id,
       created_at
    );

    FOR c IN bookmark_cur LOOP
        BEGIN
            -- update BOOKMARK table
            UPDATE bookmark
            SET
                category = v_new_category
            WHERE
                 id = c.id;

            -- INSERT ENTRY into BOOKMARK_AUD table
            INSERT INTO bookmark_aud (
               id
               title,
               url,
               category,
               is_public,
               created_at,
               rev,
               revtype
            ) VALUES (
               c.id
               c.title,
               c.url,
               c.category,
               c.is_public,
               c. created_at,
               next_rev_id,
               1 -- 1=UPDATE/MODIFY (0=INSERT and 2=DELETE)
           );
        EXCEPTION
            WHEN OTHERS THEN --handle all exceptions
                DBMS_OUTPUT.PUT_LINE('Exception' || SQLCODE || ' captured for bookmark with id ' || c.id);
        END;
    END LOOP;
END;
/

But beware, it is not recommended using a cursor FOR loop if the body executes non-query DML (INSERT, UPDATE, DELETE, MERGE),
because the INSERT or UPDATE will happen on a row-by-row basis¹.

In this particular case you can ditch the cursor and use use plain SQL updates and inserts in the plsql body, as shown
in the snippet below:

BEGIN
    -- get current timestamp as number
    SELECT
                EXTRACT(DAY FROM(sys_extract_utc(systimestamp) - to_timestamp('1970-01-01', 'YYYY-MM-DD'))) * 86400000
            + to_number(TO_CHAR(sys_extract_utc(systimestamp), 'SSSSSFF3'))
    INTO created_at
    FROM
        dual;

    -- update REVISION table
    INSERT
        INTO revinfo (
           rev,
           revtstmp
        )
        VALUES (
           next_rev_id,
           created_at
        );


    -- update BOOKMARK table
    UPDATE bookmark
    SET
        category = v_new_category
    WHERE
        category = v_category; --

    -- INSERT ENTRY into BOOKMARK_AUD table
    INSERT INTO bookmark_aud (
        id
        title,
        url,
        category,
        is_public,
        created_at,
        rev,
        revtype
    )
    SELECT
        c.id
        c.title,
        c.url,
        c.category,
        c.is_public,
        c. created_at,
        next_rev_id,
        1 -- 1=UPDATE/MODIFY (0=INSERT and 2=DELETE)
    FROM bookmark c
    WHERE
        c.id in (
           SELECT
               id
           FROM
                bookmark
           WHERE
             category = v_category
        )
    );
    EXCEPTION
        WHEN OTHERS THEN --handle all exceptions
              DBMS_OUTPUT.PUT_LINE('Exception' || SQLCODE || ' captured for bookmark with id ' || c.id);
END;
/

Note some times is not possible and then you might have to stick to the cursor. In oracle you can take advantage
of the CURSOR bulk updates and INSERTS²

References

Real life angular inheritance example

Adrian Matei — Tue, 12 Jan 2021 05:54:51 +0000

Recently I have just added the possibility to share your code snippets with the world on Bookmarks.dev. I have noticed that the code to create and update code snippets, was too intertwined - trying to avoid code duplication I used initially just one component to create and update code snippets. Now, I just could not stand the too many conditional checks anymore, so I decided to split the functionality in two parts - one for handling updating and copy to mine, and the second for creating new snippets.

Because there is still some common functionality in both, like handling autocompletion of tags, I decided to use Angular component inheritance to avoid code duplication. In this blog post I will just show code examples for angular inheritance and name some of the angular particularities.

Source code for this post is available on Github

Common Base Form Component

First, I have defined a snippet base form class that handles tags loading and autocompletion, create initial snippets methods and navigation method:

import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { snippet_common_tags } from '../shared/snippet-common-tags';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Snippet, CodeSnippet } from '../core/model/snippet';
import { map, startWith } from 'rxjs/operators';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatAutocompleteActivatedEvent, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { SuggestedTagsStore } from '../core/user/suggested-tags.store';
import { UserInfoStore } from '../core/user/user-info.store';
import { Params, Router } from '@angular/router';
import { textSizeValidator } from '../core/validators/text-size.validator';
import { HttpResponse } from '@angular/common/http';
import { throwError as observableThrowError } from 'rxjs/internal/observable/throwError';
import { PersonalSnippetsService } from '../core/personal-snippets.service';
import { ErrorService } from '../core/error/error.service';


@Component({
  template: ''
})
export class SnippetFormBaseComponent implements OnInit {

  snippetFormGroup: FormGroup;
  codeSnippetsFormArray: FormArray;
  userId = null;

  // chips
  selectable = true;
  removable = true;
  addOnBlur = true;

  autocompleteTagsOptionActivated = false;

  // Enter, comma, space
  separatorKeysCodes = [ENTER, COMMA];

  commonSnippetTags = snippet_common_tags;

  autocompleteTags = [];

  tagsControl = new FormControl();

  filteredTags: Observable<any[]>;

  @Input()
  snippet: Snippet;

  @ViewChild('tagInput', {static: false})
  tagInput: ElementRef;

  constructor(
    protected formBuilder: FormBuilder,
    protected personalSnippetsService: PersonalSnippetsService,
    protected suggestedTagsStore: SuggestedTagsStore,
    protected userInfoStore: UserInfoStore,
    protected router: Router,
    protected errorService: ErrorService
  ) {
  }

  ngOnInit(): void {
    this.userInfoStore.getUserInfo$().subscribe(userInfo => {
      this.userId = userInfo.sub;
      this.suggestedTagsStore.getSuggestedSnippetTags$(this.userId).subscribe(userTags => {

        this.autocompleteTags = userTags.concat(this.commonSnippetTags.filter((item => userTags.indexOf(item) < 0))).sort();

        this.filteredTags = this.tagsControl.valueChanges.pipe(
          startWith(null),
          map((tag: string | null) => {
            return tag ? this.filter(tag) : this.autocompleteTags.slice();
          })
        );
      });
    });
  }

  addTag(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || '').trim() && !this.autocompleteTagsOptionActivated) {
      // if ((value || '').trim()) {
      this.formArrayTags.push(this.formBuilder.control(value.trim().toLowerCase()));
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.tagsControl.setValue(null);
    this.formArrayTags.markAsDirty();
  }

  removeTagByIndex(index: number): void {
    if (index >= 0) {
      this.formArrayTags.removeAt(index);
    }
    this.formArrayTags.markAsDirty();
  }

  filter(name: string) {
    return this.autocompleteTags.filter(tag => tag.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

  optionActivated($event: MatAutocompleteActivatedEvent) {
    if ($event.option) {
      this.autocompleteTagsOptionActivated = true;
    }
  }

  selectedTag(event: MatAutocompleteSelectedEvent): void {
    this.formArrayTags.push(this.formBuilder.control(event.option.viewValue));
    this.tagInput.nativeElement.value = '';
    this.tagsControl.setValue(null);
    this.autocompleteTagsOptionActivated = false;
  }

  get formArrayTags() {
    return <FormArray>this.snippetFormGroup.get('tags');
  }

  createCodeSnippet(codeSnippet: CodeSnippet): FormGroup {
    return this.formBuilder.group({
      code: [codeSnippet.code, textSizeValidator(5000, 500)],
      comment: codeSnippet.comment
    });
  }

  createInitialCodeSnippet(): FormGroup {
    return this.formBuilder.group({
      code: ['', textSizeValidator(5000, 500)],
      comment: ['', textSizeValidator(1000, 30)]
    });
  }

  createEmptyCodeSnippet(): FormGroup {
    return this.formBuilder.group({
      code: ['', textSizeValidator(5000, 500)],
      comment: ['', textSizeValidator(1000, 30)]
    });
  }

  addEmptyCodeSnippet(index: number): void {
    this.codeSnippetsFormArray.insert(index + 1, this.createEmptyCodeSnippet());
  }

  removeCodeSnippet(index: number) {
    this.codeSnippetsFormArray.removeAt(index);
  }

  createSnippet(snippet: Snippet, copyToMine: boolean, popup: any) {
    snippet.userId = this.userId;
    const now = new Date();
    snippet.lastAccessedAt = now;
    if (copyToMine) {
      delete snippet['_id'];
      snippet.createdAt = now
    }

    this.personalSnippetsService.createSnippet(this.userId, snippet)
      .subscribe(
        response => {
          const headers = response.headers;
          // get the snippet id, which lies in the "location" response header
          const lastSlashIndex = headers.get('location').lastIndexOf('/');
          const newSnippetId = headers.get('location').substring(lastSlashIndex + 1);
          snippet._id = newSnippetId;
          const queryParmas = popup ? {popup: popup} : {};
          this.navigateToSnippetDetails(snippet, queryParmas)
        },
        (error: HttpResponse<any>) => {
          this.errorService.handleError(error.body.json());
          return observableThrowError(error.body.json());
        }
      );
  }

  navigateToSnippetDetails(snippet: Snippet, queryParams: Params): void {
    const link = [`./my-snippets/${snippet._id}/details`];
    this.router.navigate(link, {
      state: {snippet: snippet},
      queryParams: queryParams
    });
  }

}

Inheriting components

The UpdateSnippetFormComponent and CreateSnippetFormComponent components will
inherit from it.

Let's take have a look at one of them, for example at CreateSnippetFormComponent, and discuss the particularities

// imports ignored for brevity

@Component({
  selector: 'app-save-snippet-form',
  templateUrl: './create-snippet-form.component.html',
  styleUrls: ['./create-snippet-form.component.scss']
})
export class CreateSnippetFormComponent extends SnippetFormBaseComponent implements OnInit {

  snippetFormGroup: FormGroup;
  codeSnippetsFormArray: FormArray;
  userId = null;

  @Input()
  snippet$: Observable<Snippet>;

  @ViewChild('tagInput', {static: false})
  tagInput: ElementRef;

  snippet: Snippet;

  @Input()
  code; // value of "desc" query parameter if present

  @Input()
  title; // value of "title" query parameter if present

  @Input()
  sourceUrl; // value of "url" query parameter if present

  @Input()
  tagsStr; // tags received - string with comma separated values

  @Input()
  comment; // comment received via query

  @Input()
  popup; // if it's popup window

  constructor(
    protected formBuilder: FormBuilder,
    protected personalSnippetsService: PersonalSnippetsService,
    protected suggestedTagsStore: SuggestedTagsStore,
    protected userInfoStore: UserInfoStore,
    private userDataStore: UserDataStore,
    private logger: Logger,
    protected router: Router,
    private route: ActivatedRoute,
    protected errorService: ErrorService,
    private webpageInfoService: WebpageInfoService,
    private stackoverflowHelper: StackoverflowHelper,
  ) {
    super(formBuilder, personalSnippetsService, suggestedTagsStore, userInfoStore, router, errorService);
  }

  ngOnInit(): void {
    super.ngOnInit();
    this.buildInitialForm();
    this.codeSnippetsFormArray = this.snippetFormGroup.get('codeSnippets') as FormArray;

    if (this.sourceUrl) {
      const stackoverflowQuestionId = this.stackoverflowHelper.getStackoverflowQuestionIdFromUrl(this.sourceUrl);
      if (stackoverflowQuestionId) {
        this.webpageInfoService.getStackoverflowQuestionData(stackoverflowQuestionId).subscribe((webpageData: WebpageInfo) => {
            if (webpageData.tags) {
              for (let i = 0; i < webpageData.tags.length; i++) {
                this.formArrayTags.push(this.formBuilder.control(webpageData.tags[i]));
              }

              this.tagsControl.setValue(null);
              this.formArrayTags.markAsDirty();
            }
          },
          error => {
            console.error(`Problems when scraping data for stackoverflow id ${stackoverflowQuestionId}`, error);
          });
      }
    }

    this.setTagsFromQueryParameter();
  }

  private setTagsFromQueryParameter() {
    if (this.tagsStr) {
      const tags: String[] = this.tagsStr.split(',');
      for (let i = 0; i < tags.length; i++) {
        this.formArrayTags.push(this.formBuilder.control(tags[i].trim()));
      }

      this.tagsControl.setValue(null);
      this.formArrayTags.markAsDirty();
    }
  }

  buildInitialForm(): void {
    this.snippetFormGroup = this.formBuilder.group({
      title: [this.title ? this.title : '', Validators.required],
      tags: this.formBuilder.array([], [tagsValidator, Validators.required]),
      codeSnippets: new FormArray([this.createInitialCodeSnippet()]),
      sourceUrl: this.sourceUrl ? this.sourceUrl : '',
      public: false
    });

  }

  createInitialCodeSnippet(): FormGroup {
    return this.formBuilder.group({
      code: [this.code ? this.code : '', textSizeValidator(5000, 500)],
      comment: [this.comment ? this.comment : '', textSizeValidator(1000, 30)]
    });
  }

}

extends keyword is used to mark the inheritance - CreateSnippetFormComponent extends SnippetFormBaseComponent
you need to define all the properties of the parent constructor in the child as protected too, and call the constructor with the super keyword right at the beginning of the constructor - super(formBuilder, personalSnippetsService, suggestedTagsStore, userInfoStore, router, errorService);
to trigger the functionality of the ngOnInit of the parent component, you need to call it with the super keyword in the child component too (otherwise it will just get overwritten) - super.ngOnInit();

For a more detailed explanations of class inheritance in Typescript visit the "Classes" section from the typescript handbook

You can see the create code snippet form in action in the following gif:

If you have found this useful, please show some love and give us a star on Github

CRUD API example with Express GraphQL

Adrian Matei — Tue, 17 Nov 2020 13:26:51 +0000

As you might recall from my previous post GraphQL Resources to help you get started, I have started to dig deeper into GraphQL. What better way to deepen one's knowledge than with a hands-on experience? So, in this blog post I will present the implementation of a GraphQL server API that provides CRUD operations. I chose the Javascript implementation of GraphQL, GraphQL-js ¹ and set up a GraphQL server with Express Graphql².

To make the scenario more realistic, the API developed in GraphQL acts as integration layer to the existing REST API supporting Bookmarks.dev.

You can find the source code for the examples in this post on

CodepediaOrg / graphql-express-crud-demo

Complete CRUD API written with graphql-express

Configure the demo project to test along

If you want to test along please follow the steps below:

Setup Bookmarks.dev localhost REST API

You need to first set up the localhost REST api of Bookmarks.dev. Checkout the project from Github and then follow the steps listed in the README file of the project.

Install and run the project `graphql-expressjs-crud-demo`

To run the actual GraphQL project you need to set it up as described in the README file of the project.

GraphiQL access

Once you are done with the setup, you can input your GraphQL queries with GraphiQL
by accessing the http://localhost:4000/graphql url in your favorite browser

The coming sections will present main elements of GraphQL with concrete examples and their implementation in GraphQL-js.

Schema

Every GraphQL service defines a set of types which completely describe the set of possible data you can query on that service. Then, when queries come in, they are validated and executed against that schema. Bellow you can find some of the most common types:

Object types and fields

The most basic components of a GraphQL schema are object types, which just represent a kind of object you can fetch
from your service, and what fields it has. In the GraphQL schema language, we might represent it like this:

type Bookmark {
  _id: ID!
  userId: ID!
  public: Boolean
  location: String!
  name: String!
  description: String
  tags: [String!]!
  likeCount: Int
  sourceCodeURL: String
}

The language is pretty readable, but let's go over it so that we can have a shared vocabulary:

Bookmark is a GraphQL Object Type, meaning it's a type with some fields. Most of the types in your schema will be object types.
String, Boolean and Int are some of the built-in scalar types - these are types that resolve to a single scalar object, and can't have sub-selections in the query. We'll go over scalar types more later.
ID: The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, defining it as an ID signifies that it is not intended to be human‐readable.
String! means that the field is non-nullable, meaning that the GraphQL service promises to always give you a value when you query this field. In the type language, we'll represent those with an exclamation mark.
[String!]! represents an array of String objects. Since it is also non-nullable, you can always expect an array (with zero or more items) when you query the tags field. And since String! is also non-nullable, you can always expect every item of the array to be an String object.

The implementation in graphql-js looks something like the following:

const Bookmark = new GraphQLObjectType({
    name: "Bookmark",
    fields: {
        _id: {
            type: GraphQLID,
            description: "The id of the bookmark it's generated in MongoDb"
        },
        userId: {
            type:  GraphQLNonNull(GraphQLID),
            description: "The id of the user that created the bookmark"
        },
        public: {
            type: GraphQLBoolean,
            description: "Whether the bookmark is public or not"
        },
        location: {
            type:  GraphQLNonNull(GraphQLString),
            description: "Mostly the URL of the link"
        },
        name: {
            type: GraphQLNonNull(GraphQLString),
            description: "Title of the bookmark"
        },
        description: {
            type: GraphQLString,
            description: "Notes about the bookmark - supports Markdown"
        },
        tags: {
            type:  GraphQLNonNull(GraphQLList(GraphQLNonNull(GraphQLString))),
            description: "Tags are highly used on Bookmarks.dev"
        },
        likeCount: {
            type: GraphQLInt,
            description: "Number of public likes"
        },
        sourceCodeURL: {
            type: GraphQLString,
            description: "Where you can find the source code related to bookmark"
        }
    }
});

Arguments

Every field on a GraphQL object type can have zero or more arguments, for example the history field below:

type User {
 userId: ID!
 history(last: Int = 5): [Bookmark]
}

All arguments are named. Unlike languages like JavaScript and Python where functions take a list of ordered arguments,
all arguments in GraphQL are passed by name specifically. In this case, the history field has one defined argument, last.

Arguments can be either required or optional. When an argument is optional, we can define a default value - if the last argument is not passed, it will be set to 5 by default.

The example above looks in GraphQL-js the following - focus on the history field of the User object part:

const User = new GraphQLObjectType({
    name: "User",
    fields: {
        userId: {
            type: GraphQLID,
            description: "user identifier - keycloak ID"
        },
        history: {
            type: new GraphQLList(Bookmark),
            description: "Bookmarks the user created, updated or clicked recently",
            args: {
                last: {
                    type: GraphQLInt,
                    defaultValue: 5,
                    description: "Fetches only *last* bookmarks from history "
                }
            },
            resolve: async (root, args, context) => {
                const userId = root.userId;
                const bearerToken = context.bearerToken;
                const last = args.last;
                const response = await bookmarksApiService.getBookmarksOfUserHistory(userId, bearerToken, last);

                return response.body;
            }
        }
    }
});

Note the resolve method for now, but we'll talk about that later

Enumeration types

Also called Enums, enumeration types are a special kind of scalar that is restricted to a particular set of allowed values. This allows you to:

Validate that any arguments of this type are one of the allowed values
Communicate through the type system that a field will always be one of a finite set of values

Here's what an enum definition might look like in the GraphQL schema language:

enum OrderBy {
  MOST_LIKES
  LAST_CREATED
  MOST_USED
}

This means that wherever we use the type OrderBy in our schema, we expect it to be exactly one of MOST_LIKES, LAST_CREATED, or MOST_USED.

In the Javascript GraphQL the definition of the enum looks like the following:

const BookmarkOrderByType = new GraphQLEnumType({
    name: 'OrderBy',
    values: {
        MOST_LIKES: {value: "MOST_LIKES"},
        LAST_CREATED: {value: "LAST_CREATED"},
        MOST_USED: {value: "MOST_USED"}
    }
});

By using the value parameter we force the serialization to these values.

Queries - the R in CRUD

Queries are the bread and butter of GraphQL. You define the queries in the schema that your GraphQL provides under the root 'Query' object:

type Query {
    publicBookmarks: [Bookmark]
    user(userId: ID!): [User]
    bookmark(bookmarkId: ID!): [Bookmark]
}

translated to the GraphQL javascript implementation:

const Query = new GraphQLObjectType({
    name: 'Query',
    fields: {
        publicBookmarks: {
            type: new GraphQLList(Bookmark),
            resolve: async (root, args, context, info) => {
                const response = await bookmarksApiService.getPublicBookmarks();
                return response.body;
            }
        },
        userFeedBookmarks: {
            type: new GraphQLList(Bookmark),
            resolve: async (root, args, context, info) => {
                const {userId, bearerToken} = context;
                const response = await bokmarksApiService.getBookmarksForFeed(userId, bearerToken);
                return response.body;
            }
        },
        user: {
            type: User,
            args: {
                userId: {type: GraphQLID}
            },
            resolve: async (root, args, context) => {
                const bearerToken = context.bearerToken;
                const {userId} = args;
                const response = await bookmarksApiService.getUserData(userId, bearerToken);

                return response.body;
            }
        },
        bookmark: {
            type: Bookmark,
            args: {
                bookmarkId: {type: GraphQLID}
            },
            resolve: async (root, args, context, info) => {
                const bearerToken = context.bearerToken;
                const {bookmarkId} = args;
                const response = await bookmarksApiService.getBookmarkById(userId, bearerToken, bookmarkId);

                return response.body;
            }
        }
    },
});

Let's see now how a query would look on the client side, for example to receive data for the mock user provided by the bookmarks.dev setup:

{
 user(userId:"a7908cb5-3b37-4cc1-a751-42f674d870e1") {
    userId,
    profile {
      displayName
      imageUrl
    },
    bookmarks(orderBy:LAST_CREATED) {
      ...bookmarkFields
    },
    feed  {
      ...bookmarkFields
    },
    history {
      ...bookmarkFields
    }
  }
}

fragment bookmarkFields on Bookmark {
  _id
  name
  location
  tags
  sourceCodeURL
  likeCount
}

Note the fragment construct - Fragments let you construct sets of fields, and then include them in queries where you need to,
to not have to repeat yourself.

The response should look something similar to the following:

{
  "data": {
    "user": {
      "userId": "a7908cb5-3b37-4cc1-a751-42f674d870e1",
      "profile": {
        "displayName": "Mock",
        "imageUrl": "https://gravatar.com/avatar/bc461041c4caf5493530db7a69d4bf83?s=340"
      },
      "bookmarks": [
        {
          "_id": "5fa8db1897519f34ae94f7e2",
          "name": "Build a CRUD functionality with GraphQL and ExpressJS",
          "location": "https://www.codepedia.org/ama/complete-example-crud-api-express-graphql",
          "tags": [
            "graphql",
            "expressjs",
            "graphql-express",
            "rest",
            "api-design"
          ],
          "sourceCodeURL": "https://github.com/CodepediaOrg/graphql-express-crud-demo",
          "likeCount": null
        },
        {
          "_id": "5e9d4a463b837e57e76de0ae",
          "name": "Getting started with www.bookmarks.dev",
          "location": "https://www.bookmarks.dev/howto",
          "tags": [
            "programming",
            "resource",
            "blog",
            "open-source"
          ],
          "sourceCodeURL": "https://github.com/CodepediaOrg/bookmarks",
          "likeCount": 0
        },
        {
          "_id": "5e9d4a463b837e57e76de0ad",
          "name": "Collection of public dev bookmarks, shared with from www.bookmarks.dev",
          "location": "https://github.com/CodepediaOrg/bookmarks#readme",
          "tags": [
            "programming",
            "resource",
            "blog",
            "open-source"
          ],
          "sourceCodeURL": "https://github.com/CodepediaOrg/bookmarks",
          "likeCount": 0
        },
        {
          "_id": "5e9d4a463b837e57e76de0ac",
          "name": "Bookmarks Manager for Devevelopers & Co",
          "location": "https://www.bookmarks.dev/",
          "tags": [
            "programming",
            "blog",
            "resources",
            "open-source"
          ],
          "sourceCodeURL": "https://github.com/CodepediaOrg/bookmarks.dev",
          "likeCount": 0
        },
        {
          "_id": "5e9d4a463b837e57e76de0ab",
          "name": "Share coding knowledge – CodepediaOrg",
          "location": "https://www.codepedia.org/",
          "tags": [
            "programming",
            "blog",
            "open-source"
          ],
          "sourceCodeURL": "",
          "likeCount": 0
        }
      ],
      "feed": [
        {
          "_id": "5fa8db1897519f34ae94f7e2",
          "name": "Build a CRUD functionality with GraphQL and ExpressJS",
          "location": "https://www.codepedia.org/ama/complete-tutorial-crud-graphql-express",
          "tags": [
            "graphql",
            "expressjs",
            "graphql-express",
            "rest",
            "api-design"
          ],
          "sourceCodeURL": "https://github.com/CodepediaOrg/graphql-express-crud-demo",
          "likeCount": null
        },
        {
          "_id": "5f93b3a51e55b52d7b5d73bd",
          "name": "Issues · BookmarksDev/bookmarks.dev · GitHub",
          "location": "https://github.com/BookmarksDev/bookmarks.dev/issues",
          "tags": [
            "bookmarksdev"
          ],
          "sourceCodeURL": "",
          "likeCount": 0
        }
      ],
      "history": [
        {
          "_id": "5f93b3a51e55b52d7b5d73bd",
          "name": "Issues · BookmarksDev/bookmarks.dev · GitHub",
          "location": "https://github.com/BookmarksDev/bookmarks.dev/issues",
          "tags": [
            "bookmarksdev"
          ],
          "sourceCodeURL": "",
          "likeCount": 0
        }
      ]
    }
  }
}

Resolvers

In the Query section before you might have noticed the resolve method. These are so called Resolvers in the GraphQL terminology. If the schema defines the structure of the GraphQL API, then the resolvers implement the API and
determine the server's behaviour.

Each field in a GraphQL schema is backed by a resolver

" In its most basic form, a GraphQL server will have one resolver function per field in its schema. Each resolver knows how to fetch the data for its field. Since a GraphQL query at its essence is just a collection of fields, all a GraphQL server actually needs to do in order to gather the requested data is invoke all the resolver functions for the fields specified in the query. (This is also why GraphQL often is compared to RPC-style systems, as it essentially is a language for invoking remote functions.)"³

Anatomy of the resolver

Let's see the code snippet again for the bookmark query:

        bookmark: {
            type: Bookmark,
            args: {
                bookmarkId: {type: GraphQLID}
            },
            resolve: async (root, args, context, info) => {
                const bearerToken = context.bearerToken;
                const {bookmarkId} = args;
                const response = await bookmarksApiService.getBookmarkById(userId, bearerToken, bookmarkId);

                return response.body;
            }
        }

Notice the parameters of the resolve function. They have the following meaning:

root (also sometimes called parent): Remember how we said all a GraphQL server needs to do to resolve a query is calling the resolvers of the query’s fields? Well, it’s doing so breadth-first (level-by-level) and the root argument in each resolver call is simply the result of the previous call (initial value is null if not otherwise specified).
args: This argument carries the parameters for the query, in this case the id of the User to be fetched.
context: An object that gets passed through the resolver chain that each resolver can write to and read from (basically a means for resolvers to communicate and share information).
info: An AST representation of the query or mutation. You can read more about the details Demystifying the info Argument in GraphQL Resolvers. " ³

Set parameter into the resolver's context in express middleware

You can also set parameters into the req object of the Express middleware and they will be available in the
context parameter in resolvers, as this is the cases for bearerToken from the previous example - const bearerToken = context.bearerToken;

const app = express();

const setAccessTokenMiddleware = async (req, res, next) => {
  const accessToken = await accessTokenService.getKeycloakAccessToken();
  req.bearerToken = 'Bearer ' + accessToken;

  const decoded = jwt.decode(accessToken);
  const userId = decoded.sub;
  req.userId = userId;
  next();
}

app.use(setAccessTokenMiddleware);

The bearerToken is set into the context via the Express Middleware

Mutations - the CUD in CRUD

If queries are used for fetching data from the GraphQL server, then mutations are to modify the data on the GraphQL server.

"In REST, any request might end up causing some side-effects on the server, but by convention it's suggested that one doesn't use GET requests to modify data. GraphQL is similar - technically any query could be implemented to cause a data write. However, it's useful to establish a convention that any operations that cause writes should be sent explicitly via a mutation.

Just like in queries, if the mutation field returns an object type, you can ask for nested fields. This can be useful for fetching the new state of an object after an update. "⁴

Let's see what mutations are available for the demo project:

type Mutation {
    createBookmark(input: BookmarkInput!): Bookmark
    updateBookmark(bookmarkId: ID!, input: BookmarkInput!): Bookmark
    deleteBookmark(bookmarkId: ID!): Bookmark
}

and the implementation in GraphQL-js is the following:

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        createBookmark: {
            type: Bookmark,
            args: {
                input: {type: BookmarkInput}
            },
            resolve: async (root, args, context) => {
                const { input } = args;

                const {userId, bearerToken} = context;
                const bookmark = await bookmarksApiService.createBookmark(bearerToken, userId, input);

                return bookmark;
            }
        },
        updateBookmark: {
            type: Bookmark,
            args: {
                bookmarkId: {type: GraphQLID},
                input: {type: BookmarkInput}
            },
            resolve: async (root, args, context) => {
                const { input, bookmarkId } = args;

                const {userId, bearerToken} = context;
                const bookmark = await bookmarksApiService.updateBookmark(bearerToken, userId, bookmarkId, input);

                return bookmark;
            }
        },
        deleteBookmark: {
            description: "Given its ID a bookmark can be deleted. Either by the one that created it or an Admin",
            type: Bookmark,
            args: {
                bookmarkId: {type: GraphQLID}
            },
            resolve: async (root, args, context) => {
                const bookmarkId = args.bookmarkId;
                const {userId, bearerToken} = context;
                const deletedBookmark = await bookmarksApiService.deleteBookmarkId(bearerToken, userId, bookmarkId);
                return deletedBookmark;
            }
        }
    }
});

Conclusion

In this post you've learned a bit of theory about GraphQL's main elements accompanied by examples with their corresponding
implementation in GraphQL-JS. I really start to like GraphQL and I say it one more time - the best learning experience is a hands-on one.

GraphQL - where do I start?

Adrian Matei — Wed, 04 Nov 2020 16:15:24 +0000

It was about time I looked more thoroughly into GraphQL. I must say I felt a bit overwhelmed by the question - "Where do I start?", I mean take a look at the spec... or don't! Not yet.

I had already bookmarked dozens of GraphQL resources, but in this post you will find listed the resources I found most useful to begin with and help you get a good grasp of GraphQL. The order is also important.

1. HowToGraphQL Videos

I would start with the these Youtube videos from HowToGraphQL to get a grasp what GraphQL is all about from a flight altitude.

HowToGraphQL (Fundamentals) - Introduction (1/4)

Learn what GraphQL is, how it compares to REST and about the historic context in which it was created.

HowToGraphQL (Fundamentals) - GraphQL is the better REST (2/4)

Learn about the technical differences between GraphQL and REST and how many common issues with REST APIs can be solved by using GraphQL.

HowToGraphQL (Fundamentals) - Core Concepts (3/4)

Learn about the basic GraphQL language concepts, such as Queries, Mutations, Subscriptions and the GraphQL Schema & SDL.

HowToGraphQL (Fundamentals) - Big Picture (Architecture) (4/4)

Learn about different architectural use cases of GraphQL and the major components on the backend and the frontend, like resolver functions and client libraries.

You can find these videos in the home page from HowToGraphQL.com

2. README file of the spec project on Github

This README walks you through the GraphQL.js reference implementation's type system, query execution, validation, and introspection systems. There's more in both GraphQL.js and specification, including a description and implementation for executing queries, how to format a response, explaining how a type system maps to an underlying implementation, and how to format a GraphQL response, as well as the grammar for GraphQL.

3. https://graphql.org/learn

Read all, and I mean all the articles from Introduction to Best practices.

4. Advanced stuff

Once you are through with the above resources, and you feel more comfortable with GraphQL, you can start with more advanced stuff like

4.1 Pagination

Understanding pagination: REST, GraphQL, and Relay

where some different approaches to pagination in REST and GraphQL are covered:

Pagination: what is it for?
What are different types of pagination, and when are they useful?
What is it like to implement these different types?
How does all of this lead to Relay’s pagination spec for GraphQL?
Is there a single best solution? (Spoiler alert: no, as always)

Plus extra you get to understand terms like connections, edges from the relay/graphQL world

4.2 Security aspects

Route change
Introspection
Authentication
Depth / Complexity
Schema generation

presented very nice in
GraphQL Security OWASP YVR 2020

4.3 Error handling

Handling GraphQL errors like a champ with unions and interfaces

An interesting approach to handling errors in GraphQL with the possibilities that the spec provides and still have type safety.

4.4 Caching

GraphQL & Caching: The Elephant in the Room

The author addresses the misconception that "GraphQL breaks caching" and discusses thoroughly the topic.

Bonus - GraphQL Public Bookmarks

You can follow the graphql tag on Bookmarks.dev
to get the latest public entries about GraphQL or search to find resources in combination with other terms
(e.g. graphql and java)

I think the best way to learn something is with hands-on exercise, so in the next article we will do just that.

How to verify link clicked in Angular html template

Adrian Matei — Sat, 04 Jul 2020 10:22:45 +0000

Being on a constant lookout for optimisation when managing my bookmarks on www.bookmarks.dev, I had this idea lately to add a bookmark to my history not only when I click the title of the bookmark (main URL), but also when I click hyperlinks in the description of the bookmark - sometimes I tend to bookmark the "parent" url and add "child" or related bookmarks in the description (an example would be bookmarking the same "resource" which is deployed on different environments like dev, test and prod):

This plays really well now with the recently introduced hot keys to access the history and pinned bookmarks

Well, let's see how this looks like in code:

The HTML template

    <app-bookmark-text
      [bookmark]="bookmark"
      [queryText]="queryText"
      (click)="onClickInDescription($event, bookmark)"
      (auxclick)="onMiddleClickInDescription($event, bookmark)"
      (contextmenu)="onRightClickInDescription($event, bookmark)">
    </app-bookmark-text>

In the template we listen to the following events the Angular API provides:

onClick - fires when the user clicks the left mouse button on the object
onauxclick - to cover the middle button click of the mouse I use the auxclick¹ event, which is fired at an Element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.fires when the user clicks the left mouse button on the object
oncontextmenu - fires when the user clicks the right mouse button in the client area, opening the context menu.

The Angular component

Let's see how this is implemented in the component:

  onClickInDescription($event: any, bookmark: Bookmark) {
    if (this.isHtmlAnchorElement($event)) {
      $event.target.setAttribute('target', '_blank');
      this.addToHistoryIfLoggedIn(bookmark);
    }
  }

  onRightClickInDescription($event: any, bookmark: Bookmark) {
    if (this.isHtmlAnchorElement($event)) {
      this.addToHistoryIfLoggedIn(bookmark);
    }
  }

  onMiddleClickInDescription($event: any, bookmark: Bookmark) {
    if (this.isHtmlAnchorElement($event)) {
      this.addToHistoryIfLoggedIn(bookmark);
    }
  }

  private isHtmlAnchorElement($event: any) {
    return $event.target.matches('a');
  }

The pattern is the same: verify that the object onto which the event was dispatched is an HTML Anchor - isHtmlAnchorElement(). If that's the case it will be added to my bookmarks history.

To achieve that, we use the target² property of the Event interface with the matches(selector)³ method. In this particular case we use a as selectorString. For other html elements use a corresponding selector.

Note:

on left click we force opening the URL in a new tab by setting the target attribute to _blank - $event.target.setAttribute('target', '_blank');
on right click I haven't found a way yet to verify if the user clicked "Open Link in New Tab" or "Open Link in New Window" - suggestions are more than welcomed; but for the time being I think it is enough, what else would you do a right click on a link for?

Conclusion

This is definitely a piece of code I will bookmark for later.

References

Complete example of uploading images to Amazon S3 with the MEAN stack

Adrian Matei — Wed, 29 Apr 2020 05:59:16 +0000

In this blog post I present a complete example of how to upload an image to Amazon S3 bucket all the way from frontend implemented in Angular to the backend implemented with NodeJS/ExpressJS. This is based on a real use case running in production at the www.bookmarks.dev : once you register for an account you have the possibility to change your profile picture with something more personal at user settings.

Complete source code is available on Github

So let's jump into the tutorial

Frontend (Angular)

We will start with the front end part.

Angular Template

And namely with the html template part in angular:

<div *ngIf="(userData$ | async) as userDataVar; else loading" class="navigation-space-buffer">
  <h2>Profile image <i class="fas fa-portrait"></i></h2>
  <div class="profile-image">
    <img *ngIf="selectedFileSrc || userDataVar.profile.imageUrl else robot"
         [src]="selectedFileSrc || userDataVar.profile.imageUrl"
         height="200"
         alt="User profile image">
    <br/>
    <br/>
    <ng-template #robot>
      <div class="generic-profile-image"><i class="fas fa-robot"></i></div>
    </ng-template>
    <div class="custom-file">
      <input #imageInput
             type="file"
             accept="image/*"
             class="form-control"
             id="picture"
             (change)="changeImage(imageInput)">
      <label class="custom-file-label" style="cursor: pointer" for="picture">{{uploadImageLabel}}</label>
    </div>
  </div>

  <div [hidden]="!imageFileIsTooBig"
       class="alert alert-danger mt-2">
    The image file selected is too big (max 1MB)
  </div>
  <div *ngIf="profileImageChangedStatus === 'ok'" class="alert alert-success mt-2"> Image Profile updated successfully!</div>
  <div *ngIf="profileImageChangedStatus === 'fail'" class="alert alert-danger mt-2"> Image Profile failed to update!</div>

  <hr/>
</div>

The async forces the page rendering to wait before displaying the image and the image upload input.

The src attribute of the img element is set to the selectedFileSrc which points to the new changed image which is immediately displayed,
or to the existing profile userDataVar.profile.imageUrl (order is important). Otherwise, a robot font character is shown:

    <img *ngIf="selectedFileSrc || userDataVar.profile.imageUrl else robot"
         [src]="selectedFileSrc || userDataVar.profile.imageUrl"
         height="200"
         alt="User profile image">
    <br/>

The most important section here is the input of type file:

    <div class="custom-file" >
      <input #imageInput
             type="file"
             accept="image/*"
             class="form-control"
             id="picture"
             (change)="changeImage(imageInput)">
      <label class="custom-file-label" style="cursor: pointer" for="picture">{{uploadImageLabel}}</label>
    </div>

This is wrapped in a Bootstrap custom-file input paragraph.

Note:

type file of the input element, which let the user choose the file from the device storage.
tell the browser to accept only images (accept="image/*")- you should also validate the uploaded file type on the server also (see the backend section)
when the native change event of the input is fired, we call the changeImage(imageInput) with the input element itself; this was defined before the template reference variable #imageInput, which enables us to make this call

The label of the input element displays the file's name and size, once the file is uploaded in the browser:

      <label class="custom-file-label" style="cursor: pointer" for="picture">{{uploadImageLabel}}</label>

If the user uploads a picture that is bigger than 1MB the user gets an instant feedback via:

  <div [hidden]="!imageFileIsTooBig"
       class="alert alert-danger mt-2">
    The image file selected is too big (max 1MB)
  </div>

Finally, the user is informed via the profileImageUploadStatus variable whether the profile image change was successful or not:

  <div *ngIf="profileImageChangedStatus === 'ok'" class="alert alert-success mt-2"> Image Profile updated successfully!</div>
  <div *ngIf="profileImageChangedStatus === 'fail'" class="alert alert-danger mt-2"> Image Profile failed to update!</div>

Angular Component

Let's now see what the Angular component looks like:

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {

  userProfileForm: FormGroup;

  profileImageChangedStatus = 'init';
  uploadImageLabel = 'Choose file (max size 1MB)';
  imageFileIsTooBig = false;
  selectedFileSrc: string;

  // ...... other methods and imports skipped for brevity

  changeImage(imageInput: HTMLInputElement) {
    const file: File = imageInput.files[0];
    this.uploadImageLabel = `${file.name} (${(file.size * 0.000001).toFixed(2)} MB)`;
    if (file.size > 1048576) {
      this.imageFileIsTooBig = true;
    } else {
      this.imageFileIsTooBig = false;
      const reader = new FileReader();

      reader.addEventListener('load', (event: any) => {
        this.selectedFileSrc = event.target.result;
        this.userDataService.uploadProfileImage(this.userData.userId, file).subscribe(
          (response) => {
            this.userData.profile.imageUrl = response.url;
            this.userDataStore.updateUserData$(this.userData).subscribe(
              () => {
                this.profileImageChangedStatus = 'ok';
              },
              () => {
                this.profileImageChangedStatus = 'fail';
              });
          },
          () => {
            this.profileImageChangedStatus = 'fail';
          });
      });

      if (file) {
        reader.readAsDataURL(file);
      }
    }
  }
}

Note:

we define a couple of helper variables in the beginning
- profileImageChangedStatus - use to inform the user if the picture was changed successfully or not
- uploadImageLabel - the input's label text; changes to the file name and size once one is uploaded
- selectedFileSrc - used to display the picture more rapidly, even before it is loaded in the amazon S3 bucket, to give the user a "taste" of what it looks like
- imageFileIsTooBig - flag to notify the user if the image file is too big
the image file to be uploaded is extracted from the files attribute of the HTMLInputElement
we define a FileReader to asynchronously read the content of the image file reader.readAsDataURL(file)
when the file has been successfully read, i.e. the load event is triggered, we upload the image file to the backend via UserDataService - this.userDataService.uploadProfileImage(this.userData.userId, file); see below the implementation of this method
by subscribing to the method mentioned before we give feedback to the user if the change was successful or not

The Service Method

@Injectable()
export class UserDataService {

  private usersApiBaseUrl = '';  // URL to web api

  constructor(private httpClient: HttpClient) {
    this.usersApiBaseUrl = environment.API_URL + '/personal/users';
  }

  uploadProfileImage(userId: String, image: File): Observable<any> {
    const formData = new FormData();
    formData.append('image', image);

    return this.httpClient.post(`${this.usersApiBaseUrl}/${userId}/profile-picture`, formData);
  }
  // imports and other methods are absent for brevity
}

In the service method you use the FormData interface
to construct basically a form data to send to backend. This is in the same format if the encoding type would be multipart/form-data.

This requires a key value pair, where image is the key of the formData and the second paramater is the file itself. You will see in the following section how to handle it in the backend.

Backend (ExpressJS)

Let's see how you can handle the upload in the backend.

const ImageValidationHelper = require('./image-validation.helper');

const aws = require('aws-sdk');
aws.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION
});

const s3 = new aws.S3();
const multer = require("multer");
const multerS3 = require('multer-s3');
const path = require('path')

const upload = multer({
  limits: {
    fileSize: 1048576 // 1MB
  },
  fileFilter: ImageValidationHelper.imageFilter,
  storage: multerS3({
    s3: s3,
    bucket: 'bookmarks.dev',
    acl: 'public-read',
    cacheControl: 'max-age=31536000',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      const key = `user-profile-images/${process.env.NODE_ENV}/${req.params.userId}_${Date.now().toString()}${path.extname(file.originalname)}`
      cb(null, key);
    }
  })
});

// other methods and imports are exclude for brevity

/* save profile picture */
usersRouter.post('/:userId/profile-picture', keycloak.protect(),
  upload.single("image" /* name attribute of <file> element in your form */),
  async (request, response) => {
    userIdTokenValidator.validateUserId(request);

    return response.status(HttpStatus.OK).send({
      url: request.file.location
    });
  });

AWS-SDK Setup

To upload an image to S3 bucket you need to install the aws-sdk package - npm install aws-sdk - and configure it:

const aws = require('aws-sdk');
aws.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION
});

The credentials and region come from environment variables, but there are other options explained in the AWS SDK documentation for getting your credentials

just make sure you create a dedicated IAM account to access the S3 bucket and use its credentials instead of the ones for root user

Multer Setup

In an ExpressJS backend, Multer as Node.js middleware is the way to handle multipart/form-data for uploading
the image - npm install --save multer

const s3 = new aws.S3();
const multer = require("multer");
const multerS3 = require('multer-s3');
const path = require('path')

const upload = multer({
  limits: {
    fileSize: 1048576 // 1MB
  },
  fileFilter: ImageValidationHelper.imageFilter,
  storage: multerS3({
    s3: s3,
    bucket: 'bookmarks.dev',
    acl: 'public-read',
    cacheControl: 'max-age=31536000',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      const key = `user-profile-images/${process.env.NODE_ENV}/${req.params.userId}_${Date.now().toString()}${path.extname(file.originalname)}`
      cb(null, key);
    }
  })
});

First we verify the size to be less than 1MB:

  limits: {
    fileSize: 1048576 // 1MB
  }

Multer will through a standard Express error if this is the case, that we can catch in our final error handler:

app.use(function (error, req, res, next) {
  if ( res.headersSent ) {
    return next(error)
  } else if ( error.code === 'LIMIT_FILE_SIZE') { // Multer error - see https://github.com/expressjs/multer/blob/master/lib/multer-error.js && https://github.com/expressjs/multer#error-handling
    return res
      .status(HttpStatus.BAD_REQUEST)
      .json({
        httpStatus: HttpStatus.BAD_REQUEST,
        message: error.code + ' ' + error.message,
        stack: app.get('env') === 'development' ? error.stack : {}
      });
  } else {
    res.status(error.status || HttpStatus.INTERNAL_SERVER_ERROR);
    res.send({
      message: error.message,
      stack: app.get('env') === 'development' ? error.stack : {}
    });
  }
});

Second, we check that the uploaded file is an image via fileFilter: ImageValidationHelper.imageFilter option. The implementation
of the filter:

const ValidationError = require('../../error/validation.error');

const imageFilter = function(req, file, cb) {
  // Accept images only
  if (!file.originalname.match(/\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/)) {
    req.fileValidationError = 'Only image files are allowed!';
    return cb(new ValidationError('Method accespts only images [jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF]', ['The file uploaded is not an image']), false);
  }
  cb(null, true);
};
exports.imageFilter = imageFilter;

checks the file extension, which needs to be one in the list above.

Multer storage engine - MulterS3

  storage: multerS3({
    s3: s3,
    bucket: 'bookmarks.dev',
    acl: 'public-read',
    cacheControl: 'max-age=31536000',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      const key = `user-profile-images/${process.env.NODE_ENV}/${req.params.userId}_${Date.now().toString()}${path.extname(file.originalname)}`
      cb(null, key);
    }

We use multerS3 as a Multer Storage Engine to upload
the file to S3. We provide it with the following options:

bucket: 'bookmarks.dev' - the bucket to store the file in
acl: 'public-read' - owner gets FULL_CONTROL, all other users gets READ access (in this case the user profile picture is public)
cacheControl: 'max-age=31536000' - the max-age for caching is set to the maxim recommended of one year
metadata contains the metadata object to be sent to S3; here it sets fieldName to image, the value that comes from formData from frontend
key is the name of the file in the bucket - here it is environment specific, user specific (userId) plus current date and original file name

Upload the file to Amazon S3 Bucket

Finally, we upload the file to the bucket by calling the single method of the Multer middleware:

/* save profile picture */
usersRouter.post('/:userId/profile-picture', keycloak.protect(),
  upload.single("image" /* name attribute of <file> element in your form */),
  async (request, response) => {
    userIdTokenValidator.validateUserId(request);

    return response.status(HttpStatus.OK).send({
      url: request.file.location
    });
  });

If the upload is successful we send a 200 OK status back and in response we put the public url of the image from the bucket. You can get it from request.file.location attribute.

Conclusion

You should know by now how to upload a picture to Amazon S3 bucket with Angular and ExpressJS and how you can validate the upload both in frontend and backend. For suggestions please leave a comment below, or better yet make a pull request.

How to modify the size of a column in MySql from command line

Adrian Matei — Mon, 20 Apr 2020 06:55:40 +0000

This blog post presents the steps required to connect to the MySql database from the command line and modify the size of a column in a table. The example is based on the MySql database that is backing Keycloak to run www.bookmarks.dev. For a more detailed setup you can see the wiki article Keycloak MySQL Setup

This all began with an error thrown by the Chrome extension - Save to Bookmarks.dev - I was trying to select a very long text to add the bookmark's description. The error in the Keycloak logs was the following:

Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'DETAILS_JSON' at row 1
    at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3971)
    at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3909)
    at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:2527)
    at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2680)
    at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2490)
    at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:1858)
    at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2079)
    at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2013)
    at com.mysql.jdbc.PreparedStatement.executeLargeUpdate(PreparedStatement.java:5104)
    at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1998)
    at org.jboss.jca.adapters.jdbc.WrappedPreparedStatement.executeUpdate(WrappedPreparedStatement.java:537)
    at org.hibernate.engine.jdbc.internal.ResultSetReturnImpl.executeUpdate(ResultSetReturnImpl.java:175)
    ... 91 more

Fortunately in the this case the error in the logs is clear enough - the column's size seemed too short to handle the bigger selection.

So let's dig in to correct the problem.

Connect to the database

First connect to the database

mysql -u keycloak -p keycloak

where

keycloak in -u keycloak is the username
the last keycloak is the name of the database

You will be asked for the user's password (-p).

Find the right table

The column name DETAILS_JSON was mentioned in logs. To find out which table this columns belongs to I listed the
columns of all tables from the keycloak database:

select * from information_schema.columns
where table_schema = 'keycloak'
order by table_name,ordinal_position;

The result was not easy to interpret - I got a pretty long lists of columns, mainly because Keycloak uses lots of tables. So I needed a way
to grep the result. Apparently you can grep in mysql shell by issuing the following command

pager grep DETAILS_JSON;

and then run the above command again:

mysql> select * from information_schema.columns where table_schema = 'keycloak' order by table_name,ordinal_position;
| def           | keycloak     | EVENT_ENTITY                  | DETAILS_JSON                 |                3 | NULL                        | YES         | varchar   |                     5550 |                   5550 |              NULL |          NULL |               NULL | latin1             | latin1_swedish_ci | varchar(5550) |            |       | select,insert,update,references |                |                       |
519 rows in set (0.00 sec)

I could now clearly identify the table as EVENT_ENTITY

Change the column's size

First we need to disable the grep/pager to be able to see anything else which does not contain the DETAILS_JSON text in it.
You can do that by issuing the following command:

mysql> nopager;

Then display the columns of the EVENT_ENTITY table to make sure the searched column is there:

mysql> show columns from EVENT_ENTITY;
+--------------+---------------+------+-----+---------+-------+
| Field        | Type          | Null | Key | Default | Extra |
+--------------+---------------+------+-----+---------+-------+
| ID           | varchar(36)   | NO   | PRI | NULL    |       |
| CLIENT_ID    | varchar(255)  | YES  |     | NULL    |       |
| DETAILS_JSON | varchar(2550) | YES  |     | NULL    |       |
| ERROR        | varchar(255)  | YES  |     | NULL    |       |
| IP_ADDRESS   | varchar(255)  | YES  |     | NULL    |       |
| REALM_ID     | varchar(255)  | YES  |     | NULL    |       |
| SESSION_ID   | varchar(255)  | YES  |     | NULL    |       |
| EVENT_TIME   | bigint(20)    | YES  |     | NULL    |       |
| TYPE         | varchar(255)  | YES  |     | NULL    |       |
| USER_ID      | varchar(255)  | YES  |     | NULL    |       |
+--------------+---------------+------+-----+---------+-------+
10 rows in set (0.00 sec)

We can see now it has a size of 2550 characters. We'll just more than double that by altering the table:

mysql> ALTER TABLE EVENT_ENTITY MODIFY DETAILS_JSON VARCHAR(5550) ;
Query OK, 0 rows affected (0.00 sec)
Records: 0  Duplicates: 0  Warnings: 0

Run the above command again to make sure the column has now the new size.

Conclusion

This post serves me as a reminder on how to connect to a MySql database and modify a column.

Forem: CodepediaOrg

How to use test.each to avoid repetitive tests in jest

The method under test

Before

After

Test names

Conclusion

Javascript call by value or by reference, actually by sharing

Input

Output

Using a PlSql cursor in a FOR loop example

References

Real life angular inheritance example

Common Base Form Component

Inheriting components

CRUD API example with Express GraphQL

CodepediaOrg / graphql-express-crud-demo

Complete CRUD API written with graphql-express

Configure the demo project to test along

Setup Bookmarks.dev localhost REST API

Install and run the project graphql-expressjs-crud-demo

GraphiQL access

Schema

Object types and fields

Arguments

Enumeration types

Queries - the R in CRUD

Resolvers

Anatomy of the resolver

Set parameter into the resolver's context in express middleware

Mutations - the CUD in CRUD

Conclusion

GraphQL - where do I start?

1. HowToGraphQL Videos

HowToGraphQL (Fundamentals) - Introduction (1/4)

HowToGraphQL (Fundamentals) - GraphQL is the better REST (2/4)

HowToGraphQL (Fundamentals) - Core Concepts (3/4)

HowToGraphQL (Fundamentals) - Big Picture (Architecture) (4/4)

2. README file of the spec project on Github

3. https://graphql.org/learn

4. Advanced stuff

4.1 Pagination

Understanding pagination: REST, GraphQL, and Relay

4.2 Security aspects

4.3 Error handling

Handling GraphQL errors like a champ with unions and interfaces

4.4 Caching

GraphQL & Caching: The Elephant in the Room

Bonus - GraphQL Public Bookmarks

How to verify link clicked in Angular html template

The HTML template

The Angular component

Conclusion

References

Complete example of uploading images to Amazon S3 with the MEAN stack

Frontend (Angular)

Angular Template

Angular Component

The Service Method

Backend (ExpressJS)

AWS-SDK Setup

Multer Setup

Multer storage engine - MulterS3

Upload the file to Amazon S3 Bucket

Conclusion

How to modify the size of a column in MySql from command line

Connect to the database

Find the right table

Change the column's size

Conclusion

Install and run the project `graphql-expressjs-crud-demo`