diff --git a/jest.config.js b/jest.config.js index e4fdb5e..41ba18e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,17 +5,10 @@ module.exports = { '/.next/', 'stories.tsx', '/mock', - '/pages', - '/constants', - '/styles' - ], - coveragePathIgnorePatterns: [ - 'stories.tsx', - '/mock', - '/pages', '/constants', '/styles' ], + coveragePathIgnorePatterns: ['stories.tsx', '/mock', '/constants', '/styles'], transformIgnorePatterns: ['node_modules/(?!imask|react-extras)'], collectCoverage: true, collectCoverageFrom: ['src/**/*.ts(x)?'], diff --git a/src/components/header/header.spec.tsx b/src/components/header/header.spec.tsx new file mode 100644 index 0000000..160ee9a --- /dev/null +++ b/src/components/header/header.spec.tsx @@ -0,0 +1,32 @@ +import { render, screen } from '@testing-library/react' +import { Header } from './header' + +describe('
', () => { + it('should be render a Header component', () => { + render(
) + + expect( + screen.getByRole('heading', { + name: /randomfy/i + }) + ).toBeInTheDocument() + + expect( + screen.getByRole('link', { + name: /home/i + }) + ).toBeInTheDocument() + + expect( + screen.getByRole('link', { + name: /about/i + }) + ).toBeInTheDocument() + + expect( + screen.getByRole('link', { + name: /log out/i + }) + ).toBeInTheDocument() + }) +}) diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx new file mode 100644 index 0000000..78451e5 --- /dev/null +++ b/src/components/header/header.tsx @@ -0,0 +1,22 @@ +import Link from 'next/link' +import { Title } from 'components' + +export const Header = () => { + return ( +
+ Randomfy + +
+ + + +
+
+ ) +} diff --git a/src/components/header/index.ts b/src/components/header/index.ts new file mode 100644 index 0000000..d0dd85a --- /dev/null +++ b/src/components/header/index.ts @@ -0,0 +1 @@ +export { Header } from './header' diff --git a/src/components/index.ts b/src/components/index.ts index c87ae12..df94185 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,3 +6,4 @@ export { Title } from './title' export { SubTitle } from './sub-title' export { PrimaryButton } from './primary-button' export { PrimaryText } from './primary-text' +export { Header } from './header' diff --git a/src/features/match/match.spec.tsx b/src/features/match/match.spec.tsx index ecc00c8..ba1c273 100644 --- a/src/features/match/match.spec.tsx +++ b/src/features/match/match.spec.tsx @@ -38,12 +38,6 @@ describe('', () => { /> ) - expect( - screen.getByRole('heading', { - name: /randomfy/i - }) - ).toBeInTheDocument() - expect(screen.getAllByText(/fish beach/i)).toHaveLength( MAX_ARTISTS_TO_SHOW_PER_TURN ) diff --git a/src/features/match/match.tsx b/src/features/match/match.tsx index ba2d1d9..4b9beb6 100644 --- a/src/features/match/match.tsx +++ b/src/features/match/match.tsx @@ -51,15 +51,7 @@ export const Match = ({ return likedArtists.length < MAX_RANDOM_FY_ITEMS ? ( -
- Randomfy - {isRefetching && refetching...} -
- + {isRefetching && refetching...} {isLoading && } {newArtists.map((artist) => ( diff --git a/src/features/picture/picture.tsx b/src/features/picture/picture.tsx index 738ea29..d8b9209 100644 --- a/src/features/picture/picture.tsx +++ b/src/features/picture/picture.tsx @@ -38,9 +38,6 @@ export const Picture = ({ return artists.length >= MAX_RANDOM_FY_ITEMS ? (
-
- Randomfy -
You can download your randomfy!
diff --git a/src/pages/about.tsx b/src/pages/about.tsx new file mode 100644 index 0000000..68cf123 --- /dev/null +++ b/src/pages/about.tsx @@ -0,0 +1,72 @@ +import { Content, Header, PrimaryText, SubTitle } from 'components' + +const About = () => { + return ( + +
+
+ About +
+ + Randomfy takes your most listened to Spotify artists and select one + of them for you can know new artists based in this artist selected. + If you liked that artist, you can give a like. After that, you can + make a playlist with the artists liked and share with your friends. + Also you can create a picture with this artists. + +
+ + Disclaimer: Randomfy is not affiliated with Spotify. The site is + built on Nextjs, React and the Spotify API. + +
+
+ + Why are you reading this? You must be bored. Go listen to new + artists. + +
+
+ +
+ Developer +
+ Raul Andrade +
+
+ + +
+ + ) +} + +export default About diff --git a/src/templates/home/authenticated.tsx b/src/templates/home/authenticated.tsx index eae0235..8bb14a8 100644 --- a/src/templates/home/authenticated.tsx +++ b/src/templates/home/authenticated.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { Content } from 'components' +import { Content, Header } from 'components' import { Recommendation } from 'types' @@ -20,13 +20,14 @@ export const Authenticated = ({ artistId }: AuthenticatedProps) => { value={{ source: currentPlaying, setSource: setCurrentPlaying }} > +
- + ) diff --git a/src/templates/home/non-authenticated.tsx b/src/templates/home/non-authenticated.tsx index 391726c..5276482 100644 --- a/src/templates/home/non-authenticated.tsx +++ b/src/templates/home/non-authenticated.tsx @@ -1,13 +1,11 @@ import Image from 'next/image' -import { Title, Content, SubTitle, PrimaryText } from 'components' +import { Content, SubTitle, PrimaryText, Header } from 'components' import Link from 'next/link' export const NonAuthenticated = () => { return ( -
- Randomfy -
+
Yeah. Hello music lover!