Skip to content

Commit

Permalink
Merge develop (#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
BuenClima authored Jan 23, 2024
2 parents cb3a389 + bb88bc8 commit 5de09d1
Show file tree
Hide file tree
Showing 78 changed files with 1,827 additions and 120 deletions.
1 change: 1 addition & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
[ ] Bugfix
[ ] CI / CD Update
[ ] Documentation
[ ] Tests

### What is the impact of the development

Expand Down
9 changes: 1 addition & 8 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ const preview: Preview = {
date: /Date$/i
}
}
},
decorators: [
(Story) => (
<AppProvider>
<Story />
</AppProvider>
)
]
}
}

export default preview
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,15 @@
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/css-mediaquery": "^0",
"@types/prop-types": "^15",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.16",
"css-mediaquery": "^0.1.2",
"eslint": "^8.54.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.29.0",
Expand Down
41 changes: 27 additions & 14 deletions src/app/store.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { configureStore } from '@reduxjs/toolkit'
import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'

import authSlice from '@/features/Auth/services/authSlice'
Expand All @@ -7,27 +7,40 @@ import loadingSlice from '@/services/loadingSlice'
import modalSlice from '@/services/modalSlice'

/**
* @description Initialize Redux store
* @description Combine reducers
*/
export const store = configureStore({
reducer: {
loading: loadingSlice,
modal: modalSlice,
filters: filtersSlice,
auth: authSlice
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware()
const rootReducer = combineReducers({
loading: loadingSlice,
modal: modalSlice,
filters: filtersSlice,
auth: authSlice
})

/**
* @description Initialize Redux store
*/
export function setupStore(preloadedState?: Partial<RootState>) {
return configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
preloadedState
})
}

/**
* @description Initialize store with preloaded state
*/
export type AppStore = ReturnType<typeof setupStore>

/**
* @description Define RootState type
*/
export type RootState = ReturnType<typeof store.getState>
export type RootState = ReturnType<typeof rootReducer>

/**
* @description Define AppDispatch type
*/
export type AppDispatch = typeof store.dispatch
export type AppDispatch = AppStore['dispatch']

/**
* @description Define DispatchFunc type
Expand All @@ -41,6 +54,6 @@ export const useAppDispatch: DispatchFunc = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

/**
* @description Export store
* @description Export setupStore function
*/
export default store
export default setupStore
5 changes: 5 additions & 0 deletions src/components/A11y/A11y.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* @description a11y type
* @property {string} id - id
* @property {string} aria-controls - aria-controls
*/
type a11y = { id: string; 'aria-controls': string }

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { Meta, StoryObj } from '@storybook/react'

import AppProvider from '@/providers/AppProvider'

import { AppBar } from './AppBar'

const meta = {
Expand All @@ -8,7 +10,14 @@ const meta = {
parameters: {
layout: 'centered'
},
tags: ['autodocs']
tags: ['autodocs'],
decorators: [
(Story) => (
<AppProvider>
<Story />
</AppProvider>
)
]
} satisfies Meta<typeof AppBar>

export default meta
Expand Down
35 changes: 28 additions & 7 deletions src/components/AppBar/AppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,11 @@ export const AppBar = (): JSX.Element => {
<>
<AppBarMui position="fixed">
<Container maxWidth="xl">
<Toolbar disableGutters id="appBar">
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Toolbar disableGutters id="appBar" data-testid="toolbar">
<AdbIcon
sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }}
data-testid="logo-md"
/>
<Typography
variant="h6"
noWrap
Expand All @@ -77,6 +80,7 @@ export const AppBar = (): JSX.Element => {
color: 'inherit',
textDecoration: 'none'
}}
data-testid="logo-name-md"
>
Mr.Tipsters
</Typography>
Expand All @@ -89,6 +93,7 @@ export const AppBar = (): JSX.Element => {
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
data-testid="menu-icon"
>
<MenuIcon />
</IconButton>
Expand All @@ -109,9 +114,11 @@ export const AppBar = (): JSX.Element => {
sx={{
display: { xs: 'block', md: 'none' }
}}
data-testid="menu"
>
{pages.map((page) => (
<MenuItem
data-testid={`xs-menu-${page.title?.toLowerCase()}-button`}
key={page.title}
onClick={() => {
navigate(page.url)
Expand All @@ -123,7 +130,10 @@ export const AppBar = (): JSX.Element => {
))}
</Menu>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<AdbIcon
sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }}
data-testid="logo-xs"
/>
<Typography
variant="h5"
noWrap
Expand All @@ -139,12 +149,14 @@ export const AppBar = (): JSX.Element => {
color: 'inherit',
textDecoration: 'none'
}}
data-testid="logo-name-xs"
>
LOGO
Mr.Tipsters
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
data-testid={`menu-${page.title?.toLowerCase()}-button`}
key={page.title}
onClick={() => {
navigate(page.url)
Expand All @@ -167,8 +179,12 @@ export const AppBar = (): JSX.Element => {
</Box>

<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Tooltip title="Open settings" data-testid="menu-tooltip">
<IconButton
onClick={handleOpenUserMenu}
sx={{ p: 0 }}
data-testid="menu-user-button"
>
<Avatar
alt="Avatar of the user"
src="https://i.pravatar.cc/300"
Expand Down Expand Up @@ -198,9 +214,14 @@ export const AppBar = (): JSX.Element => {
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
data-testid="menu-user"
>
{settings.map((setting) => (
<MenuItem key={setting.title} onClick={handleCloseUserMenu}>
<MenuItem
key={setting.title}
onClick={handleCloseUserMenu}
data-testid={`menu-user-${setting.title.toLowerCase()}`}
>
<Button onClick={() => navigate(setting.url)}>
<Typography textAlign="center" textTransform="none">
{setting.title}
Expand Down
121 changes: 116 additions & 5 deletions src/components/AppBar/AppBar.unit.test.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,127 @@
import { render } from '@testing-library/react'
import { describe, it } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, it } from 'vitest'

import AppProvider from '@/providers/AppProvider'
import { resizeScreenSize } from '@/setupTests'

import AppBar from './AppBar'

describe('AppBar', () => {
it('renders', () => {
/**
* @description AppBar unit tests
*/
describe('AppBar', async () => {
/**
* @description renders with a toolbar and content
*/
it('renders with a toolbar and content', async () => {
render(
<AppProvider>
<AppBar></AppBar>
<AppBar />
</AppProvider>
)

const toolbar = screen.getByTestId('toolbar')

await waitFor(() => {
expect(toolbar).toBeInTheDocument()
})
})

/**
* @description renders with desktop viewport
*/
it('renders with desktop viewport', async () => {
render(
<AppProvider>
<AppBar />
</AppProvider>
)

const toolbar = screen.getByTestId('toolbar')
const logoMd = screen.getByTestId('logo-md')
const logoNameMd = screen.getByTestId('logo-name-md')
const linkToTipsters = screen.getByTestId('menu-tipsters-button')
const linkToTips = screen.getByTestId('menu-tips-button')

await waitFor(() => {
expect(toolbar).toBeInTheDocument()

expect(logoMd).toBeInTheDocument()

expect(logoNameMd).toBeInTheDocument()
expect(logoNameMd).toHaveTextContent('Mr.Tipsters')

expect(linkToTipsters).toBeInTheDocument()
expect(linkToTips).toBeInTheDocument()

expect(linkToTipsters).toHaveTextContent('Tipsters')
expect(linkToTips).toHaveTextContent('Tips')
})
})
/**
* @description renders with desktop viewport
*/
it('renders with mobile viewport', async () => {
resizeScreenSize(390, 844)
render(
<AppProvider>
<AppBar />
</AppProvider>
)

const toolbar = screen.getByTestId('toolbar')
const logoXs = screen.getByTestId('logo-xs')
const logoNameXs = screen.getByTestId('logo-name-xs')
const appMenu = screen.getByTestId('menu')

await waitFor(() => {
expect(toolbar).toBeInTheDocument()

expect(logoXs).toBeInTheDocument()

expect(logoNameXs).toBeInTheDocument()
expect(logoNameXs).toHaveTextContent('Mr.Tipsters')

expect(appMenu).toBeInTheDocument()
})

await userEvent.click(appMenu).then(() => {
const linkToTipsters = screen.getByTestId('xs-menu-tipsters-button')
const linkToTips = screen.getByTestId('xs-menu-tips-button')

expect(linkToTipsters).toBeInTheDocument()
expect(linkToTips).toBeInTheDocument()

expect(linkToTipsters).toHaveTextContent('Tipsters')
expect(linkToTips).toHaveTextContent('Tips')
})
})

/**
* @description renders with desktop viewport
*/
it('on menu settings click it should open the menu settings', async () => {
render(
<AppProvider>
<AppBar />
</AppProvider>
)

const menuUserButton = screen.getByTestId('menu-user-button')

await userEvent.click(menuUserButton).then(() => {
const menuAppBar = screen.getByTestId('menu-user')
const linkToAccount = screen.getByTestId('menu-user-account')
const linkToLogout = screen.getByTestId('menu-user-logout')

expect(menuAppBar).toBeInTheDocument()

expect(linkToAccount).toBeInTheDocument()
expect(linkToLogout).toBeInTheDocument()

expect(linkToAccount).toHaveTextContent('Account')
expect(linkToLogout).toHaveTextContent('Logout')
})
})
})
File renamed without changes.
Loading

0 comments on commit 5de09d1

Please sign in to comment.