Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mini-Challenge 4: State management #92

Open
wants to merge 122 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 80 commits
Commits
Show all changes
122 commits
Select commit Hold shift + click to select a range
3ffa74d
created the Navbar folder that contains the Navbar component file, th…
Jul 18, 2021
e33026d
Removed styles and all of the content we had in the repo,
Jul 18, 2021
021f06e
working on the navbar component, changing css files to scss
Jul 19, 2021
6dfcafb
Adding general styles
Jul 19, 2021
e07d928
will start working on the sidebar menu
Jul 19, 2021
8ef2462
Refactoring the navbar, work in progress, sidebar has been created now
Jul 19, 2021
bbd7f3a
sidebar menu is ready, its working now
Jul 19, 2021
ab3eaa1
The navbar is almost finished, it is responsive already, it contains the
Jul 19, 2021
1e7606e
Navbar is now complete, all requested components have been added, navbar
Jul 20, 2021
4897a9e
Merge branch 'feature/navbar' into develop
Jul 20, 2021
87fd95e
Added a data folder in the utils folder that contains the mockup data…
Jul 20, 2021
5cdeaaa
removed unneeded code from the Home page
Jul 20, 2021
1804de6
videoList component is now ready
Jul 23, 2021
9466df7
videoList component has been finished now
Jul 23, 2021
3ad238d
Merge branch 'feature/home-view' into develop
Jul 23, 2021
64b82ee
changing scss files back to css files as per the recommendation of my…
Jul 23, 2021
834c9c9
working on the tests of the HomePage component
Jul 31, 2021
27f3bd9
testing the Layout component
Aug 2, 2021
6c26caa
testing of the Layout component is ready
Aug 2, 2021
5ecd674
Home component tests are ready
Aug 2, 2021
7b28b74
VideoList component tests are ready
Aug 2, 2021
7021901
Navbar tests are ready
Aug 2, 2021
2155a33
Created the search context, and using it in the navbar component so n…
Aug 3, 2021
2a43dbf
Working on the VideoList Provider, able to get 23 videos from the you…
Aug 3, 2021
1fe2bdd
Able to display videos from the youtube api
Aug 3, 2021
2041a58
Added React.lazy and suspense
Aug 4, 2021
17a158c
created the VideoDetails component, it already displays the selectd v…
Aug 4, 2021
4681482
refactored the code, I have moved the styled components to separate f…
Aug 5, 2021
40ed78e
I have created a useFetch custom hook for fetching data
Aug 5, 2021
13063be
I have added react lazy and suspense to the app component for it to w…
Aug 5, 2021
5ea2603
RecommendedVideos component is ready, able to display the videos that…
Aug 5, 2021
f841ca8
tests of the app
Aug 5, 2021
c538e60
Merge branch 'hooks'
Aug 5, 2021
334a9b4
stopped tracking env file
Aug 6, 2021
c3d4da9
the web app now scrolls to top when changing to another video
Aug 6, 2021
ffec758
test of the useFetch custom hooks has been completed
Aug 6, 2021
503a5b2
finished the testing for the Navbar
Aug 9, 2021
37e0579
RecommendedVideos tests have been finished
Aug 9, 2021
57385e9
finished with the tests for the second deliverable
Aug 9, 2021
3f6d704
Merge branch 'hooks'
Aug 9, 2021
1e6986a
started working with the useReducer functionality
Aug 10, 2021
e90ccef
Merge branch 'hooks'
Aug 10, 2021
8c338c0
fixing the tests that failed due to useReducer implementation
Aug 10, 2021
6c71b59
tests that where broken by the implementation of useReducer have been…
Aug 10, 2021
301694c
added some icons to the theme toggler
Aug 11, 2021
d3844ca
theme toggler is complete now
Aug 11, 2021
2499922
fixed the shadow box for light and dark mode
Aug 11, 2021
b949a3c
all test are passing now
Aug 11, 2021
a226286
fixed some styles that were not working on smaller screens
Aug 11, 2021
7cb7635
removed a console log
Aug 12, 2021
6c7ea56
did some changes to the jest config in the package.json file, deleted…
Aug 12, 2021
2269d15
fixed the input, it wont submit if no search term is typed into the i…
Aug 12, 2021
ea419da
all tests are now passing
Aug 12, 2021
7278591
changed the scss navbar file back to css file, made som quick fixes
Aug 12, 2021
83ae2c5
deleted the useFortune custome hooks as im not using it
Aug 12, 2021
1ff6905
deleting unused files
Aug 13, 2021
a9ba3a2
Merge branch 'context'
Aug 13, 2021
05b869c
working on the modal for the login functionality
Aug 13, 2021
a2a0137
styles have been applied to the Login Modal
Aug 13, 2021
790b97c
user authentication is now working correctly
Aug 15, 2021
a5e9174
logout functionality has been implemented now, its working fine
Aug 15, 2021
3476ee7
all tests are passing now, will be adding more as I add more function…
Aug 15, 2021
b59d261
added the like and dislike buttons, this buttons look ok on large an …
Aug 16, 2021
0ed7fa4
fixed the styles of the like and dislike buttons
Aug 16, 2021
2b1b1fe
I fixed an error I was having in the console about useEffect
Aug 16, 2021
2231307
working on the implementation of adding videos to favorites
Aug 16, 2021
eaa6839
removed a console.log
Aug 16, 2021
40e951a
removed a console log
Aug 16, 2021
937be38
able to store favorite videos in localStorage now
Aug 16, 2021
5cbfa70
added the like and dislike buttons, for a user to add a video to its …
Aug 17, 2021
925faf3
making some changes to the styles for the page to look ok on smaller …
Aug 17, 2021
879cfeb
working on the FavoritesList component and styles, able to display th…
Aug 17, 2021
6cb65dd
made some changes that wont allow the user to add the same video to f…
Aug 17, 2021
d20d67a
able to add to favorites now, fixed some issues that I had
Aug 18, 2021
44abc1b
able to display the FavoriteDetails and FavoriteList components
Aug 18, 2021
55183c6
the user will be able to add a video to its favorites only once
Aug 18, 2021
3164722
add the removeFromFavorites action to the VideoList Reducer, able to …
Aug 19, 2021
78d5c9f
merge of last changes
Aug 19, 2021
8280b22
fixed an issue on the favoritesList component
Aug 19, 2021
5385a3b
added a redirect file for netlify to catch the 404 page according to …
Aug 19, 2021
33ebe65
working on my mentors recommendations, I have renamed the component f…
Aug 19, 2021
a0f67e4
as per my mentor recommendation, I have reorganized the order of the …
Aug 19, 2021
cee2a4e
Working on another recommendation from my mentor, I have removed the …
Aug 19, 2021
e46b872
I have removed the hard coded colors in the styled Components and Im …
Aug 19, 2021
38092b0
functionality seems to be complete now, will be working on turning cl…
Aug 20, 2021
373da30
I have removed some files that I was not using, I have changed classe…
Aug 20, 2021
2a7699f
classes in the FavoriteDetailsComponent have been changed to styled c…
Aug 20, 2021
67545e3
working on the tests of the FavoriteDetails and FavoriteListComponent
Aug 20, 2021
3653bc6
Added the test to the FavoriteListComponent, the component wont show …
Aug 21, 2021
a1380bd
added some tests, all of the tests are passing now
Aug 22, 2021
b372276
I have changed all of the classes in the LoginModal component to styl…
Aug 22, 2021
78d6645
added tests to the VideoList Reducer actions
Aug 23, 2021
6e0e0c2
changed the classes in the RecommendedVideoComponent to styled compon…
Aug 23, 2021
72057e3
removing some files that im not using and changed css classes to styl…
Aug 23, 2021
7e394bf
updated snapshots changed some classes to styled components y the Nav…
Aug 23, 2021
01cb2d9
working on the tests of the login modal
Aug 24, 2021
1790559
added the test of the PrivateComponent
Aug 24, 2021
fb38cd9
removed commented code
Aug 24, 2021
bba2f79
added a transition property to the like btn
Aug 24, 2021
fd62121
as per my mentor recommendation I have refactored the custom Hook use…
Aug 25, 2021
7c3734c
refactored the code so it can work now with the changed I did to the …
Aug 25, 2021
90ed434
fixing some parts of the code that broke after refactoring the useFet…
Aug 26, 2021
a3475ee
all tests are passing now
Aug 26, 2021
d2d811a
fixing some code that was not working
Aug 26, 2021
3c11e96
checking that everything works in master
Aug 26, 2021
2040045
saving changes done
Aug 26, 2021
0784817
Merge branch 'master' into routing
Aug 26, 2021
6e07c66
trying to fix an issue when saving favorit videos
Aug 26, 2021
17464f4
added the test of the PrivateComponent
Aug 24, 2021
1236272
removed commented code
Aug 24, 2021
feeccfc
added a transition property to the like btn
Aug 24, 2021
b77c3e7
as per my mentor recommendation I have refactored the custom Hook use…
Aug 25, 2021
de248f3
refactored the code so it can work now with the changed I did to the …
Aug 25, 2021
6dc8b3e
fixing some parts of the code that broke after refactoring the useFet…
Aug 26, 2021
d3495aa
all tests are passing now
Aug 26, 2021
bcfc240
fixing some code that was not working
Aug 26, 2021
8583a34
saving changes done
Aug 26, 2021
0bcf0f9
trying to fix an issue when saving favorit videos
Aug 26, 2021
5eb6268
I spent 5 hours trying to fix a small mistake I did...I have finally …
Aug 26, 2021
74ea05f
I spent 5 hours trying to fix a small mistake I did...I have finally …
Aug 26, 2021
cfbdbea
As per my mentor recommendation I have moved the filter login from th…
Aug 27, 2021
9aab697
fixed the test, it is passing now
Aug 27, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"react/jsx-filename-extension": "error",
// "react/jsx-filename-extension": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react-hooks/exhaustive-deps": "warn",
"import/no-unresolved": ["off", { "ignore": [".css$"] }],
"import/prefer-default-export": "off",
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

