Skip to content

Commit

Permalink
Merge pull request #148 from Arquisoft/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@uo284548
uo284548 authored May 2, 2023
2 parents 89983a6 + 768d148 commit 007d82a
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 38 deletions.
65 changes: 60 additions & 5 deletions webapp/src/components/AddMarkerPopup/AddMarkerPopup.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Loader from '../Loader'
import i18n from 'i18next'
import AddMarkerPopup from '.'
import { LngLat, LngLatBounds } from 'mapbox-gl'
import userEvent from '@testing-library/user-event'

const mockClose = jest.fn();
const mockAddMark = jest.fn();
Expand Down Expand Up @@ -44,7 +45,7 @@ describe("AddMarker popup", ()=>{
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose}></AddMarkerPopup>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)
Expand All @@ -56,7 +57,7 @@ describe("AddMarker popup", ()=>{
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose}></AddMarkerPopup>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)
Expand All @@ -66,14 +67,47 @@ describe("AddMarker popup", ()=>{
await waitFor(() => expect(screen.getByText('addMarker.name.error')).toBeInTheDocument());
})


test('Try to write too long a name', async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('addMarker.title')).toBeInTheDocument());
const name = '0123456789'.repeat(3)
userEvent.type(screen.getAllByRole("textbox")[0], name)
// Only first 20 characters should have been written
expect(screen.getByDisplayValue('0123456789'.repeat(2))).toBeInTheDocument()
})

test('Try to write too long a description', async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('addMarker.title')).toBeInTheDocument());
const description = '0123456789'.repeat(35)
userEvent.type(screen.getAllByRole("textbox")[1], description)
// Only first 300 characters should have been written
expect(screen.getByDisplayValue('0123456789'.repeat(30))).toBeInTheDocument()
})

it("Add mark without image", async () =>{



render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose}></AddMarkerPopup>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)
Expand All @@ -91,9 +125,30 @@ describe("AddMarker popup", ()=>{
await waitFor(() => expect(mockAddMark.mock.calls).toHaveLength(1));
await waitFor(() => expect(mockAddMark.mock.calls[0][0]).toBe('Nombre 1'));
await waitFor(() => expect(mockAddMark.mock.calls[0][2]).toBe('Description 1'))


})

test('closing should clean the inputs', async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddMarkerPopup visible={true} lngLat={lngLat} addMark={mockAddMark} closePopup={mockClose} />
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('addMarker.title')).toBeInTheDocument());
expect(screen.getByText("addMarker.name.placeholder")).toBeInTheDocument();
const textName = screen.getAllByRole("textbox")[0];
fireEvent.change(textName, {target: {value: "a good name"}})
expect(screen.getByText("addMarker.description.placeholder")).toBeInTheDocument();
const textDescription = screen.getAllByRole("textbox")[1];
fireEvent.change(textDescription, {target: {value: "a good description"}})

// Close event is triggered
fireEvent.click(screen.getAllByRole('button')[0])
expect(screen.queryByText('a good name')).not.toBeInTheDocument()
expect(screen.queryByText('a good description')).not.toBeInTheDocument()
})


})
42 changes: 42 additions & 0 deletions webapp/src/components/MarkersSidebar/MarkerSidebar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { SessionContext } from '@inrupt/solid-ui-react'
import { ISessionContext } from '@inrupt/solid-ui-react/dist/src/context/sessionContext'
import { IRoute } from '../../types/IRoute'
import { RoutesContext } from '../../context/RoutesContext'
import userEvent from '@testing-library/user-event'

const mockToggleSideBar = jest.fn();
const mockSetSelectedCategory = jest.fn();
Expand Down Expand Up @@ -250,4 +251,45 @@ it("Marker sidebar is displayed with markers friends",async ()=>{
expect(mockAddMarkerToRoute).toHaveBeenCalled();
expect(mockAddMarkerToRoute).toHaveBeenCalledWith(mockRoutes[0]);
});

test("SelectRouteMenu search routes", async () => {
const mockAddMarkerToRoute = jest.fn();
render(
<I18nextProvider i18n={i18n}>
<RoutesContext.Provider value={{ state: mockRoutes, dispatch: () => {} }}>
<SelectRouteMenu addMarkerToRoute={mockAddMarkerToRoute} />
</RoutesContext.Provider>
</I18nextProvider>
);

expect(screen.getByPlaceholderText('sidebar.details.route_list_search')).toBeInTheDocument()
const textSearch = screen.getByPlaceholderText('sidebar.details.route_list_search');
userEvent.type(textSearch,'1')
expect(screen.getByText('Ruta 1')).toBeInTheDocument();
expect(screen.queryByText('Ruta 2')).not.toBeInTheDocument();
expect(screen.queryByText('Ruta 3')).not.toBeInTheDocument();
});

