DEV Community: markzzw

Pre-commit with husky & lint-staged

markzzw — Wed, 24 Jan 2024 07:57:48 +0000

In the most modern projects, will do some scripts to keep the team's code style uniform, such as prettier, es-lint, style-lint, unit test, and so on. Those scripts are individual, we only can run them one by one in the terminal before we commit the code, which is inconvenient.

So let's import the husky & lint-staged to help us run those scripts at the same time automatically.

Husky

Let's set up the husky first.

Husky is a popular Git hook tool that helps developers enforce and automate certain actions and scripts before committing or pushing code to a Git repository. It works by intercepting Git commands and executing predefined scripts or actions. It supports various hooks, such as pre-commit, pre-push, pre-rebase, and more. These hooks allow developers to run tasks like linting code, running tests, formatting code, or performing other custom actions before certain Git operations.

Step 1

Walk in Husky website.

Step 2

Install the husky with its document guide:

npm install husky --save-dev

Step 3

Add a new script in package.json:

{
    "script": {
        "prepare": "husky install"
    }
}

Notice, normally, this script will install a husky shell script in the root folder. But if your project's git is not in the front-end folder(where package.json is), then you should change the script.

{
    "script": {
        "prepare": "cd /path/to/where-.git-folder-is && husky install /path/to/where-husky-need-to-install/.husky"
    }
}

For Example, If my project folder constructor is like this:

------project
    |--.git/
    |--backend/
    |--frontend/
        |--package.json

In this situation, the script in the package.json should be:

{
    "script": {
        "prepare": "cd .. && husky install frontend/.husky"
    }
}

Step 4

Run prepare script, the husky will create a .husky folder where you set.

npm run prepare

In this folder, you can find a pre-commit file like this:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run pre-commit

Notice, if your project's git is not in the front-end folder(where package.json is), you also need to change this file:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd frontend && npm run pre-commit

So far, the husky is set down, but I believe you may find out that we don't mention the npm run pre-commit because this is the next part we will go through.

Lint-staged

In the last part, we talked about npm run pre-commit, so let's add the pre-commit script in the package.json first:

{
    "script": {
        "prepare": "husky install",
        "pre-commit": "lint-staged" // the new tool
    }
}

Now you can see a new tool lint-staged comes up.

lint-staged is a tool that runs code checks during the pre-commit stage in Git. It allows you to configure code-checking tools, such as ESLint and Prettier, to run only on the staged files before they are committed. This ensures that only code that adheres to the defined code standards is committed to the version control system.

By using lint-staged, you can apply custom code-checking scripts to the staged files before committing. This helps improve code quality, maintain consistent code styles, and reduce code conflicts among team members.

Typically, you would install lint-staged in your project and define the code-checking tools and their corresponding configurations in the project's configuration file, such as package.json. Once configured, every time you run the git commit command, lint-staged automatically runs the specified code-checking tools on the staged files. If the code checks fail, the commit is blocked, allowing you to fix the issues before attempting to commit again.

In summary, lint-staged is a tool that facilitates running code-checking tools before committing code. It helps improve code quality and consistency and assists teams in better-managing code during collaborative development.

Step 1

First, install it:

npm install --save-dev lint-staged

Step 2

Now you can config it in your package.json, here is the guide doc:

{
    "lint-staged": {
        "file-path": ["script1", "script2"],
        "RegExp-pattern": ["script1", "script2"],
    }
}

For example

{
    "lint-staged": {
        "src/**/*.{ts,tsx}": [
            "npm run test",
            "npm run prettier"
        ]
    }
}

Notice 1

You can set multiple patterns to match different files for different scripts.

Notice 2

Lint-staged only works on staged files, which means it only runs the script for files that are added and changed.

Step 3

Now you can try to commit your code to see what will happen.

In the end

Those two tools help us to run the lint scripts before we push the code to the remote repository, to help us not let 💩 slip into our code base, they are very useful.

Thx for reading, that's all my sharing.

My bento resume

markzzw — Tue, 23 Jan 2024 08:32:35 +0000

Hi here is my bento-style resume and bento website, welcome!
Please left your suggestion or comment anything as free.

bento.me-zhangzewei

Advance JavaScript - Promise

markzzw — Tue, 23 Jan 2024 08:19:30 +0000

This article primarily covers some common functions and usage techniques related to Promises, aiming to assist readers in utilizing Promises more easily to solve problems.

Basic

Promise

A Promise is a JavaScript object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It is commonly used for handling asynchronous operations such as network requests, file operations, and database queries.

A Promise can be in one of three states:

Pending: The initial state. The Promise is neither fulfilled nor rejected.

Fulfilled: The Promise has been successfully resolved with a value. This state is also referred to as "resolved".
Rejected: The Promise encountered an error or failure during the asynchronous operation.

new Promise() returns a Promise object, this object can handle the result of the async.

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* success */){
    resolve(value);
  } else {
    reject(error);
  }
});

// Ajax
const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
  });

  return promise;
};

Promise.then(successFn, failFn);

When we need to handle the result of an asynchronous operation, we use the then method after a Promise object to process the result. The then method takes two parameters: the first one is the success callback function that receives the value resolved by resolve, and the second one is the error callback function that receives the value rejected by reject.

getJSON("/posts.json").then(function(json) {
  console.log('result: ' + json);
}, function(error) {
  console.error(error);
});

The first successFn of the then function can return a value, which can then be accessed by the successFn of the next then function, forming a chain of calls.

// You can use chaining to perform multiple asynchronous operations in sequence.
getJSON("/post/1.json").then(function(post) {
  setPost(post.article);
  return getJSON(post.commentURL);
}).then(function (comments) {
  setComments(comments);
}, function (err){
  console.log("rejected: ", err);
});

