This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useMemo } from 'react'; | |
const EmployeeList = ({ employees, positionFilter }) => { | |
const filteredEmployees = useMemo(() => { | |
return employees.filter(employee => employee.position === positionFilter); | |
}, [employees, positionFilter]); | |
return ( | |
<div> | |
<h2>Employee List</h2> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Image from "next/image"; | |
import { useState } from "react"; | |
import Swipe from "react-easy-swipe"; | |
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"; | |
/** | |
* Carousel component for nextJS and Tailwind. | |
* Using external library react-easy-swipe for swipe gestures on mobile devices (optional) | |
* | |
* @param images - Array of images with src and alt attributes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("should not fetch data if current reference is falsy", async () => { | |
const { result } = renderHook(() => | |
useFetch(stubbedFetchUrl, { current: false }, []) | |
); | |
expect(global.fetch).not.toHaveBeenCalled(); | |
expect(result.current).toStrictEqual({ | |
loading: true, | |
data: [], | |
error: null, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("should catch error", async () => { | |
jest.spyOn(global, "fetch").mockImplementation(() => | |
Promise.resolve({ | |
json: () => Promise.reject("oops, error occured!"), | |
}) | |
); | |
const { result, waitForNextUpdate } = renderHook(() => | |
useFetch(stubbedFetchUrl, { current: true }, []) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("should return data after fetch", async () => { | |
// Mock API | |
jest.spyOn(global, "fetch").mockImplementation(() => | |
Promise.resolve({ | |
json: () => Promise.resolve(stubbedCountries), | |
}) | |
); | |
// Execute | |
const { result, waitForNextUpdate } = renderHook(() => |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { renderHook } from "@testing-library/react-hooks"; | |
import { useFetch } from "./customHooks"; | |
const stubbedCountries = [ | |
{ name: "Slovakia", capital: "Bratislava" }, | |
{ name: "Germany", capital: "Berlin" }, | |
]; | |
const stubbedFetchUrl = "api/countriesUrl-mocked"; | |
afterEach(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("should catch error", async () => { | |
// Mock API | |
jest.spyOn(global, "fetch").mockImplementation(() => | |
Promise.resolve({ | |
json: () => | |
Promise.resolve({ | |
status: 500, | |
}), | |
}) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { getAllCountries } from "./countries"; | |
const stubbedCountries = [ | |
{ | |
numericCode: 1, | |
name: "Slovakia", | |
capital: "Bratislava", | |
region: "Europe", | |
population: 500, | |
flag: "Slovakia flag", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const getAllCountries = async () => { | |
try { | |
const response = await fetch(`https://restcountries.eu/rest/v2/all`); | |
const responseCountries = await response.json(); | |
return responseCountries; | |
} catch (err) { | |
console.log(err); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("should filter countries by name when input value is changed", () => { | |
useFetch.mockReturnValue({ | |
loading: false, | |
data: stubbedCountries, | |
error: null, | |
}); | |
const { getByTestId } = render(<CountriesContainer />); | |
act(() => { | |
fireEvent.change(getByTestId("filter-input-name"), { |
NewerOlder