Author: Learners Store

How to access token in Service file of a .NET using Dependency Injection ?

If a token obtained during authentication, We can store it in a service that’s injected into your classes. Following example illustrates how to access token in a service file.

public class UserService 
{
  private readonly IHttpContextAccessor _httpContextAccessor;
  
  public UserService(IHttpContextAccessor httpContextAccessor)
  {
     _httpContextAccessor = httpContextAccessor;
  }
  
  public void SomeMethod()
  {
    var accessToken = _httpContextAccessor.HttpContext.Request.Headers["Authorization"]
  }

}

Suppose If we receive token in the format of Bearer Your_Token and we want only token part then we can get it as follows

var parts = accessToken.ToString().Split(‘ ‘);

var token = parts[1]

If the Authorization header doesn’t start with Bearer, we should handle it appropriately based on our application’s requirements.

Solution: TypeError: Cannot read properties of undefined (reading ‘DemoContainer’) and failing because of components={[‘DatePicker’, ‘TimePicker’]} in the DemoContainer tag.

We will get this error because we are mocking ‘@mui/x-date-pickers/internals/demo’ as follows.

jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

but here it is not covering  components={[‘DatePicker’, ‘TimePicker’]} in the <DemoContainer components={[‘DatePicker’, ‘TimePicker’]}> as we are returning null in the mock. So it is throwing the error as Cannot read properties of undefined (reading ‘DemoContainer’). So here we need to mock DatePicker and TimePicker as follows.

import { render } from '@testing-library/react';
import * as React from 'react';
import App from './index';


const DatePickerMock = () => <div>Mocked DatePicker</div>;
const TimePickerMock = () => <div>Mocked TimePicker</div>

jest.mock('@mui/x-date-pickers/internals/demo', () => ({
  DemoContainer: jest.fn(({ components }) => (
    <div>
      {components.includes('DatePicker') && <DatePickerMock />}
      {components.includes('TimePicker') && <TimePickerMock />}
    </div>
  )),
}))

const renderApp = () => {
  return render(
    <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

Solution: Jest encountered an unexpected token and failing at —- import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’

If test cases are failing with the error message Jest encountered an unexpected token and shows SyntaxError: Unexpected token ‘export’ at line import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’, then we need to mock ‘@mui/x-date-pickers/internals/demo’ as follows.

import * as React from 'react';
import { render } from '@testing-library/react';
import App from './index';


jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

const renderApp = () => {
  return render(
        <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

Input tag with digits 1-9 in ReactJS

In React, to allow only digits from 1-9, we can use Regular expression in onChange handler as follows

import React, { useState } from 'react'

const Test= () => {

const [number, setNumber] = useState('');


const handleChange = (event) => {

  const enteredValue = event.target.value.slice(0, 1);;

  const re = /^[1-9\b]+$/;

  if (enteredValue === '' || re.test(enteredValue)) {          
      setNumber(enteredValue)
   }
 }

 return (
        <input value={number} onChange={(event) => handleChange(event)} />
    )
}

export default Test;