test('Open details of a marker', async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<SessionContext.Provider value={{ session: { info: { webId: 'testwebid', isLoggedIn: true, sessionId: 'testSesssionId' } } } as ISessionContext}>
<MarkerContext.Provider value={{ state: pruebaMarkers, dispatch: mockDispach }}>
<MarkersSidebar toggleSidebar={mockToggleSideBar} selectedCategory={Category.All} setSelectedCategory={mockSetSelectedCategory} ></MarkersSidebar>
</MarkerContext.Provider>
</SessionContext.Provider>
</Suspense>
</I18nextProvider>
);

await waitFor(() => expect(screen.getByText('sidebar.list.title')).toBeInTheDocument())

const routeContent = screen.getByText('marker1')
expect(routeContent).toBeInTheDocument()
fireEvent.click(routeContent)

expect(screen.getByText('sidebar.details.title')).toBeInTheDocument()
expect(screen.getByText('marker1')).toBeInTheDocument()
})
})
31 changes: 28 additions & 3 deletions webapp/src/components/NavBar/Navbar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { I18nextProvider, initReactI18next } from 'react-i18next';
import Navbar from '.';
import Loader from '../Loader';
import { SidebarView } from '../../pages/MapPage';
import { UserContext } from '../../context/UserContext';
import { Thing } from '@inrupt/solid-client';

const mockOpenPopup = jest.fn();
const mockToggleSidebar = jest.fn();
Expand All @@ -17,6 +19,26 @@ i18n.use(initReactI18next).init({
fallbackLng: 'en',
})

const testUser = {
"type": "Subject",
"url": "https://adrimr202.solidcommunity.net/profile/card#me",
"predicates": {
"http://www.w3.org/1999/02/22-rdf-syntax-ns#type": {
"namedNodes": [
"http://schema.org/Person",
"http://xmlns.com/foaf/0.1/Person"
]
},
"http://xmlns.com/foaf/0.1/name": {
"literals": {
"http://www.w3.org/2001/XMLSchema#string": [
"John Doe"
]
}
},
}
}

