Skip to content

Instantly share code, notes, and snippets.

@mustafadalga
mustafadalga / mock-functions-cheatsheet.md
Created November 5, 2023 09:11
Summarizes the behavior of mockClear, mockReset, and mockRestore in Jest/Vitest
Function Clears Call History Resets Implementations Restores Original Implementation Scope of Use
mockClear() Clear usage data of the mock function but keep its implementation and return values.
mockReset() Reset the mock function to its initial state, removing any custom behavior or return values.
mockRestore() Restore the original function, removing the mock (only applicable with jest.spyOn).
@mustafadalga
mustafadalga / usePostsStore.test.ts
Created October 31, 2023 18:03
Writing unit tests of zustand state management store with vitest and testing-library
import { act, renderHook } from '@testing-library/react';
import { describe, it, expect, beforeEach } from "vitest";
import { usePostsStore } from "@/_store/usePostsStore";
describe('usePostsStore', () => {
beforeEach(() => {
usePostsStore.getState().reset()
});
it('should return the initial state', () => {
@mustafadalga
mustafadalga / GET.test.ts
Created October 27, 2023 08:00
Demonstration of unit testing for Next.js 13 API routes, covering GET and POST methods using mocks with msw.
import { describe, it, expect, beforeAll, afterEach, afterAll } from "vitest";
import { GET } from "./route";
import { createMockRequest, createTestServer } from "@/__tests__/utilities";
import { http, HttpResponse } from "msw";
const url = `${process.env.VITE_API_BASE_URL_V2}/posts`;
const mockPosts = [ {
"userId": 1,
"id": 2,
"title": "qui est esse",
@mustafadalga
mustafadalga / InputRadio.test.tsx
Created October 26, 2023 07:24
Unit Testing a React Radio Input Component: Handling Clicks and State Changes
import { describe, expect, it, vi } from "vitest";
import { render, screen, fireEvent } from '@testing-library/react';
import InputRadio from './InputRadio';
describe('InputRadio Component Tests', () => {
const dummyProps = {
id: 'testRadio',
name: 'test-radio',
label: 'Test Label',
checked: false,
@mustafadalga
mustafadalga / GET.test.ts
Created October 25, 2023 14:29
Demonstration of unit testing for Next.js 13 API routes, covering GET and POST methods with mocks.
import { describe, it, expect, vi } from "vitest";
import { createRequest } from 'node-mocks-http';
import { GET } from "./route";
const mocks = vi.hoisted(() => ({
get: vi.fn(),
}));
vi.mock("axios", async () => {
const actual: any = await vi.importActual("axios");
@mustafadalga
mustafadalga / script.ts
Created October 8, 2023 08:48
Automated Twitter Interest Deselection Script
// Function to sleep for a given duration
function triggerClick(element) {
const event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
element.dispatchEvent(event);
}
@mustafadalga
mustafadalga / not-found.tsx
Created September 19, 2023 12:07
Next.js 13: 404 Not Found Page
import Link from "next/link";
export default function NotFound() {
return (
<main className="grid place-items-center p-5 min-h-screen w-full bg-gradient-to-r from-purple-200 to-purple-500 ">
<section className="relative grid gap-3 rounded shadow-lg p-5 lg:p-10 xl:px-20 bg-purple-200">
<h1 className="text-center text-purple-700 font-bold text-8xl lg:text-9xl 2xl:text-[15rem]">404</h1>
<p className="text-purple-900 text-base lg:text-xl xl:text-2xl mb-5">
Oops! The page you are looking for does not exist. It might have been moved or deleted.
@mustafadalga
mustafadalga / api.post.list.route.ts
Created September 11, 2023 11:30
Sending Cookie to API Route in Next.js 13:In a Next.js 13 project, you can send a cookie to an API route by including it in the headers of your Axios request in your server-side function. In the API route, you can access this cookie using request.cookies.get('cookieName').
import { NextRequest, NextResponse } from "next/server";
import { AxiosInstance } from "axios";
import { CookieKeys } from "@/_enums";
import createAuthenticatedApiServiceV2 from "@/_services/createAuthenticatedApiServiceV2";
import handleAxiosError from "@/_utilities/handleAxiosError";
export async function GET(request: NextRequest) {
try {
const jwt: string | undefined = request.cookies.get(CookieKeys.Jwt)?.value;
@mustafadalga
mustafadalga / InputSearch.tsx
Last active September 8, 2023 08:16
Debounced Search Component in React:This React component demonstrates how to implement a debounced search feature using hooks like `useState`, `useEffect`, and `useCallback`.
import { ChangeEvent, useCallback, useEffect, useState } from "react";
import { CiSearch } from "react-icons/ci"
import { useSearch } from "@/store/useSearch";
const Search = () => {
const [ searchText, setSearchText ] = useState("");
const setSearch = useSearch(state => state.setSearch);
const [ debouncedSearchText, setDebouncedSearchText ] = useState(searchText);
const handleSearchText = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
@mustafadalga
mustafadalga / Input.tsx
Created August 22, 2023 08:26
Handling Conditional onChange Handlers in React: Integrating Custom Inputs with react-hook-form
import { FieldError } from 'react-hook-form';
import { ChangeEvent } from "react";
interface Props {
label: string;
id: string;
type?: string;
placeholder?: string;
disabled?: boolean;
register?: any;