DEV Community: Codever

Calculate life span and age in years in javascript/typescript

Adrian Matei — Fri, 31 Mar 2023 09:52:48 +0000

Given birthDate and the day of death as strings the following method calculates the lifespan in years. We can then reuse this function to calculate then the age of the person by setting the day of death set to current date

export const calculateLifeSpan = (birthdateString: string, deathDayString: string): number => {
    const birthdate = new Date(birthdateString);
    const dayOfDeath = new Date(deathDayString);
    let age = dayOfDeath.getFullYear() - birthdate.getFullYear();
    const monthDifference = dayOfDeath.getMonth() - birthdate.getMonth();

    if (monthDifference < 0 || (monthDifference === 0 && dayOfDeath.getDate() < birthdate.getDate())) {
        age--;
    }

    return age;
}

export const calculateAge = (birthDateStr: string): number => {
    return calculateLifeSpan(birthDateStr, new Date().toISOString().slice(0, 10))
}

The following test suite tests the calculateLifeDuration function, which takes two dates as strings and calculates the duration in years between them.

It also uses test.each to run multiple tests with different start and end dates and expected durations.

describe('calculateLifeDuration', () => {
  test.each([
    ['2021-01-01', '2021-12-31', 0],
    ['1980-01-01', '2023-03-31', 43],
    ['1995-05-15', '2023-03-31', 27],
    ['2010-10-10', '2023-03-31', 12],
  ])('calculates duration correctly between %s and %s', (startDate, endDate, expectedDuration) => {
    expect(calculateLifeDuration(startDate, endDate)).toEqual(expectedDuration);
  });
});

The next test suite tests the calculateAge function, which takes a birthdate as a string and calculates the age in years by calling the calculateLifeDuration function with the birthdate and the current date. To mock today's date in the calculateAge tests, we can use Jest's jest.spyOn method to replace the toISOString method of the Date object with a mocked version that always returns a fixed date. This way, the calculateAge function will always use the same date when calculating the age, regardless of when the test is run.

