DEV Community: YuehBen66

Testing with MSW

YuehBen66 — Sat, 11 Feb 2023 04:53:50 +0000

Problem

When mocking api, we usually got the problem, which is:

Duplication of mocking same api

description

When we mock api, there are some problems, such as:

Duplication of mocking same apis in different Components: When testing different components, assuming the same api is used again and again, we will need to re-mock the api, (Although you can put the mock api under /__mock__ to avoid duplication, but there will be Typescript type problems at present)

Duplication of mocking same apis in Hook & Component: If there is a custom hook that will open the api, when we are testing the custom hook, we have already written a mock api, when we are testing the component that uses the custom hook, we must rewrite the mock api when testing the component, resulting in inconvenience for maintenance

(Hook's code)

// Hook's production code

const useUserLocations = () => {
  const [userLocations, setUserLocations] = useState();

  const fetchUserLocations = async () => {
    const users = await apiGetUsers();
    const locations = users. map((user) => user. location);
    return locations;
  };

  useEffect(() => {
    fetchUserLocations()
      .then((locations) => {
        setUserLocations(locations);
      })
  }, []);

  return userLocations;
};

// Hook's testing code

describe('useFetchUserLocations', () => {
  test('by default, should return an array containing users 
   locations', () => {
     // Arrange
     apiGetUser.mockResolvedValue([
       { name: 'Alen', location: 'America' },
       { name: 'Benson', location: 'Taiwan' },
       { name: 'Camillie', location: 'America' },
     ]);

    // Act
    const { result } = renderHook(useFetchUserLocation);

    // Assert
    expect(result.current).toEqual(['American', 'Taiwan', 'America']);
  });
});