Promise.catch(failFn);

As shorthand of the then(null | undefined, failFn), You can place an error handler at the end to listen for errors from the previous then statements.

const promise = new Promise((resolve, reject) => {
  resolve('resolve');
});

promise.then(res => {
  console.log(res);
  throw 'error msg';
}).catch(err => {
  console.log(err)
})

// "resolve"
// "error msg"

Once an error occurs, the execution of statements after the error will be stopped.

const promise = new Promise((resolve, reject) => {
  resolve('resolve');
});

promise.then(res => {
  throw 'error msg';
  console.log(res);
}).catch(err => {
  console.log(err)
})

// "error msg"

const promise = new Promise((resolve, reject) => {
  reject('rejected');
});

promise.then(res => {
  throw 'error msg';
  console.log(res);
}).catch(err => {
  console.log(err)
})

// "rejected"

If a resolve operation is performed before a reject operation, the reject operation will not be executed. Conversely, if a reject operation is performed before a resolve operation, the resolve operation will not be executed. This follows the principle of Promises that once a state transition occurs, it cannot be changed again.

If an error occurs outside the current event loop, it cannot be caught.

const promise = new Promise((resolve, reject) => {
  resolve('resolved')
  setTimeout(function () { throw 'error test' }, 0);
});

promise.then(res => {
  console.log(res);
}).catch(err => {
  console.log('err',err)
})

Because catch is a shorthand for then, you can chain then after the catch. However, if there is a catch method followed by a then method, any error that occurs before the subsequent catch method will not be caught.

promise.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// carry on

Promise.finally(onFinally);

The finally() method of a Promise instance is used to register a function that will be called when the promise is settled (either resolved or rejected). It immediately returns an equivalent Promise object, which allows you to chain other Promise methods. However, when chaining other methods, the finally() method will always return the previous result.

Senior

Promise.all(promiseArr)

The static method Promise.all() takes an iterable of Promises as input and returns a Promise. When all the input Promises are fulfilled, the returned Promise is also fulfilled (even if the iterable is empty) and resolves to an array containing all the fulfilled values. If any of the input Promises are rejected, the returned Promise is rejected with the reason of the first rejection.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// [3, 42, "foo"]

const promise1 = Promise.reject(3); // reject
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
}).catch(error => {
  console.log('error', error)
});
// "error" 3
// then does not react, catch will get the first reject value.

If we attach a catch function to each Promise instance, we can retrieve the corresponding catch value inside Promise.all(). If the catch function does not return any value, the corresponding item in the values array within the then method of Promise.all() will be undefined.

Promise.allSettled(promiseArr)

This function addresses the issue of Promise.all terminating when encountering a rejection. It will execute all the promises and then retrieve the results in the then method. It's important to note that the structure of the resolved object and the rejected object may differ slightly.

Promise.any(promiseArr)

The static method Promise.any() takes an iterable of Promises as input and returns a Promise. When any of the input Promises is fulfilled, the returned Promise is fulfilled and returns the first fulfilled value. If all the input Promises are rejected (including when an empty iterable is passed), it will be rejected with an array of rejection reasons AggregateError

Promise.race(promiseArr)

The static method Promise.race() takes an iterable of Promises as input and returns a Promise. The returned Promise will be settled (either fulfilled or rejected) as soon as the first Promise in the iterable is settled.

MDN

Advance JavaScript - Function

markzzw — Tue, 23 Jan 2024 08:02:24 +0000

Generally speaking, a function is a "subroutine" that can be called by external code (or internally through recursion). Similar to a program itself, a function consists of a series of statements called the function body. Values can be passed to a function, and the function will return a value. In JavaScript, functions are considered first-class objects because they can have properties and methods just like any other object. The difference is that functions can be invoked. This article primarily covers some practical techniques for using functions in JavaScript, intending to help developers enhance their skills during the development process.

IIFE

(function () {
  statements;
})();

To achieve immediate execution, you can wrap a function with parentheses outside the function body and then invoke it with parentheses. However, the contents inside this function cannot be accessed from outside unless they are attached to an existing object.

When working on a project without using a framework and writing pure JavaScript, this approach of using immediately invoked functions can be used to isolate variables and achieve variable scoping. By encapsulating code within the function, variables declared inside the function are not accessible from outside, providing a form of variable isolation. If data needs to be shared between different parts of the code, a common object can be used to pass the data between functions or modules.

arguments

Inside a function, you can access the data of the received arguments. The arguments object can only be used within the function.

function A() {
  console.log(arguments)
}

A(1,2,3, [1,2,3]);
/*
{
  "0": 1,
  "1": 2,
  "2": 3,
  "3": [
    1,
    2,
    3
  ]
}
*/

The arguments object is an object that behaves like an array-like object. It is a collection of the arguments passed to a function. However, it is not a true array and does not have access to array methods directly. To perform array operations on the arguments object, you need to convert it into a proper array using the Array.from(arguments) method or by spreading it into an array [...arguments]. This conversion allows you to use array methods and perform various array operations on the arguments.

Function.length

You can retrieve the number of parameters inside the parentheses of a function. If there are default parameters defined, the count will represent the number of parameters before the default parameters are accounted for.

closure

A closure is a combination of a function and the lexical environment (the surrounding state) in which the function was declared. In other words, closures allow developers to access the scope of an outer function from an inner function. In JavaScript, closures are created simultaneously with the creation of a function.

We can utilize the characteristics of closures to perform certain timer operations:

1. debounce

const debounce = (fn, during) => {
    const timer = null;
    return (...args) => {
        clearTimeout(timer); 
        timer = setTimeout(() => { fn(...args) }, during);
    }
}

