DEV Community: Adrian Matei

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.

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.

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

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