(Component's code)

// Component's production code

import useUserLocations from '@/hooks/useUserLocations';

const UserStatic = () => {
  const userLocations = useUserLocations(); // using the hook above

  return (...); // pretended this render a pie chart with label
};

// Component's testing code

describe('UserStatic', () => {
  test('when users exist and have locations, should show location label', () => {
    // Arrange
    apiGetUser.mockResolvedValue([
      { name: 'Alen', location: 'America' },
      { name: 'Benson', location: 'Taiwan' },
      { name: 'Camillie', location: 'French' },
    ]); // mock the same value again !!

    // Act
    const { getByTestId } = render(<UserStatic />);
    const labelAmerica = getByTestId('label-America');

    // Assert
    expect(labelAmerica).toBeVisible();
  });
});

While I was researching how to test swr,
I suddenly found an article ( Stop mocking fetch by Kent C. Dodds ) written about how to solve this problem ,
instead of writing the mock API again and again in the test file,
we can actually fake the whole api service!!!

We can make our unit test really call the api,
but the responses provided by the fake service,
and these fake services will centrally manage these APIs,
which can reduce the repeat api mocking,
it is also convenient for us to centrally manage apis.

Introduction to MSW

The full name of MSW is Mock Service Worker,
which allows us to forge service workers,
let our testing code be able to call api as the same way production code does,
but it will be processed by msw,
and return our own custom mocking responses.

The setting method is as follows:

import { rest } from 'msw' // msw supports graphql too!
import * as users from './users'

const handlers = [
   rest.get('/users', async (req, res, ctx) => {
     const users = [
       { name: 'Alen', location: 'America' },
       { name: 'Benson', location: 'Taiwan' },
       { name: 'Camillie', location: 'French' },
     ];
     return res(ctx.json(users));
   }),
   rest.post('/users', async (req, res, ctx) => {
     if (req.name && req.email && req.location) {
       return res(
         ctx. staus(200)
         ctx.json({ success: true })
       );
     }
   }),
];

export { handlers };

//test/server.js
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { handlers } from './server-handlers'

const server = setupServer(...handlers)
export { server, rest };

//test/setup-env.js
// add this to your setupFilesAfterEnv config in jest so it's imported for every test file
import {server} from './server.js'

beforeAll(() => server. listen())
// if you need to add a handler after calling setupServer for some specific test
// this will remove that handler for the rest of them
// (which is important for test isolation):
afterEach(() => server. resetHandlers())
afterAll(() => server. close())

Rethink the purpose of our fake api

When we write tests,
sometimes we want to call the api with the correct parameters

const useUser = (userUuid) => {
  const [userLocations, setUserLocations] = useState();

  const fetchUser = async () => {
    const user = await apiGetUser(userUuid);
    return user;
  };

  useEffect(() => {
    fetchUserLocations()
      .then((locations) => {
        setUserLocations(locations);
    })
  }, []);

  return userLocations;
};

const apiGetUser = jest.fn();

test('when passed user uuid, should call apiGetUser with the same user uuid', () => {
  // Act
  const { result } = render(() => useUser('mockUserUuid'));

  // Assert
    expect(apiGetUser).toHaveBeenCalledWith('mockUserUuid');
});

But when using mock service worker,
we don't need to mock api function,
so we cannot monitor the parameters entered when the api function is called,

How do we test it at this time?

In fact, it is the same as when the real backend is doing it!
Different input values return different input results!

import { rest } from 'msw' // msw supports graphql too!
import * as users from './users'

const handlers = [
  rest.get('/user/:uuid', async (req, res, ctx) => {
    if (req.uuid) {
      const user = {
        name: 'Alen',
        email: 'alen@gmail.com',
        location: 'America',
      };
      return res(
        ctx.status(200),
        ctx.json(user)
      );
    }

    return res(
      ctx.status(404),
      ctx.json({ error: 'User not found' }
    ),
  }),
];

export { handlers };

Testing SWR

It is also worth mentioning that recently there is a new fetch api mechanism called SWR (stale while revalidate),
the trending fetching api libraries include:

They all use this mechanism, and they are all packaged with hooks to call the api.

It is no longer a simple api function, and we have to do mocking for hooks,
which is not an ideal way.

// Testing with swr by manual mock hook

import useSWR from 'swr';
import { render } from '@/utils/testing/render';

import UserStatic, { idUserNumber } from './_userStatic';

jest.mock('swr', () => jest.fn());

describe('UserStatic', () => {
  test('when users data exist, should show correct users number', async () => {
    // Arrange
    const users = [
      { name: 'Alen', email: 'alen@trendmicro.com', },
      { name: 'Benson', email: 'benson@trendmicro.com' },
      { name: 'Camillie', email: 'camillie@trendmicro.com' },
    ];

    useSWR.mockResolvedValueOnce({
      data: users,
      isLoading: false,
    });

    // Act
    const { findByTestId } = render(<UserStatic />);
    const userNumber = await findByTestId(idUserNumber);

    // Assert
    expect(userNumber).toHaveTextContent('3');
  });
});

If we use msw to mock api service,
we can use the same way as the general mock api,
instead of mocking msw in this 'tricky' way.

// handlers.js
// handle msw api responses

import { rest } from 'msw';

export const handlers = [
  rest.get('/users/:uuid', (req, res, ctx) => {
    const users = [
      { name: 'Alen', email: 'alen@trendmicro.com', },
      { name: 'Benson', email: 'benson@trendmicro.com' },
      { name: 'Camillie', email: 'camillie@trendmicro.com' },
    ];

    return res(
      ctx.status(200),
      ctx.json(users),
    );
  }),
];

export default {};

// Testing with swr by manual mock hook

import useSWR from 'swr';
import { render } from '@/utils/testing/render';

import UserStatic, { idUserNumber } from './_userStatic';

jest.mock('swr', () => jest.fn());

describe('UserStatic', () => {
  test('when users data exist, should show correct users number', async () => {
    // Act
    const { findByTestId } = render(<UserStatic />);
    const userNumber = await findByTestId(idUserNumber);

    // Assert
    expect(userNumber).toHaveTextContent('3');
  });
});

Conclusion

Using fake service (like msw) to mocking apis could

Reducing unnecessary mocking duplication, increasing Maintainability.
More realistic for actual user scenario, increasing Trustworthy.

Using Recursion like a Pro - 1

YuehBen66 — Thu, 14 Jul 2022 16:48:21 +0000

Why I write this post ?

In order to be a better programmer,
getting a dream software job,
all developers must face the devil call "Algorithms",
especially something called "Recursion" really showed me how DESPERATION looks like 😵‍💫😵‍💫😵‍💫.

After struggling for a while,
I search for "How to use Recursion comfortably",
and finally found a book called Think like a programmer.

This book really SAVED MY LIFE !!! 🥳🥳🥳,
and now I can use Recursion pretty comfortably,
even able to solve the medium Tree problem within 10 mins,
which is extremely amazing !!!

And I want to share you guys such amazing experience,
so you won't suffer from it.

Prerequisite of being a Pro

Before becoming a recursion pro, let's review basics of recursion.

Recursion means "calling itself",
and it has 2 vital concepts,
which are Recurrence relation and Base case,

Recurrence relation :

the relationship between the problem and its direct 
subproblems

Base case :

the simplest case, which the function can handle on its own 
without calling itself.

( if you're not familiar with these concepts, you can read the Martin and Dragon story )

...to be continued

References

文章列表

YuehBen66 — Tue, 28 Sep 2021 09:30:18 +0000

Security

2021 Sep 27 - 與 SSH 同行

與 SSH 同行

YuehBen66 — Mon, 27 Sep 2021 14:24:40 +0000

學習緣由
在開始做 Side Project 的時候，因為我使用 create-next-app 時，
沒有用成 typescript 版，我的 mentor 幫我處理的時候，
發現現在好像需要用 ssh 才能 push 到 github 上，
然後中間過程半聽半懂的 XD，想說趁機來了解一下～

SSH 是什麼？

一個協定(protocol)，為 Secure Shell 的縮寫，
讓兩台電腦在網路(Network)上安全的傳輸

因為在網路上傳輸時，資料都以明文(plain text) 的方式遊走，很容易被竊聽(overhearing)或篡改(tampering)

在還未有 SSL 的古早年代，就常常有人利用嗅探攻擊(sniffing attack)來截取使用者密碼和資料並篡改，後續在 1995 年，塔圖·于勒寧(Tatu Ylonen)就開發了 ssh 協定，讓電腦資料傳輸可以更安全的進行

SSH 資料傳輸方式

在此協定下，資料傳輸的方式可以用把包裹寄給朋友來說明

今天我想寄一個很機密包裹給朋友，要確保不能被別人拿走
我先加一個鎖在自己的包裹上，再傳給朋友
傳給朋友後，他看到我的鎖後，也加了自己的鎖
我看到朋友的鎖後，將自己的鎖解除，再回傳給朋友
朋友將鎖解除後，成功拿到包裹

這樣一來，我們可以增加傳送過程中的安全性，
即使資料(包裹)在途中被別人截取，也因為被加密的關係無法解讀

但在這之前，我們需要將兩台電腦達成 SSH 連結，
才能進行上述的傳輸

如何建立 SSH 連結呢？

SSH 連結採用 Client-Server 模型
此處的 Client 為本機 (local machine)，Server 為遠端機 (remote machine)
並用以下的流程，達成 Server 對 Client 的授權 (Authentication)
並成立 SSH 連結

在本機利用 RSA 的加密方式，產生一組公鑰(Public Key)和私鑰(Private Key)，為一對 SSH keys
將公鑰放在 Server 上
Client 利用終端機等產生一組 ID，範例格式如下：
ssh username@my_ip_address
傳給 Server，要求 Server 建立 SSH 連結
Server 會用公鑰加密(encrypt)，產生一組隨機的挑戰訊息 (random challenge message)回傳給 Client
Client 會用私鑰將挑戰訊息解密(decrypt)後，回傳給 Server
如果解密後的挑戰訊息回傳 Server 後相符，則 SSH 連結就成立了

以上就是 SSH 的介紹，如果有其他想法也請大家不吝指教～

參考資源

LeetCode 344. Reverse String

YuehBen66 — Tue, 21 Sep 2021 15:22:36 +0000

題目連結：LeetCode 344

一開始沒有多想，想說在迴圈裡儲存字串，
然後把字串中第 i 個字母跟倒數第 i 個字母值對調就做出來了~

/**
 * @Time Complexity : O(n)
 * @Space Complexity : O(n)
 */

var reverseString = function(s) {
   for (let i = 0; i < s.length / 2; i++) {
      let temp = s[i];
      s[i] = s[s.length - i - 1];
      s[s.length - i - 1] = temp;
   }
   return s;
}

後續看見題目的 Follow up 寫說需要達成 O(1) 的空間複雜度，
因此想到了迴圈裡的每個 temp 並不需要被儲存，只是一個過渡而已，
所以可以把他拉到迴圈外

/**
 * @Time Complexity : O(n)
 * @Space Complexity : O(1)
 */

var reverseString = function(s) {
   let temp;
   for (let i = 0; i < s.length / 2; i++) {
      temp = s[i];
      s[i] = s[s.length - i - 1];
      s[s.length - i - 1] = temp;
   }
   return s;
}

就可以完成 Follow up 的需求了

Algorithm Diary

YuehBen66 — Tue, 21 Sep 2021 15:04:52 +0000

此處參照 LeetCode with JavaScript 作為練習，慢慢累積演算法實力～

並採用通過率排序(提交後的成功率)決定難易度，作為做題的順序

Diary

Sep. 21 - LeetCode 344. Reverse String

String (1)

LeetCode 344. Reverse String