2. throttle

const throttle = (fn, during) => {
    const timer = null;
    return (...args) => {
        if (!timer) {
            timer = setTimeout(() => {
                fn(...args);
                clearTimeout(timer);
                timer = null;
            }, during);
        }
    }
}

Recursion

Recursion is a process in which a function calls itself. It is a technique where a function solves a problem by breaking it down into smaller, similar subproblems. In recursion, the function continues to call itself with different inputs until a base condition is met, which stops the recursive calls. This allows the function to solve complex problems by solving simpler versions of the same problem repeatedly. Recursion can be a powerful tool in solving problems that exhibit repetitive or self-referential structures.

let x = 0;
// “x < 10” 
while (x < 10) {
  // do something
  x++;
}

function loop(x) {
  // “x >= 10” 
  if (x >= 10) {
    return;
  }
  // do something
  loop(x + 1); // Recursion
}
loop(0);

Fibonacci sequence

function fib(n) {
    if (n === 1 || n === 2) return n;
    return fib(n - 1) + fib(n - 2)
}

Currying

Using recursion, it is also possible to achieve currying. Currying is a function transformation technique that converts a callable function f(a, b, c) into a callable form f(a)(b)(c).
Currying does not invoke the function directly. It is merely a function transformation technique that converts a function into a curried form without actually executing it.

When a function is curried, it returns a new function for each partial application of its arguments. These returned functions can be invoked later with the remaining arguments to produce the final result. Currying enables the creation of more specialized and reusable functions by breaking down a function with multiple arguments into a series of functions with single arguments.

In essence, currying transforms the way a function is called, allowing for more flexible and modular usage, but it does not trigger the execution of the original function until all the necessary arguments have been provided.

const curry = fn => 
    curried = (...args) => 
        (...arg) => {
            // Recursion
            if (arg.length === 0) {
                return fn(...args, ...arg)
            } else {
                return curried(...args, ...arg)
            }
        }
    const sum = (...args) => {
        return args.reduce((a,b) => a+b, 0);
    }

const curriedSum = curry(sum);
console.log('curry test',curriedSum(1)(1,3)(3,3,3,3,3,3)())

// "curry test" 23

Skills of writing unit test for react

markzzw — Fri, 29 Dec 2023 17:51:48 +0000

After writing some unit tests for react project, I summarised some skills of writing unit tests for react.

demo code repo: https://github.com/zhangzewei/Skills-of-writing-unit-test-for-react-demo-code

Tech stack

This is the tech stack of it, we need to prepare it.

vite - react (react 18)
vitest (1.0.4)
@testing-library/react (14.1.2)

Setup test env

Before we start it, we need to set up the test env.

1. install dependencies

npm install vitest
npm install @testing-library/jest-dom
npm install @testing-library/react

2. Add configuration in vite-config

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    css: true,
    include: ['src/**/*.test.[jt]s?(x)'],
  },
  envDir: 'env',
})

3. Create `./src/test/setup.ts`

import '@testing-library/jest-dom';

vi.stubGlobal('globalEventYonWantToMock', vi.fn());

4. Set script in package.json

{
    "scripts": {
        "test": "vitest",
    }
}

Then we can run the script npm run test in the console.

Test render with different props

In this kind of Component, use render() to render different props, and test the component render if is correct.

import { render } from "@testing-library/react";
import Component from "./index";

describe('Component', () => {
    it('should render correctly when set prop1', () => {
        const { queryByTestId } = render(
            <Component prop='prop1' />
        );
        expect(queryByTestId('testid1')).toBeTruthy();
    });
    it('should render correctly when set prop2', () => {
        const { queryByTestId } = render(
            <Component prop='prop2' />
        );
        expect(queryByTestId('testid2')).toBeTruthy();
    });
})

Test with HTML_EVENTs

When talking about unit tests, we can't avoid the event test, there are two ways to write it, and we need to use act(() => {}) to wrap the event step.

Trigger event directly

This way is always used to test the click events.

import { render, act } from "@testing-library/react";
import Component from "./index";

describe('Component', () => {
    it('should do something when click xxx button', () => {
        const { queryByTestId } = render(
            <Component />
        );
        const buttonEle = queryByTestId('button');
        act(() => {
            buttonEle.click();
        });
        expect(/* some result after click button */).toBe();
    });
})

Also if Component needs to pass the function through the props, we can test the function if be called, we can use vi.fn() as the mock spy.

import { render, act } from "@testing-library/react";
import Component from "./index";

describe('Component', () => {
    it('should do something when click xxx button', () => {
        const spy = vi.fn();
        const { queryByTestId } = render(
            <Component onClick={spy} />
        );
        const buttonEle = queryByTestId('button');
        act(() => {
            buttonEle.click();
        });
        expect(spy).toHaveBeenCalledTimes(1);
    });
})

Trigger event by using `fireEvent` provided by the `@testing-library/react`

This way is mostly used on input event, scroll event, and some events that need to pass/get value.

import { render, act } from "@testing-library/react";
import Component from "./index";

describe('Component', () => {
    // change event
    it('should do something when trigger some event, () => {
        const spy = vi.fn();
        const { queryByTestId } = render(
            <Component onChange={spy} />
        );
        const inputEle = queryByTestId('input');
        act(() => {
            fireEvent.change(inputEle, {target: {value: '23'}});
        });
        expect(spy).toHaveBeenCalledTimes(1);
    });
    // keyDown event
    it('should do something when trigger some event, () => {
        const spy = vi.fn();
        const { queryByTestId } = render(
            <Component onChange={spy} />
        );
        const inputEle = queryByTestId('input');
        act(() => {
            fireEvent.keyDown(inputEle, {
                target: {value: '23'},
                code: 'Enter'
            });
        });
        expect(spy).toHaveBeenCalledTimes(1);
    });
});