describe('Navbar', () => {
afterEach(() => {
mockOpenPopup.mockClear();
Expand All @@ -43,7 +65,9 @@ describe('Navbar', () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<Navbar toggleNews={mockToggleNews} sidebarView={SidebarView.MARKERS} toggleSidebar={mockToggleSidebar} isSidebarOpen={mockIsSidebarOpen} openPopup={mockOpenPopup} />
<UserContext.Provider value={{ state: testUser as Thing, dispatch: () => {} }}>
<Navbar toggleNews={mockToggleNews} sidebarView={SidebarView.MARKERS} toggleSidebar={mockToggleSidebar} isSidebarOpen={mockIsSidebarOpen} openPopup={mockOpenPopup} />
</UserContext.Provider>
</Suspense>
</I18nextProvider>
);
Expand Down Expand Up @@ -126,6 +150,7 @@ describe('Navbar', () => {
expect(screen.getByText('configPopup.title')).toBeInTheDocument()
fireEvent.click(screen.getAllByRole('button')[0]) // Presses the close button
expect(screen.getByText('options.title')).toBeInTheDocument()
fireEvent.click(screen.getAllByRole('button')[0]) // Presses the close button
});

it("opens the about popup from user menu", async () => {
Expand All @@ -142,7 +167,7 @@ describe('Navbar', () => {
expect(screen.getByText('aboutPopup.title')).toBeInTheDocument()
});

it("opens the about popup from user menu", async () => {
it("click logout from user menu", async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
Expand All @@ -155,7 +180,7 @@ describe('Navbar', () => {
fireEvent.click(screen.getByText('navbar.user.logout'))
});

it("opens the about popup from user menu", async () => {
it("opens the friends popup from user menu", async () => {
render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
Expand Down
1 change: 1 addition & 0 deletions webapp/src/components/NewsPopup/AddNewsPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const AddNewsPopup = ({onClose, addNew}:PropsAddNewsPoup)=>{
isError(false);
}
addNew(text)
setText('')
onClose();
}

Expand Down
82 changes: 70 additions & 12 deletions webapp/src/components/NewsPopup/NewsPopup.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { NewsContext } from '../../context/NewsContext'
import NewsPopup from '.'
import { INews } from '../../types/INews'
import AddNewsPopup from './AddNewsPopup'
import userEvent from '@testing-library/user-event'
import { act } from 'react-dom/test-utils'
import { SessionContext } from '@inrupt/solid-ui-react'
import { ISessionContext } from '@inrupt/solid-ui-react/dist/src/context/sessionContext'

i18n.use(initReactI18next).init({
fallbackLng: 'en',
Expand All @@ -27,10 +31,10 @@ const mockClose = jest.fn();

render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<NewsPopup toggleNews={ mockToggleNews} isNewsOpen={true} ></NewsPopup>
</Suspense>
</I18nextProvider>
<Suspense fallback={<Loader />}>
<NewsPopup toggleNews={ mockToggleNews} isNewsOpen={true} ></NewsPopup>
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('news.title')).toBeInTheDocument())
Expand Down Expand Up @@ -61,10 +65,10 @@ const mockClose = jest.fn();

render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddNewsPopup onClose={mockClose} addNew={mockAddNew}></AddNewsPopup>
</Suspense>
</I18nextProvider>
<Suspense fallback={<Loader />}>
<AddNewsPopup onClose={mockClose} addNew={mockAddNew}></AddNewsPopup>
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('news.addNew.title')).toBeInTheDocument())
Expand All @@ -82,15 +86,69 @@ const mockClose = jest.fn();

render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<AddNewsPopup onClose={mockClose} addNew={mockAddNew}></AddNewsPopup>
</Suspense>
</I18nextProvider>
<Suspense fallback={<Loader />}>
<AddNewsPopup onClose={mockClose} addNew={mockAddNew}></AddNewsPopup>
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('news.addNew.title')).toBeInTheDocument())
fireEvent.click(screen.getByRole("button", { name: "news.addButton" }));
await waitFor(() => expect(screen.getByText('news.addNew.error')).toBeInTheDocument())
})

it("Add a new news", async ()=>{
const mockNewsDispatch = jest.fn()
const {rerender} = render(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<SessionContext.Provider value={{ session: { info: { webId: 'testwebid', isLoggedIn: true, sessionId: 'testSesssionId' } } } as ISessionContext}>
<NewsContext.Provider value={{ state: [], dispatch: mockNewsDispatch }}>
<NewsPopup toggleNews={ mockToggleNews} isNewsOpen={true} ></NewsPopup>
</NewsContext.Provider>
</SessionContext.Provider>
</Suspense>
</I18nextProvider>
)

await waitFor(() => expect(screen.getByText('news.title')).toBeInTheDocument())
expect(screen.getByText('news.noNews')).toBeInTheDocument()

const addButton = screen.getByText('news.addButton')
act(() => {fireEvent.click(addButton)})
expect(screen.getByText('news.addNew.title')).toBeInTheDocument()

const text = screen.getAllByRole("textbox")[0];
userEvent.type(text, 'una noticia')
act(() => {fireEvent.click(screen.getAllByText("news.addButton")[1])})

await waitFor(() => expect(screen.getByText('news.title')).toBeInTheDocument())
expect(screen.queryByText('news.addNew.title')).not.toBeInTheDocument()

expect(mockNewsDispatch).toHaveBeenCalled()
expect(mockNewsDispatch.mock.lastCall[0]).toEqual({
payload: {
news: {
author: "testwebid",
id: expect.any(String),
text: "una noticia",
},
},
type: "ADD",
})

rerender(
<I18nextProvider i18n={i18n}>
<Suspense fallback={<Loader />}>
<SessionContext.Provider value={{ session: { info: { webId: 'testwebid', isLoggedIn: true, sessionId: 'testSesssionId' } } } as ISessionContext}>
<NewsContext.Provider value={{ state: [mockNewsDispatch.mock.lastCall[0].payload.news], dispatch: mockNewsDispatch }}>
<NewsPopup toggleNews={ mockToggleNews} isNewsOpen={true} ></NewsPopup>
</NewsContext.Provider>
</SessionContext.Provider>
</Suspense>
</I18nextProvider>
)
expect(screen.getByText('una noticia')).toBeInTheDocument()
})

})
Loading

0 comments on commit 007d82a

Please sign in to comment.