add a few tests, update README

README.md

@@ -1,2 +1,37 @@
+# Solution to Vinted FE Code Challenge
 
-[Assignment Instructions](https://gist.github.com/vintedEngineering/c838e906ecc25a52fe91c4a8a11e2916)
+### Requirements
+
+- [x] Leverage [Flickr API](https://www.flickr.com/services/api/flickr.photos.getRecent.html)
+- [x] Design should be recreated as closely as possible.
+- [x] Responsive design with three breakpoints for Desktop, Tablet, Phone.
+- [x] Infinite scroll.
+- [x] Keep liked photo data persistent with page reload.
+- [x] Use React
+- [x] No External libraries beside React
+
+[Full Assignment Instructions](https://gist.github.com/vintedEngineering/c838e906ecc25a52fe91c4a8a11e2916)
+
+[Demo](https://maxie-max.github.io/vinted-fe-code-challenge/)
+
+### 🛠 To install dependencies run
+
+```
+npm install
+```
+
+### 🏗 To run app in the development mode
+
+```
+npm start
+```
+
+### 👩‍🔬 Testing
+
+Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library).
+
+To run all tests:
+
+```bash
+npm test
+```

package.json

@@ -41,4 +41,4 @@
   "devDependencies": {
     "gh-pages": "^3.2.0"
   }
-}
+}

src/components/ErrorMessage.js

@@ -1,11 +1,20 @@
 import React from 'react'
 import style from './ErrorMessage.module.css'
 
-function ErrorMessage({ errorMessage, type = 'error' }) {
-	// errorMessage consists of 4 types: error | warning | info | success
+const Styles = {
+	error: 'error',
+	warning: 'warning',
+	info: 'info',
+	success: 'success',
+}
+
+function ErrorMessage({ errorMessage, type }) {
+	const getStyleClass = (type) => Styles[type] || Styles.error //defaulted to 'error'
 	return (
 		!!errorMessage && (
-			<div className={`${style.alert} ${style[type]}`}>{errorMessage}</div>
+			<div className={`${style.alert} ${style[getStyleClass(type)]}`}>
+				{errorMessage}
+			</div>
 		)
 	)
 }

src/components/List.js

@@ -56,9 +56,12 @@ function List() {
 
 	return (
 		<>
-			<ErrorMessage {...{ errorMessage, type: 'error' }} />
-			{!!photosData && (
-				<ul className={style.list}>
+			<ErrorMessage
+				data-testid='fetch-error'
+				{...{ errorMessage, type: 'error' }}
+			/>
+			{photosData.length > 0 && (
+				<ul className={style.list} data-testid='fetch-list'>
 					{photosData.map((data, i) => (
 						<Card
 							key={`${i}-${data?.id}`}

src/components/Loader.js

@@ -2,7 +2,13 @@ import React from 'react'
 import style from './Loader.module.css'
 
 function Loader({ loadingText, isFetching }) {
-	return !isFetching && <div className={style.loader}>{loadingText}</div>
+	return (
+		!isFetching && (
+			<div data-testid='loader' className={style.loader}>
+				{loadingText}
+			</div>
+		)
+	)
 }
 
 export default Loader

src/components/__test__/Button.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { render, fireEvent, cleanup } from '@testing-library/react'
+import Button from '../Button'
+
+const defaultProps = {
+	label: 'Like',
+	handleLike: jest.fn(),
+}
+
+test('button renders with correct label', () => {
+	const { queryByText, rerender } = render(<Button {...defaultProps} />)
+	expect(queryByText('Like')).toBeTruthy()
+
+	// Change props
+	rerender(<Button {...defaultProps} label='Dislike' />)
+	expect(queryByText('Dislike')).toBeTruthy()
+})
+
+test('calls correct function on click', () => {
+	const { handleLike, label } = defaultProps
+	const { getByText } = render(
+		<Button {...defaultProps} onClick={handleLike} />
+	)
+	fireEvent.click(getByText(label))
+	expect(handleLike).toHaveBeenCalled()
+})

src/components/__test__/List.test.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/react'
+import List from '../List'
+
+afterEach(cleanup)
+
+test('should not render List on start', () => {
+	const { queryByTestId } = render(<List />)
+	expect(queryByTestId('fetch-list')).toBeNull()
+})
+test('should show Loader on start', () => {
+	const { queryByTestId } = render(<List />)
+	expect(queryByTestId('loader').textContent).toBe('Fetching photos ...')
+})

src/hooks/useInfiniteScroll.js

@@ -5,7 +5,7 @@ const useInfiniteScroll = (callback) => {
 	const [isFetching, setIsFetching] = useState(false)
 
 	useEffect(() => {
-		const debounceHandleScroll = debounce(handleScroll, 1500)
+		const debounceHandleScroll = debounce(handleScroll, 1000)
 		window?.addEventListener('scroll', debounceHandleScroll)
 		return () => {
 			window?.removeEventListener('scroll', debounceHandleScroll)

src/utils/debounce.js

@@ -6,23 +6,3 @@ const debounce = (callback, wait = 250) => {
 	}
 }
 export default debounce
-
-/* 
-// Testing it:
-
-var d = debounce(() => console.log("CALLED"), 1000);
-
-for (let i = 0; i < 10; i++) {
-    // call every 100 ms (change to 1500 to see that debouncing will not happen)
-    let timeOut = 100 * i;
-
-    const cb = () => {
-        const date = new Date();
-        console.log(`calling at ${date.getSeconds()}.${date.getMilliseconds()}`);
-        d()
-    }
-    
-    setTimeout(cb, timeOut)
-}
-
-*/