If your event function has been wrapped by a setTimeOut function like debounce/throttle, then we need to use async/await and waitFor(() => {}) to help us.


import { render, act, waitFor } from "@testing-library/react";
import Component from "./index";

describe('Component', () => {
    // usually we will use debounce to wrap a change function
    it('should do something when trigger some event, async () => {
        const spy = vi.fn();
        const { queryByTestId } = render(
            <Component onChangeWrappedByDebounce={spy} />
        );
        const inputEle = queryByTestId('input');
        act(() => {
            fireEvent.change(inputEle, {target: {value: '23'}});
        });
        // due to use the debounce
        await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
    });
});

Test hook function

Usually, we will write hooks to help us, so we need to test the hook function too, for hook we need to use renderHook() to help us.

renderHook also is provided by @testing-library/react.

Here is a hook function that I write to get detail data, I use the useEffect to update the detail when I change the dependencies, and I use a loading status from the redux store.

This is a typical fetch data hook, let's test it.

useDetailData.ts

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { IReuqestProps } from "./request";
import { updateLoading } from "./loadingStore";

export default function useDetailData<DETAIL_TYPE>(
    getDataRequest: (...args: any[]) => Promise<IReuqestProps<DETAIL_TYPE>> | undefined,
    dependencies: unknown[],
) {
    const dispatch = useDispatch();
    const [detail, setDetail] = useState<DETAIL_TYPE | null>(null);
    useEffect(() => {
        const shouldGetDetail = dependencies.find(d => !!d);
        if (!!shouldGetDetail) {
            dispatch(updateLoading(true));
            getDataRequest(...dependencies)?.then(res => {
                res.data && setDetail(res.data);
            }).finally(() => {
                dispatch(updateLoading(false));
            });
        } else {
            setDetail(null);
        }
    }, dependencies);

    return detail;
}

useDetailData.test.tsx
First I write a function to mock a fetch function, because we use the Promise the setTtimeOut function, so we need to use async/await.

As I noticed I use a loading status from redux store, so we also need to mock the redux, so I write the ReduxProviderWrapper.

All right, all the setups are ready, now we use the renderHook() to render our hook, the first param of the renderHook is a function that we can set the props, the props are what the hook function params have been, and we can set initialProps in the second param of the renderHook, so that we can use the rerender(newProps) returned by renderHook to change dependencies, and test the result if is correct, and don't forget to set the wrapper ReduxProviderWrapper in the second param of renderHook when we use the redux.

import { renderHook, waitFor } from '@testing-library/react'
import useDetailData from './useDetailData'
import { ReduxProviderWrapper } from '../../test/utils'
import store from "./store";

const ReduxProviderWrapper = ({ children }: PropsWithChildren) => (
    <Provider store={store}>{children}</Provider>
);

describe('useDetailData', () => {
    let getMockPromise: any;
    beforeEach(() => {
        getMockPromise = (data: any) => {
            return function() {
                return Promise.resolve({
                    code: 200,
                    data,
                    message: 'success',
                })
            }
        }
    })
    it('should return the data with the succeed http request', async () => {
        const { result, rerender } = renderHook(
            (props) => useDetailData(props.promise, props.dependencies),
            { 
                wrapper: ReduxProviderWrapper,
                initialProps: {
                    promise: getMockPromise('data'),
                    dependencies: ['test dependency']
                }
            }
        );
        await waitFor(() => {
            expect(result.current).toBe('data');
        });
        rerender({promise: getMockPromise('data2'), dependencies: ['test dependency changed'] });
        await waitFor(() => {
            expect(result.current).toBe('data2');
        });
    });
});

Now we finished most tests of this hook, but if we need to get our coverage to be 100% we still need to test one if we don't set any dependency, we just need to add one more test case.

it('should return the null without any dependency', async () => {
    const { result } = renderHook(
        () => useDetailData(getMockPromise('data'), []),
        { wrapper: ReduxProviderWrapper }
    );
    await waitFor(() => {
        expect(result.current).toBe(null);
    });
});

Then we can get our satisfactory test coverage report.
Test coverage
File|% Stmts|% Branch|% Funcs|% Lines|Uncovered Line
-|-|-|-|-|-

useDetailData.ts|100|100|100|100|

Test with react-router

If we use the react-router, we also need to provide the router context when we test it.

How to provide router context? Using MemoryRouter which is provided by react-router.

For example, I test a hook using the router hook useLocation(), so I need to provide a router context as a wrapper for renderHook().

useQuery hook

import React from "react";
import { useLocation } from "react-router-dom";

export default function useQuery() {
    const { search } = useLocation();
    return React.useMemo(() => new URLSearchParams(search), [search]);
}

useQuery.test.tsx
Through the initialEntries props to mock the route currently used.

import { render } from "@testing-library/react";
import useQuery from "./useQuery";
import { RouterProviderWrapper } from "../../test/utils";

const RouterProviderWrapper = (props: MemoryRouterProps) => (
    <MemoryRouter {..._omit(props, 'children')}>
        {props.children}
    </MemoryRouter>
);

describe("useQuery", () => {
    it('should return the query when there is a query string on the url.', () => {
        const Test = () => {
            const query = useQuery().get('value');
            return <div data-testid="test">{query}</div>;
        }
        const { queryByTestId } = render(
            <RouterProviderWrapper initialEntries={['/test-url?value=testValue']}>
                <Test />
            </RouterProviderWrapper>
        );
        const ele = queryByTestId('test');
        expect(ele).toHaveTextContent('testValue');
    });
})

Test with the mock function