describe('calculateAge', () => {
  const fixedDate = new Date('2022-03-31T00:00:00.000Z');

  beforeEach(() => {
    jest.spyOn(Date.prototype, 'toISOString').mockReturnValue(fixedDate.toISOString());
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  test.each([
    ['1990-01-01', 32],
    ['1980-05-15', 41],
    ['2005-12-31', 16],
    ['1995-10-10', 26],
  ])('calculates age correctly for birthdate %s', (birthdate, expectedAge) => {
    expect(calculateAge(birthdate)).toEqual(expectedAge);
  });
});

In this example, we create a fixedDate object with a fixed date value that we want to use for testing. In the beforeEach hook, we use jest.spyOn to replace the toISOString method of the Date object with a mock function that always returns the fixedDate value as an ISO string. This ensures that the calculateAge function always uses the fixedDate when calculating the age, regardless of when the test is run.

In the afterEach hook, we restore the original toISOString method of the Date object to ensure that other tests are not affected by this mock.

One easy way to set the name in jest repetitive tests (test.each)

Adrian Matei — Fri, 03 Mar 2023 06:28:38 +0000

One easy way to display a custom name for each test.each test in jest, is to place the text name in the first element of each array of the input table for the method and use it as name in the test.each method - ('%s', (testname, req, expectedBookmark), as in the following snippet:

const showdown = require('showdown');
const Bookmark = require('../../model/bookmark');
const bookmarkRequestMapper = require('./bookmark-request.mapper');

jest.mock('showdown', () => {
  const makeHtml = jest.fn(() => '<p>This is a test bookmark</p>');
  return {
    Converter: jest.fn().mockImplementation(() => ({makeHtml})),
  };
});

describe('toBookmark', () => {
  const req = {
    body: {
      _id: '123',
      name: 'Test Bookmark',
      location: 'https://example.com',
      language: 'en',
      description: 'This is a test bookmark',
      tags: ['test'],
      public: true,
    },
    params: {
      userId: '456',
    },
  };

  beforeEach(() => {
    showdown.Converter.mockClear();
    showdown.Converter().makeHtml.mockClear();
    req.body.descriptionHtml = undefined;
    req.body.youtubeVideoId = undefined;
    req.body.stackoverflowQuestionId = undefined;
  });

  test.each([
    [
      'should return a new bookmark',
      req,
      new Bookmark({
        _id: 123,
        name: 'Test Bookmark',
        location: 'https://example.com',
        language: 'en',
        description: 'This is a test bookmark',
        descriptionHtml: '<p>This is a test bookmark</p>',
        tags: ['test'],
        public: true,
        userId: '456',
        likeCount: 0,
        youtubeVideoId: null,
        stackoverflowQuestionId: null,
      })
    ],
    [
      'should set youtubeVideoId if it is provided',
      {...req,
        body : {
        ...req.body,
          youtubeVideoId: 'abcd1234'
        }
      },
      new Bookmark({
        _id: '123',
        name: 'Test Bookmark',
        location: 'https://example.com',
        language: 'en',
        description: 'This is a test bookmark',
        descriptionHtml: '<p>This is a test bookmark</p>',
        tags: ['test'],
        public: true,
        userId: '456',
        likeCount: 0,
        youtubeVideoId: 'abcd1234',
        stackoverflowQuestionId: null,
      })
    ],
    [
      'should set stackoverflowQuestionId if it is provided',
      {...req,
        body : {
        ...req.body,
          stackoverflowQuestionId: 123456
        }
      },
      new Bookmark({
        _id: '123',
        name: 'Test Bookmark',
        location: 'https://example.com',
        language: 'en',
        description: 'This is a test bookmark',
        descriptionHtml: '<p>This is a test bookmark</p>',
        tags: ['test'],
        public: true,
        userId: '456',
        likeCount: 0,
        youtubeVideoId: null,
        stackoverflowQuestionId: 123456,
      })
    ],
  ])('%s', (testname, req, expectedBookmark) => {
    const resultBookmark = bookmarkRequestMapper.toBookmark(req);

    expect({...resultBookmark.toObject(), _id: {}}).toEqual({...expectedBookmark.toObject(), _id: {}});
    expect(showdown.Converter).toHaveBeenCalledTimes(1);
    expect(showdown.Converter().makeHtml).toHaveBeenCalledTimes(1);
    expect(showdown.Converter().makeHtml).toHaveBeenCalledWith('This is a test bookmark');
  });
});

Project: codever - File: bookmark-request.mapper.test.js

Of course you are free to display other data where appropiate...

Reference -

https://jestjs.io/docs/api#testeachtablename-fn-timeout

How to compare mongoose model objects in jest while excluding _id

Adrian Matei — Thu, 02 Mar 2023 06:50:20 +0000

The schema model object in Mongoose provides an _id that is of type ObjectId. If you are not interested in comparing value of this attribute when you compare it compare objects in jest, you can exclude it by calling the toObject method of the mongoose model and set the _id object to nothing via the spread operator, something similar to the following:

expect({...resultBookmark.toObject(), _id: {}}).toEqual({...expectedBookmark.toObject(), _id: {}})

The complete testing method with the setup is shown in the snippet bellow,
where expected bookmark model should match the mapped bookmark from the given request:

const showdown = require('showdown');
const Bookmark = require('../../model/bookmark');
const bookmarkRequestMapper = require('./bookmark-request.mapper');

jest.mock('showdown', () => {
  const makeHtml = jest.fn(() => '<p>This is a test bookmark</p>');
  return {
    Converter: jest.fn().mockImplementation(() => ({makeHtml})),
  };
});

describe('toBookmark', () => {
  const req = {
    body: {
      _id: '123',
      name: 'Test Bookmark',
      location: 'https://example.com',
      language: 'en',
      description: 'This is a test bookmark',
      tags: ['test'],
      public: true,
    },
    params: {
      userId: '456',
    },
  };

  beforeEach(() => {
    showdown.Converter.mockClear();
    showdown.Converter().makeHtml.mockClear();
    req.body.descriptionHtml = undefined;
    req.body.youtubeVideoId = undefined;
    req.body.stackoverflowQuestionId = undefined;
  });

  it('should use descriptionHtml if it is provided', () => {
    req.body.descriptionHtml = '<p>This is a test bookmark</p>';

    const expectedBookmark = new Bookmark({
      _id: '123',
      name: 'Test Bookmark',
      location: 'https://example.com',
      language: 'en',
      description: 'This is a test bookmark',
      descriptionHtml: '<p>This is a test bookmark</p>',
      tags: ['test'],
      public: true,
      userId: '456',
      likeCount: 0,
      youtubeVideoId: null,
      stackoverflowQuestionId: null,
    });

    const resultBookmark = bookmarkRequestMapper.toBookmark(req);

    expect({...resultBookmark.toObject(), _id: {}}).toEqual({...expectedBookmark.toObject(), _id: {}})
    expect(showdown.Converter().makeHtml).not.toHaveBeenCalled();
  });
});

Project: codever - File: bookmark-request.mapper.test.js

How to verify an object is empty object with Jest (extended)

Adrian Matei — Tue, 14 Feb 2023 07:46:18 +0000

First install jest-extended with the npm install --save-dev jest-extended command and use the toBeEmpty assertion as in the following example:

const { toBeEmpty } = require('jest-extended');
expect.extend({ toBeEmpty });

describe('setFulltextSearchTermsFilter', () => {
  test('returns filter without $text when fulltextSearchTerms is empty', () => {
    const fulltextSearchTerms = [];
    const filter = {};
    const searchInclude = 'any';
    expect(searchUtils.setFulltextSearchTermsFilter(fulltextSearchTerms, filter, searchInclude)).toBeEmpty();
  });
});

Use .toBeEmpty when checking if a String '', Array [], Object {}, or Iterable is empty. Because toBeEmpty supports checking for emptiness of Iterables, you can use it to check whether a Map, or Set is empty, as well as checking that a generator yields no values.

Project: codever - File: search.utils.spec.js

Reference -

https://jest-extended.jestcommunity.dev/docs/matchers/tobeempty

Improve Your Dev Productivity with Bookmarks, Snippets and Notes Management

Adrian Matei — Wed, 08 Feb 2023 12:27:47 +0000

As a software developer, having quick access to relevant information and resources is essential to your productivity and success. Bookmarks, snippets and notes are an important tool in achieving this, allowing you to save links to websites, articles, documentation, as well as code snippets and notes. However, with so many bookmarks and snippets, it can be challenging to find what you need quickly.

Here are some tips for using bookmark and snippet management to improve your productivity as a software developer:

Use tags to categorize your bookmarks and snippets instead of organizing your bookmarks and snippets into folders, consider using tags to categorize them. This way, you can quickly filter and search for bookmarks and snippets based on their tag, making it easier to find what you're looking for. For example, you could use tags such as "javascript," "api", "tutorial" or "your-company-name".
Keep your bookmarks and snippets up-to-date In the world of software development, information can become outdated quickly. Regularly review your bookmarks and snippets and delete any that are no longer relevant or useful. This will ensure that you have quick access to only the most accurate and up-to-date information.
Use browser & IDE extensions for better bookmark and snippet management. There are several browser extensions available that can help you manage your bookmarks and snippets more efficiently. These extensions often come with features such as tag-based organization, search functionality, and the ability to find bookmarks and snippets across devices. Consider using one of these extensions to improve your bookmark and snippet management.
Take advantage of the cloud. Storing your bookmarks and snippets in the cloud can allow you to access them from any device, regardless of where you are. This is particularly useful for developers who work on multiple devices, as it ensures that they always have access to their most important information and resources.
Use markdown for notes and snippets. Using markdown to write your notes and snippets can provide a more organized and readable format. Markdown allows you to format your text using simple syntax, making it easier to quickly read and understand your notes and snippets.

In conclusion, by using tags to categorize your bookmarks and snippets, keeping them up-to-date, utilizing browser extensions, taking advantage of the cloud, and using markdown for notes and snippets, you can improve your productivity as a software developer. Quick access to relevant information and resources, as well as organized and easily readable notes and snippets, can help you make the most of your time and stay ahead of the game.

Codever offers all this and more, plus it's free and open source at github.com/CodeverDotDev

How to set mongoose schema field from list of strings (enum)

Adrian Matei — Wed, 11 Jan 2023 10:19:47 +0000

In the following example we define template attribute to be of type String with values defined in the enum array:

const noteSchema = new Schema({
    title: {type:String, required: true},
    type: {type:String, required: true, default: 'note'},
    content: String,
    reference: String,
    tags: [String],
    template: {type:String, enum: ['note', 'checklist']},
    userId: {type: String, ref:'User'},
    __v: { type: Number, select: false}
},
{
  timestamps: true
});

How to set value of input field in angular template

Adrian Matei — Wed, 11 Jan 2023 10:10:13 +0000

To set the initial value of the input control, just use the value attribute:

<input type="text" class="form-control" placeholder="Generate Codever sharable Url"
       aria-describedby="basic-addon2"
value="{{ environment.HOST + '/bookmarks/shared/' + shareableId}}">

Project: codever - File: social-share-dialog.component.html

To understand usage of angular environment used in this snippet (environment.HOST)
see the Configure and use environment specific values in Angular and html template snippet

Reference -

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

How to compare date (no time) with current day in javascript

Adrian Matei — Wed, 11 Jan 2023 10:07:04 +0000

Get current date with new Date() and setHours to 0, 0, 0 and then you are ready to compare with the input date, which is a string in the yyyy-MM-dd format

export const isLessThanToday = (input: string): boolean => { //format of input date is YYYY-MM-DD
    const today = new Date();
    today.setHours(0, 0, 0);

    return notEmpty(input) && new Date(input) < today;
};

To test that we can use the following jest test:

    describe('isLessThanToday > ', () => {
        test.each([
            [null, false],
            [undefined, false],
            ['AXON', false],
            ['1900-01-01', true],
            ['2099-12-12', false], // TODO change this date when in 2099 :)
            [new Date().toISOString().slice(0, 10), false], //today
            [new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().slice(0, 10), true], //yesterday
            [new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10), true], //one week ago
        ])('given input date %p, it should return %p', (input, expected) => {
            expect(isLessThanToday(input)).toEqual(expected);
        });
    });

See this How to use jest test.each function to understand the usage of test.each function

How to use jest test.each function

Adrian Matei — Mon, 19 Dec 2022 10:00:44 +0000

Let's test with Jest the following isInfiniteDate function, which checks whether the given date is "infinite" in the given context:

export const isInfiniteDate = (input: string): boolean => {
    const maximumDatePossible = '9999-12-31';
    return new Date(input).getTime() === new Date(maximumDatePossible).getTime();
};

For sure, we want to test different dates with the same expected result, either true or false

To avoid "duplication" of same test with different data, you can use test.each(table)(name, fn, timeout) function, to which you can pass an Array of Arrays with the arguments that are passed into the test fn for each row.

describe('isInfiniteDate > ', () => {
    test.each([
        [null, false],
        [undefined, false],
        ['AXON', false],
        ['2021-31-31', false],
        ['2021-12-12', false],
        ['9999-12-31', true],
    ])('given input date %p , it should return %p ', (input, expected) => {
        expect(isInfiniteDate(input)).toEqual(expected);
    });
});

name is the String title of the test block - See the referenced link for the different formatting options
optionally, you can provide a timeout (in milliseconds) for specifying how long to wait for each row before aborting. The default timeout is 5 seconds.

Reference -

https://jestjs.io/docs/api#testeachtablename-fn-timeout

Do nothing on Angular material dialog scrolling

Adrian Matei — Wed, 14 Dec 2022 06:10:57 +0000

If you are using Angular Material Dialogs for example and when it pops up the page seems to move a bit, well that might be due to the scrolling strategy that the dialog is using. If you don't want to see this annoying effect you can use the NoopScrollStrategy as ScrollStrategy, thus there is no influence on scrolling when the angular material dialog is opened.

One way to do that, is to set it via ScrollStrategyOptions to replace the default behaviour. First define a scrollStrategy variable and set the value to NoopScrollStrategy by calling the noop() of the ScrollStrategyOptions in OnInit:

export class AppComponent implements OnInit {
  scrollStrategy: ScrollStrategy;
  constructor(private keycloakService: KeycloakService,
              //...
              private historyDialog: MatDialog,
              private loginDialog: MatDialog,
              private loginDialogHelperService: LoginDialogHelperService,
              private readonly  scrollStrategyOptions: ScrollStrategyOptions) {}

  ngOnInit(): void {
      this.scrollStrategy = this.scrollStrategyOptions.noop();
  }

Then in the dialog configuration (MatDialogConfig) set the scrollStrategy property to this component variable - dialogConfig.scrollStrategy = this.scrollStrategy; :

  @HostListener('window:keydown.control.h', ['$event'])
  showHistory(event: KeyboardEvent) {
    if (!this.userIsLoggedIn) {
      const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');

      this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);
    } else {
      event.preventDefault();
      const dialogConfig = new MatDialogConfig();

      dialogConfig.disableClose = false;
      dialogConfig.autoFocus = true;
      dialogConfig.width = this.getRelativeWidth();
      dialogConfig.height = this.getRelativeHeight();
      dialogConfig.scrollStrategy = this.scrollStrategy;
      dialogConfig.data = {
        bookmarks$: this.userDataHistoryStore.getAllHistory$(this.userId),
        title: '<i class="fas fa-history"></i> History'
      };

      const dialogRef = this.historyDialog.open(HotKeysDialogComponent, dialogConfig);
      dialogRef.afterClosed().subscribe(
        data => {
          console.log('Dialog output:', data);
        }
      );
    }
  }

For the login required dialog, this option is injected via a service - const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');, but it follows basically the same principle:

@Injectable()
export class LoginDialogHelperService {

  scrollStrategy: ScrollStrategy;

  constructor(private readonly scrollStrategyOptions: ScrollStrategyOptions) {
    this.scrollStrategy = this.scrollStrategyOptions.noop();
  }

  loginDialogConfig(message: string) {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.scrollStrategy = this.scrollStrategy;
    dialogConfig.data = {
      message: message
    };

    return dialogConfig;
  }
}

Reference -

https://material.angular.io/cdk/overlay/api#ScrollStrategyOptions

How to configure and use environment specific values in Angular

Adrian Matei — Fri, 09 Dec 2022 06:15:33 +0000

Configuring application environments

First define different environment files for the environments you might have under the project's src/environments/ folder. Below there is an extract from environment.ts (used for development) and environment.prod.ts used for production:

//environment.ts
export const environment = {
  production: false,
  HOST: 'http://localhost:4200',
  API_URL: 'http://localhost:3000/api',
};

//environment.prod.ts
export const environment = {
  production: true,
  HOST: 'https://www.codever.land',
  API_URL:  'https://www.codever.land/api',
};

The build command (and ng serve) uses environment.ts as the build target when no environment is specified.

The main CLI configuration file, angular.json, contains a fileReplacements section in the configuration for each build target, which lets you replace any file in the TypeScript program with a target-specific version of that file. This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.

By default, no files are replaced. You can add file replacements for specific build targets. For example

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    …

This means that when you build your production configuration with ng build --configuration production, the src/environments/environment.ts file is replaced with the target-specific version of the file, src/environments/environment.prod.ts.

You can add additional configurations (e.g. pro different stages) as required.

Using environment-specific variables in your app

Then in your code import environment and use the values defined in the files above, as in the following example:

import { environment } from '../../../environments/environment'
import { localStorageKeys } from '../model/localstorage.cache-keys';

@Injectable()
export class SystemService {
  cachedQueries = {
    PUBLIC_TAGS_LIST: `${environment.API_URL}/public/bookmarks`
  }

 //...
}

If you want to use environment variables in your angular html template, then just define a local variable for the imported environment and use it in the template, like in the following example:

import { environment } from 'environments/environment';

@Component({
  selector: 'app-social-share-dialog',
  templateUrl: './social-share-dialog.component.html',
  styleUrls: ['./social-share-dialog.component.scss'],
  providers: [DatePipe]
})
export class SocialShareDialogComponent implements OnInit {

  sharableId$: Observable<any>;
  readonly environment = environment;
  //...
}

The html part, where HOST value is used:

    <div>
      <h3>Shareable</h3>
      {{ environment.HOST + '/bookmarks/shared/' + (sharableId$ | async).shareableId}}
    </div>

Reference -

https://angular.io/guide/build#using-environment-specific-variables-in-your-app

How to add class conditionally to css element in angular

Adrian Matei — Mon, 05 Dec 2022 09:13:45 +0000

Use the ngClass input attribute with the object notation, where the keys are CSS classes that get added when the expression given in the value evaluates to truthy value, otherwise they are removed.

In the example below the class navbar-dev-green is added to the nav element only for the dev environment (non-prod):

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"
     [ngClass]="{'navbar-dev-green' : environment.production === false}" >
...
</nav>

Project: codever - File: navigation.component.html

To add multiple classes you can list them with space between them. To add different conditions for each class use a boolean expression evaluator for each class as shown in the example in the angular documentation:

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Reference -

https://angular.io/api/common/NgClass