# misc
.DS_Store
**/*.env
.env.local
.env.development.local
.env.test.local
Expand Down
18,174 changes: 18,174 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

28 changes: 26 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,33 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^10.4.9",
"@testing-library/user-event": "^12.1.3",
"dotenv": "^10.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^4.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
"react-scripts": "3.4.3",
"react-spinners": "^0.11.0",
"styled-components": "^5.3.0",
"sweetalert2": "^11.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "npm run test -- --coverage --watchAll=false",
"eject": "react-scripts eject",
"lint": "eslint ./src --ext .js,.jsx",
"lint:fix": "eslint ./src --ext .js,.jsx --fix"
},
"devDependencies": {
"@emotion/react": "^11.4.0",
"@testing-library/react-hooks": "^7.0.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-eslint-comments": "^3.2.0",
Expand All @@ -30,9 +42,11 @@
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"husky": "^4.2.5",
"jest-styled-components": "^7.0.5",
"lint-staged": "^10.2.13",
"prettier": "^2.1.1",
"pretty-quick": "^3.0.0"
"pretty-quick": "^3.0.0",
"react-test-renderer": "^16.9.0"
},
"browserslist": {
"production": [
Expand All @@ -57,5 +71,15 @@
"hooks": {
"pre-commit": "lint-staged"
}
},
"jest": {
"coveragePathIgnorePatterns": [
"<rootDir>/src/data",
"<rootDir>/src/components/Private",
"<rootDir>/src/pages/Login",
"<rootDir>/src/pages/NotFound",
"<rootDir>/src/pages/Secret",
"<rootDir>/src/providers/Auth"
]
}
}
1 change: 1 addition & 0 deletions public/_redirects
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* /index.html 200
Binary file modified public/favicon.ico
Binary file not shown.
31 changes: 20 additions & 11 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,29 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script
src="https://kit.fontawesome.com/1dfb86f6a3.js"
crossorigin="anonymous"
></script>
<title>YouTube clone App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<div id="portal"></div>
</body>
</html>
30 changes: 30 additions & 0 deletions src/Tests/components/App.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { mount } from "enzyme";
import App from "../../components/App/App.component";
import Navbar from '../../components/Navbar/Navbar.component';

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Todos estas lineas vacias son innecesarias

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Listo, ya borre esas lineas




describe('tests of the App component', () => {
let wrapper = mount(< App/>)

test('should render the component correctly', () => {
expect(wrapper).toMatchSnapshot()
})
test('should have a videoList Provider', () => {
let videoListProvider = wrapper.find('VideoListProvider')
expect(videoListProvider.length).toBe(1)
})

test('should have a Navbar component', () => {
let navbar = wrapper.find('Navbar')
expect(navbar.length).toBe(1)
})

test('should have a HomePage component', () => {
let homePage = wrapper.find('HomePage')
expect(homePage.length).toBe(1)
})

})
26 changes: 26 additions & 0 deletions src/Tests/components/Layout.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import { shallow } from 'enzyme';
import Layout from '../../components/Layout/Layout.component';
import Navbar from '../../components/Navbar/Navbar.component';
jest.mock('../../components/Navbar/Navbar.component', () => 'Navbar')
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hace falta un espacio entre la linea 4 y 5

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

listo, espacio agregado


describe('Test of the Layout component', () => {
let children = Navbar
let wrapper = shallow( < Layout children={children} />)

test('main container should be rendered correctly', () => {
expect(wrapper).toMatchSnapshot()
})

test('main tag should contain the container className', () => {
const mainContainer = wrapper.find('main')
expect(mainContainer.hasClass('container')).toBe(true)
})

test('Layout component should display the received props inside the main tag', () => {
const mainTag = wrapper.find('main').text()
expect(mainTag).toBe(children)
})


})
76 changes: 76 additions & 0 deletions src/Tests/components/Navbar.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from 'react';
import { mount } from 'enzyme';
import Navbar from '../../components/Navbar/Navbar.component'
import { VideoListContext } from '../../providers/VideoList/VideoList.provider';
import Context from '../../providers/Theme/Theme.provider'
import { MemoryRouter } from 'react-router';
import AuthProvider, { useAuth } from '../../providers/Auth';


describe('Tests of the Navbar component', () => {

const setSearch = jest.fn()
const dispatch = jest.fn()
const logout = jest.fn()
const authenticated = true
let wrapper;
beforeEach(() => {
jest.clearAllMocks();
wrapper = mount(
<AuthProvider
value={{
authenticated,
logout
}}
>
<Context.Provider
value={{
dispatch
}}
>
<VideoListContext.Provider
value={{
setSearch
}}
>
<MemoryRouter>
<Navbar/>
</MemoryRouter>
</VideoListContext.Provider>
</Context.Provider>
</AuthProvider>)
})

test('should render the Navbar component correctly', () => {
expect(wrapper).toMatchSnapshot()
})

test('should have an styled input tag', () => {
const styledInput = wrapper.find('InputText')
const value = 'React!'
styledInput.simulate('change', {
target: {
value
}
})
expect(styledInput.length).toBe(1)
})
test('should post info on submit', () => {
const formEventMocked = { preventDefault: setSearch };
wrapper.find('form').simulate('submit', formEventMocked);
expect(wrapper.find('form')).toHaveLength(1);
expect(formEventMocked.preventDefault).toHaveBeenCalledTimes(1)
})

test('should call setSearch and clean the input text ', () => {
const value = 'learn jest'
wrapper.find('InputText').simulate('change', { target: {value}})
wrapper.find('form').simulate('submit', {preventDefault(){}});
expect(setSearch).toHaveBeenCalled()
expect(wrapper.find('InputText').prop('value')).toBe('')

})


})

33 changes: 33 additions & 0 deletions src/Tests/components/RecommendedVideos.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { mount } from 'enzyme';
import RecommendedVideos from '../../components/RecommendedVideos';
import {VideoListContext} from '../../providers/VideoList/VideoList.provider';
import { videosState } from '../mockData/videosList'
import { MemoryRouter } from 'react-router';


describe('Tests of the RecommendedVideos component', () => {

const wrapper = mount(
<VideoListContext.Provider
value={{
videosState
}}
>
<MemoryRouter>
< RecommendedVideos/>
</MemoryRouter>
</VideoListContext.Provider>

)

test('should render the component correctly', () => {
expect(wrapper).toMatchSnapshot()
})

test('should display all of the videos passed', () => {
let videos = wrapper.find('recommended-video__card')
expect(videos.length).toBe(videos.length)
})

})
27 changes: 27 additions & 0 deletions src/Tests/components/VideoDetails.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';
import { mount } from 'enzyme/build';
import VideoDetails from '../../components/VideoDetails/VideoDetails.component';
import { MemoryRouter, Route } from 'react-router';
import { videosState } from '../mockData/videosList'
import { VideoListContext } from '../../providers/VideoList/VideoList.provider';

describe('Tests of the VideoDetials component', () => {
const wrapper = mount(
<VideoListContext.Provider
value={{videosState}}
>
<MemoryRouter
initialEntries={['/video/Po3VwR_NNGk']}
>
<Route path="/video/:id" >
<VideoDetails />
</Route>
</MemoryRouter>
</VideoListContext.Provider>)

test('should display the component correctly', () => {
expect(wrapper).toMatchSnapshot()
})


})
Loading