Sometimes we should mock some functions to return the result as we need so that we can test the function's behavior if is correct.

For this vitest provide the vi.mock('path/of/import/function') & vi.mocked().mockReturnValue().

usePosts.ts
In this hook, the request function getPost is a fetch function imported from the request file, but when we test it we don't want to get the real data back, we need to use mock data so that we can control the expct statement.

import { useState, useEffect } from "react";
import { getPosts } from "./request";
import { Post } from "./dto.ts";

export default function usePosts (query: string) {
    const [posts, setPosts] = useState<Post[]>([]);
    const [loading, setLoading] = useState(false);
    const handleGetPosts = () => {
        setLoading(true);
        query && getPosts(query).then(res => {
            if (res.data && res.data.length) {
                setPosts(res.data);
            }
        }).finally(() => setLoading(false));
    }
    useEffect(() => {
        handleGetPosts();
    }, [query]);
    return { posts, loading };
}

usePost.test.ts
First use vi.mock() to mock the import function, this should do outside the describe, this is a requirement from vitest.

Then use vi.mocked(importFunction).mockReturnValue(mockValue) to mock the function and its return value.

Also should use async/await & waitFor because of the promise fetching.

import { renderHook, waitFor } from "@testing-library/react";
import usePost from "./usePost";
import { getPost } from "./request";

vi.mock('./request', () => {
    return {
        getPost: vi.fn(),
    }
});

describe('usePost', () => {
    vi.mocked(getPost).mockReturnValue(
        Promise.resolve(
            {
                data: [
                    {
                        id: 'testid',
                        title: 'title',
                        content: 'content'
                    }
                ]
            }
        )
    )
    it('should return the data with the succeed http request', async () => {
        const { result } = renderHook(
            () => usePost('query'),
        );
        expect(result.current.loading).toBe(true);
        expect(result.current.post.length).toBe(0);
        await waitFor(() => {
            expect(result.current.loading).toBe(false);
            expect(result.current.post.length).toBe(1);
        });
    });
});

Summary

At the end of this document, we have learned so many skills of writing unit tests for react, I hope those skills can help you to write unit tests easier.

Thx for reading.

The practice of using Microsoft OAuth in the React hook

markzzw — Wed, 27 Dec 2023 07:47:06 +0000

OAuth is helpful to let developers get user information easily, here I will show you the usage with the Microsoft OAuth in the react hook way, let's start the travel.

Config in Azure

Register your app

Note: Remember the application ID and Directory ID we will use them in the next step

Set up your react project

Node modules

First, we need to install the dependencies.

npm install @azure/msal-browser
npm install @azure/msal-react

Create a msconfig.js file

msconfig.js

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here", // application id
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // directory id
        redirectUri: "http://localhost:3000", // after auth success, will redirect in this uri
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
    },
}

Create a Microsoft auth provider

If we want to use it in the react hook way, we need to create a provider.

MsAuthProvider.jsx

import * from "react";
import { MsalProvider } from '@azure/msal-react';
import { PublicClientApplication } from '@azure/msal-browser';
import { msalConfig } from './msconfig.js';

// create msal instance and export it for use.
export const msalInstance = new PublicClientApplication(msalConfig);

export default function MsAuthProvider({ children }) {
    return <MsalProvider instance={msalInstance}>
        {children}
    </MsalProvider>
}

Use MsAuthProvider to warp your react application

In the App.jsx, we need to do the refactor as the follows.

import * from 'react';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
import App from './App.jsx'
import MsAuthProvider from './msAuthProvider/index.jsx';
import SignIn from './pages/signin/index.jsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <MsAuthProvider>
        <AuthenticatedTemplate>
          <App />
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
          <SignIn />
        </UnauthenticatedTemplate>
    </MsAuthProvider>
)

We can use the AuthenticatedTemplate and UnauthenticatedTemplate provided by the @azure/msal-react, it's helpful to control of the displaying component, we don't need to handle the authrized status, MsAuthProvider will handle this for the app.

Create SignIn component

SignIn component index.jsx

import * from 'react';
import { Card, Typography, CardBody, CardFooter, Button } from "@material-tailwind/react";
import { useSelector } from "react-redux";
import { useMsal } from "@azure/msal-react";

export default function SignIn() {
    const handleLogin = () => {
        // this will open a popup for signin, after singin popup will be close, then
        // app will redirect to the redirectUri as the config in msalConfig
        instance.loginPopup({
            scopes: ["User.Read"]
        }).catch((e) => console.log(e));
    };

    return (
        <div className="flex justify-center mt-32">
            <Card className="w-96">
                <CardBody className="flex flex-col gap-4 place-items-center">
                    <Typography variant="h3">
                        Sign In
                    </Typography>
                </CardBody>
                <CardFooter className="pt-0">
                    <Button
                        className="bg-blue-900"
                        fullWidth
                        onClick={handleLogin}
                    >
                        Sign In With Microsoft
                    </Button>
                </CardFooter>
            </Card>
        </div>
    )
}

Get user information

profile.jsx

import *, { useEffect } from "react";
import { useMsal } from '@azure/msal-react';

export default function Profile() {
    const [profileData, setProfileData] = useState(null);
    const { instance, accounts } = useMsal();
    const getProfile = async () => {
        // get access token by instance, this instance is provided by MsAuthProvider
        const accessToken = await instance.acquireTokenSilent({
            scopes: ["User.Read"]
            account: accounts[0],
        }).then((response) => response.accessToken);
        const headers = new Headers();
        const bearer = `Bearer ${accessToken}`;
        headers.append("Authorization", bearer);
        const options = {
            method: "GET",
            headers: headers
        };
        // fetch user information
        fetch("https://graph.microsoft.com/v1.0/me", options)
            .then(res => res.json())
            .then((res) => setProfileData(res))
    }

    useEffect(() => {
        if (!profileData) {
            getProfile();
        }
    }, [profileData]);

    return (
        <div className="flex flex-col items-center">
            {
                profileData && <div className="flex flex-col items-center">
                    <p>
                        <strong>First Name: </strong> {profileData.givenName}
                    </p>
                    <p>
                        <strong>Last Name: </strong> {profileData.surname}
                    </p>
                    <p>
                        <strong>Email: </strong> {profileData.userPrincipalName}
                    </p>
                    <p>
                        <strong>Id: </strong> {profileData.id}
                    </p>
                </div>
            }
            <button onClick={getProfile}>Get user information</button>
        </div>
    );
};

Here we need to get access token so we use the ["User.Read"] as the scpoes param, if you want to get id token, you should use the ['openid'] as the scpoes param.

Integration with axios

Axios has interceptors can help us to add some configuration before request, let's integrate axios for the requests.

request.js

import axios from 'axios'
import { msalInstance }  from './msAuthProvider/index.jsx';
const request = axios.create({
  baseURL: '/'
})
// add 
request.interceptors.request.use(async config => {
    // msalInstance is exported by msAuthProvider file, because we can not use the hook here
    const accounts = msalInstance.getAllAccounts();
    if (accounts.length > 0) {
        const accessToken = await instance.acquireTokenSilent({
            scopes: ["User.Read"]
            account: accounts[0],
        }).then((response) => response.accessToken);
        if (accessToken) {
            config.headers.Authorization = `Bearer ${accessToken}`
        }
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});

export default request;

Then we can use axios request like this.

Refactor profile.jsx

import *, { useEffect } from "react";
import { useMsal } from '@azure/msal-react';
import request from './request.js'

export default function Profile() {
    const [profileData, setProfileData] = useState(null);
    const { instance, accounts } = useMsal();
    const getProfile = () => {
        // replce fetch by axios request
        request.get("https://graph.microsoft.com/v1.0/me")
            .then((res) => setProfileData(res))
    }

    useEffect(() => {
        if (!profileData) {
            getProfile();
        }
    }, [profileData]);

    return (
        <div className="flex flex-col items-center">
            {
                profileData && <div className="flex flex-col items-center">
                    <p>
                        <strong>First Name: </strong> {profileData.givenName}
                    </p>
                    <p>
                        <strong>Last Name: </strong> {profileData.surname}
                    </p>
                    <p>
                        <strong>Email: </strong> {profileData.userPrincipalName}
                    </p>
                    <p>
                        <strong>Id: </strong> {profileData.id}
                    </p>
                </div>
            }
            <button onClick={getProfile}>Get user information</button>
        </div>
    );
};

Reference

Use tailwind within atomic design methodology

markzzw — Tue, 26 Dec 2023 07:17:02 +0000

original: https://markzzw.gitbook.io/zewei-zhangs-minds/core-mind/use-tailwind-in-atomic-design-methodology

Tailwind CSS has gradually become the preferred style processing solution in front-end development. Its simple integration and flexible configurability make it gradually occupy a higher position in front-end development. However, with the use of Tailwind CSS, many front-end developers have also experienced discomfort. Too many classnames cause the code to look untidy, and in the case of complex styles, writing Tailwind CSS is very complicated, which is not conducive to maintenance, so can the above problems be solved by following the theory of atomic components when using Tailwind CSS?

Atomic Component

Before discussing how to combine atomic components and Tailwind CSS, let's take a look at the atomic component methodology, which divides pages into the following five levels.

Atoms

For the definition of the atom as the smallest non-divisible component in the design system, then we should split the web page should be the corresponding html native tag with the corresponding style, that is, input/h1/button and other components, such components can not be split again, and can be used independently.
Molecules

A molecule is defined as a component of the design system composed of atomic components, such as a search box with a search button, avatar, card, etc
Organisms

An organization is defined as a component composed of atoms and molecules in the design system. Such components generally have certain business capabilities, such as tab components, datepicker components, and list components
Templates

The template is defined as a high-reuse interface without data composed of atoms, molecules, and organizations in the design system, such as the table page of the background management system, which has high reuse.
Pages

The definition of the page is that after the template is filled with data, the real page is displayed, also known as a high-fidelity page.

Each level is pieced together from the previous levels to form the final page. In this methodology, the main thing is to find atomic components. The following figure helps us to label the atomic components well (native Html elements).

Atomic Component fit with Tailwind CSS

The page is made up of basic components. The atomic component methodology is not to split the page components as small as possible, but to form molecular components through atomic components and organize components, and then build pages through page templates, which is a process from small to large.

In the development methodology of atomic components, we need to clearly identify which Atomic components are, and then modify the atomic components. Tailwind CSS is just the methodology of Atomic CSS, turning the miscellaneous css styles into a single css attribute.

This solves the problem of hard-to-read html code with a lot of classnames in the code, which is to wrap atomic components and then use atomic components to compose molecular components.

This code is an example of the official website, we will use this example to refactor to show how to do the atomic component.



function ShoppingCard() {
    return <div className="flex font-sans">
        <div className="flex-none w-48 relative">
            <img src="/classNameic-utility-jacket.jpg" alt="" className="absolute inset-0 w-full h-full object-cover" loading="lazy" />
        </div>
        <form className="flex-auto p-6">
            <div className="flex flex-wrap">
                <h1 className="flex-auto text-lg font-semibold text-slate-900">
                    Utility Jacket
                </h1>
                <div className="text-lg font-semibold text-slate-500">
                    $110.00
                </div>
                <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
                    In stock
                </div>
            </div>
            <div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
                <div className="space-x-2 flex text-sm">
                    <label>
                        <input className="sr-only peer" name="size" type="radio" value="xs" checked />
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
                            XS
                        </div>
                    </label>
                    <label>
                        <input className="sr-only peer" name="size" type="radio" value="s" />
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
                            S
                        </div>
                    </label>
                    <label>
                        <input className="sr-only peer" name="size" type="radio" value="m" />
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
                            M
                        </div>
                    </label>
                    <label>
                        <input className="sr-only peer" name="size" type="radio" value="l" />
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
                            L
                        </div>
                    </label>
                    <label>
                        <input className="sr-only peer" name="size" type="radio" value="xl" />
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
                            XL
                        </div>
                    </label>
                </div>
            </div>
            <div className="flex space-x-4 mb-6 text-sm font-medium">
                <div className="flex-auto flex space-x-4">
                    <button className="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
                        Buy now
                    </button>
                    <button className="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
                        Add to bag
                    </button>
                </div>
                <button className="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
                    <svg width="20" height="20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
                    </svg>
                </button>
            </div>
            <p className="text-sm text-slate-700">
                Free shipping on all continental US orders.
            </p>
        </form>
    </div>
}

This code looks messy and difficult to maintain, and we will look for the atomic components that need to be encapsulated.

Button componenet

Button component is the most common component that we can extract.

So we can do a simple encapsulating.



import { ButtonHTMLAttributes } from "react"

type ButtonVariant =
    | 'filled'
    | 'outlined'
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant: ButtonVariant;
}

export default function Button(props: ButtonProps) {
    const {
        type,
        variant,
        className,
        children
    } = props;
    const variantClassNames: {[key: string]: string} = {
        filled: 'bg-black text-white',
        outlined: 'border border-slate-200 text-slate-900'
    }
    return <button
        className={`h-10 px-6 font-semibold rounded-md ${variantClassNames[variant]} ${className}`}
        type={type}>
        {children}
    </button>
}

then we can use it as.



function ShoppingCard() {
    return ...
        <div className="flex-auto flex space-x-4">
            <Button variant="filled">Buy now</Button>
            <Button variant="outlined"> Add to bag</Button>
        </div>
    ...
}

Icon component

Also svg can been encapsulated as an atomic component.



interface IconProps {
    size?: number
}

export default function HeartIcon (props: IconProps) {
    const { size = 20 } = props;
    const rate = size / 20;
    return <svg style={{ transform: `scale(${rate})` }} width='20' height='20' fill="currentColor" aria-hidden="true">
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
        />
    </svg>
}

Radio component

We can find out the Radio component, so we need to encapsulate the <input type="radio" />



import { InputHTMLAttributes } from "react";

interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
    label: string;
}

export default function Radio(props: RadioProps) {
    const { label, name, value, checked, className, onChange } = props;
    return <label className="relative cursor-pointer" htmlFor={label}>
        <input
            className="sr-only peer"
            type="radio"
            id={label}
            value={value}
            name={name}
            checked={checked}
            onChange={onChange}
        />
        <div
            className={`min-w-[36px] min-h-[36px] p-2 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white ${className}`}
        >
            {label}
        </div>
    </label>
}

then we can use it like this.



function ShopingCard() {
  const sizeList = [
    'XS', 'S', 'M', 'L', 'XL'
  ];
  const onSizeChange = (event: ChangeEvent<HTMLInputElement>) => {
    setCurrentSize(event.target.value);
  }
  const [currentSize, setCurrentSize] = useState(sizeList[0])
  return (
    ...
            <div className="space-x-2 flex text-sm">
              {
                sizeList.map(size => <Radio
                  key={size}
                  name="size"
                  value={size}
                  label={size}
                  checked={currentSize === size}
                  onChange={onSizeChange}
                />)
              }
            </div>
     ...
  )
}

According to the atomic table, we have completed the encapsulation of part of the Form atomic components above. Next, we will identify the types of other atomic components.

Typography component

Document sections



import { PropsWithChildren } from "react";

interface TypographyProps extends PropsWithChildren {
    className?: string;
    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'paragraph'
}

interface TextProps extends PropsWithChildren {
    className?: string;
}

export default function Typography(props: TypographyProps) {
    const { variant, children, className } = props;
    const baseClassNames = 'block antialiased tracking-normal font-sans font-semibold';
    const typographies = {
        h1: (p: TextProps) => <h1 className={`${baseClassNames} text-5xl leading-tight ${p.className}`}>{p.children}</h1>,
        h2: (p: TextProps) => <h2 className={`${baseClassNames} text-4xl leading-[1.3]  ${p.className}`}>{p.children}</h2>,
        h3: (p: TextProps) => <h3 className={`${baseClassNames} text-3xl leading-snug ${p.className}`}>{p.children}</h3>,
        h4: (p: TextProps) => <h4 className={`${baseClassNames} text-2xl leading-snug ${p.className}`}>{p.children}</h4>,
        h5: (p: TextProps) => <h5 className={`${baseClassNames} text-xl leading-snug ${p.className}`}>{p.children}</h5>,
        h6: (p: TextProps) => <h6 className={`${baseClassNames} text-lg leading-relaxed ${p.className}`}>{p.children}</h6>,
        lead: (p: TextProps) => <p className={`${baseClassNames} text-base font-normal leading-relaxed ${p.className}`}>{p.children}</p>,
        paragraph: (p: TextProps) => <p className={`${baseClassNames} text-sm font-normal leading-relaxed ${p.className}`}>{p.children}</p>,
    }
    return typographies[variant]({
        className,
        children
    });
}

in this component we can see the classname is a little heavy, Tailwind CSS provides @apply decorator, so we can name classname as it's meaning.



.base-font {
    @apply block antialiased tracking-normal font-sans font-semibold;
}

.heading1 {
    @apply text-5xl leading-tight;
}

.heading2 {
    @apply text-4xl leading-[1.3];
}

.heading3 {
    @apply text-3xl leading-snug;
}

.heading4 {
    @apply text-2xl leading-snug;
}

.heading5 {
    @apply text-xl leading-snug;
}

.heading6 {
    @apply text-lg leading-relaxed;
}

.lead {
    @apply text-base font-normal leading-relaxed;
}

.paragraph {
    @apply text-sm font-normal leading-relaxed;
}



import { PropsWithChildren, createElement } from "react";
import './style.css'; // import style

interface TypographyProps extends PropsWithChildren {
    className?: string;
    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'paragraph';
}

export default function Typography(props: TypographyProps) {
    const { variant, children, className } = props;
    const headingElements = ['h1' , 'h2' , 'h3' , 'h4' , 'h5' , 'h6'];
    const typographiesClassName = {
        h1: 'heading1',
        h2: 'heading2',
        h3: 'heading3',
        h4: 'heading4',
        h5: 'heading5',
        h6: 'heading6',
        lead: 'lead',
        paragraph: 'paragraph'
    };
    return createElement(
        headingElements.includes(variant) ? variant : 'p',
        { className: `base-font ${typographiesClassName[variant]} ${className}` },
        children
    );
}

Card

Group content



import { HTMLAttributes } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> { }

export default function Card(props: CardProps) {
    const { children, className } = props;
    return <div className={`flex font-sans shadow-md p-2 rounded-xl overflow-hidden ${className}`}>
        {children}
    </div>
}

Final ShoppingCard

In the end, our shopping card code became easier to maintain and read than before, and there were actually some small components that could be separated, such as dividers and pictures.



function ShoppingCard() {
  const sizeList = [
    'XS', 'S', 'M', 'L', 'XL'
  ];
  const onSizeChange = (event: ChangeEvent<HTMLInputElement>) => {
    setCurrentSize(event.target.value);
  }
  const [currentSize, setCurrentSize] = useState(sizeList[0]);

  return (
    <div className="flex items-center justify-center h-screen">
      <Card>
        <div className="flex-none w-48 relative">
          <img
            src="https://www.tailwindcss.cn/_next/static/media/classic-utility-jacket.82031370.jpg"
            className="w-full h-full object-cover"
            loading="lazy"
          />
        </div>
        <form className="flex-auto p-6">
          <div className="flex flex-wrap">
            <Typography variant="h6" className="flex-auto text-slate-900" >Utility Jacket</Typography>
            <Typography variant="h6" className="text-slate-500" >$110.00</Typography>
            <Typography variant="lead" className="text-slate-700 mt-2 w-full" >In stock</Typography>
          </div>
          <div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
            <div className="space-x-2 flex text-sm">
              {
                sizeList.map(size => <Radio
                  key={size}
                  name="size"
                  value={size}
                  label={size}
                  checked={currentSize === size}
                  onChange={onSizeChange}
                />)
              }
            </div>
          </div>
          <div className="flex space-x-4 mb-6 text-sm font-medium">
            <div className="flex-auto flex space-x-4">
              <Button variant="filled">Buy now</Button>
              <Button variant="outlined"> Add to bag</Button>
            </div>
            <Button variant="outlined" className="px-2.5">
              <HeartIcon size={24} />
            </Button>
          </div>

          <Typography variant="paragraph" className="text-slate-700" >
            Free shipping on all continental US orders.
          </Typography>
        </form>
      </Card>
    </div>
  )
}

There are also corresponding instructions in the official website, how to do the splitting of components.

With the separation of Atomic components, the patchwork page will become intuitive and clear, which is the combination of Atomic Component and Atomic CSS, one is the atomic of logic level and the other is the atomic of style level, in this way can truly achieve the Atomic methodology.

Reference

Atomic Design Methodology

material-tailwind-react

Tailwind css

Github of this article

DEV Community: markzzw

Pre-commit with husky & lint-staged

Husky

Step 1

Step 2

Step 3

Step 4

Lint-staged

Step 1

Step 2

Notice 1

Notice 2

Step 3

In the end

My bento resume

Advance JavaScript - Promise

Basic

Promise

Promise.then(successFn, failFn);

Promise.catch(failFn);

Promise.finally(onFinally);

Senior

Promise.all(promiseArr)

Promise.allSettled(promiseArr)

Promise.any(promiseArr)

Promise.race(promiseArr)

Advance JavaScript - Function

IIFE

arguments

Function.length

closure

1. debounce

2. throttle

Recursion

Currying

Skills of writing unit test for react

Tech stack

Setup test env

1. install dependencies

2. Add configuration in vite-config

3. Create ./src/test/setup.ts

4. Set script in package.json

Test render with different props

Test with HTML_EVENTs

Trigger event directly

Trigger event by using fireEvent provided by the @testing-library/react

Test hook function

Test with react-router

Test with the mock function

Summary

The practice of using Microsoft OAuth in the React hook

Config in Azure

Register your app

Set up your react project

Node modules

Create a msconfig.js file

Create a Microsoft auth provider

Use MsAuthProvider to warp your react application

Create SignIn component

Get user information

Integration with axios

Reference

Use tailwind within atomic design methodology

Atomic Component

Atomic Component fit with Tailwind CSS

Button componenet

Icon component

Radio component

Typography component

Card

Final ShoppingCard

Reference

3. Create `./src/test/setup.ts`

Trigger event by using `fireEvent` provided by the `@testing-library/react`