diff --git a/src/test/listingMocks.ts b/src/test/listingMocks.ts
new file mode 100644
index 0000000..a2a8e98
--- /dev/null
+++ b/src/test/listingMocks.ts
@@ -0,0 +1,131 @@
+import type { MockLink } from '@apollo/client/testing';
+import { mockListings } from '../data/mockListings.ts';
+import {
+ CREATE_LISTING_MUTATION,
+ type CreateListingInput,
+} from '../graphql/listingMutations.ts';
+import {
+ CATALOG_PAGE_SIZE,
+ LISTINGS_PAGE_QUERY,
+ LISTING_QUERY,
+} from '../graphql/listingQueries.ts';
+import type { Listing } from '../types/listing.ts';
+
+/**
+ * Mockede GraphQL-svar for testene. Annonsene er de samme eksemplene som i
+ * prototypen, men komponentene får dem gjennom Apollo, slik de gjør mot
+ * backenden. Apollo legger til __typename i spørringene, så svarene må ha det.
+ */
+
+function toSummary(listing: Listing) {
+ const { id, title, category, area, dailyPrice, imageUrl } = listing;
+ return {
+ __typename: 'Listing' as const,
+ id,
+ title,
+ category,
+ area,
+ dailyPrice,
+ imageUrl,
+ };
+}
+
+interface PageMockOptions {
+ page?: number;
+ items?: Listing[];
+ totalCount?: number;
+}
+
+/** Svar på katalogspørringen for én side. */
+export function listingsPageMock({
+ page = 1,
+ items = mockListings,
+ totalCount = items.length,
+}: PageMockOptions = {}): MockLink.MockedResponse {
+ const offset = (page - 1) * CATALOG_PAGE_SIZE;
+ return {
+ request: {
+ query: LISTINGS_PAGE_QUERY,
+ variables: { limit: CATALOG_PAGE_SIZE, offset },
+ },
+ result: {
+ data: {
+ listings: {
+ __typename: 'ListingPage',
+ items: items.map(toSummary),
+ totalCount,
+ hasNextPage: offset + items.length < totalCount,
+ },
+ },
+ },
+ };
+}
+
+/** Svar på detaljspørringen. null betyr at annonsen ikke finnes. */
+export function listingMock(
+ id: string,
+ listing: Listing | null = mockListings.find((item) => item.id === id) ?? null,
+): MockLink.MockedResponse {
+ return {
+ request: { query: LISTING_QUERY, variables: { id } },
+ result: {
+ data: {
+ listing: listing && { __typename: 'Listing', ...listing },
+ },
+ },
+ };
+}
+
+/** Nettverksfeil, som når backenden ikke svarer. */
+export function networkErrorMock(
+ request: MockLink.MockedResponse['request'],
+): MockLink.MockedResponse {
+ return { request, error: new Error('Failed to fetch') };
+}
+
+/** Gyldig annonse fra utleieskjemaet, slik den sendes til createListing. */
+export const validCreateListingInput: CreateListingInput = {
+ title: 'Stikksag',
+ category: 'powerTools',
+ description: 'Stikksag for tre.',
+ area: 'Lade',
+ dailyPrice: 80,
+};
+
+export function createListingRequest(
+ input: CreateListingInput = validCreateListingInput,
+): MockLink.MockedResponse['request'] {
+ return { query: CREATE_LISTING_MUTATION, variables: { input } };
+}
+
+/**
+ * Vellykket createListing. delay holder svaret igjen litt, slik at testene
+ * kan se at knappen er deaktivert mens annonsen lagres.
+ */
+export function createListingMock(
+ id = 'listing-ny',
+ input: CreateListingInput = validCreateListingInput,
+): MockLink.MockedResponse {
+ return {
+ request: createListingRequest(input),
+ delay: 20,
+ result: {
+ data: {
+ createListing: { __typename: 'Listing', id, title: input.title },
+ },
+ },
+ };
+}
+
+/** Serveren avviser annonsen, som når valideringen i backenden feiler. */
+export function createListingRejectedMock(
+ message: string,
+ input: CreateListingInput = validCreateListingInput,
+): MockLink.MockedResponse {
+ return {
+ request: createListingRequest(input),
+ result: {
+ errors: [{ message, extensions: { code: 'BAD_USER_INPUT' } }],
+ },
+ };
+}
diff --git a/src/test/renderApp.tsx b/src/test/renderApp.tsx
new file mode 100644
index 0000000..ed441cf
--- /dev/null
+++ b/src/test/renderApp.tsx
@@ -0,0 +1,23 @@
+import type { MockLink } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing/react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import App from '../App.tsx';
+import { listingsPageMock } from './listingMocks.ts';
+
+/**
+ * Rendrer hele appen på en gitt adresse med mockede GraphQL-svar. Uten egne
+ * mocks får katalogen første side med eksempelannonsene.
+ */
+export function renderApp(
+ route = '/',
+ mocks: MockLink.MockedResponse[] = [listingsPageMock()],
+) {
+ return render(
+
+
+
+ ,
+ );
+}
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 36d26bd..9b8baff 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -7,3 +7,6 @@ import { afterEach } from 'vitest';
afterEach(() => {
cleanup();
});
+
+// jsdom har ikke scrolling. Katalogen scroller til toppen ved bytte av side.
+window.scrollTo = () => {};
diff --git a/src/types/listing.ts b/src/types/listing.ts
index b8c5abb..b2ec889 100644
--- a/src/types/listing.ts
+++ b/src/types/listing.ts
@@ -26,3 +26,9 @@ export interface Listing {
/** Adresse til bilde av verktøyet, eller null når annonsen mangler bilde. */
imageUrl: string | null;
}
+
+/** Feltene annonsekortet i katalogen trenger. */
+export type ListingSummary = Pick<
+ Listing,
+ 'id' | 'title' | 'category' | 'area' | 'dailyPrice' | 'imageUrl'
+>;
diff --git a/src/utils/catalogPage.test.ts b/src/utils/catalogPage.test.ts
new file mode 100644
index 0000000..8f60b9c
--- /dev/null
+++ b/src/utils/catalogPage.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { catalogPageLink, countPages, readCatalogPage } from './catalogPage.ts';
+
+describe('readCatalogPage', () => {
+ it('leser siden fra URL-en', () => {
+ expect(readCatalogPage(new URLSearchParams('side=3'))).toBe(3);
+ });
+
+ it.each(['', 'side=0', 'side=-2', 'side=abc', 'side=1.5'])(
+ 'gir første side for «%s»',
+ (search) => {
+ expect(readCatalogPage(new URLSearchParams(search))).toBe(1);
+ },
+ );
+});
+
+describe('catalogPageLink', () => {
+ it('lar første side være uten parameter', () => {
+ expect(catalogPageLink(1)).toBe('/');
+ expect(catalogPageLink(2)).toBe('/?side=2');
+ });
+});
+
+describe('countPages', () => {
+ it('runder opp, og gir minst én side', () => {
+ expect(countPages(10010, 24)).toBe(418);
+ expect(countPages(24, 24)).toBe(1);
+ expect(countPages(0, 24)).toBe(1);
+ });
+});
diff --git a/src/utils/catalogPage.ts b/src/utils/catalogPage.ts
new file mode 100644
index 0000000..83d9fbd
--- /dev/null
+++ b/src/utils/catalogPage.ts
@@ -0,0 +1,25 @@
+/** Navnet på sideparameteren i URL-en, for eksempel «?side=3». */
+const PARAM_PAGE = 'side';
+
+/**
+ * Leser gjeldende side fra URL-en. Mangler eller ugyldige verdier, som «0»,
+ * «-2» eller «abc», gir første side.
+ */
+export function readCatalogPage(params: URLSearchParams): number {
+ const value = params.get(PARAM_PAGE);
+ if (value === null || !/^\d+$/.test(value)) {
+ return 1;
+ }
+ const page = Number(value);
+ return page >= 1 ? page : 1;
+}
+
+/** Lenke til en side i katalogen. Første side får ingen parameter. */
+export function catalogPageLink(page: number): string {
+ return page <= 1 ? '/' : `/?${PARAM_PAGE}=${page}`;
+}
+
+/** Antall sider, minst én, slik at en tom katalog også har «side 1 av 1». */
+export function countPages(totalCount: number, pageSize: number): number {
+ return Math.max(1, Math.ceil(totalCount / pageSize));
+}
diff --git a/src/utils/listingForm.test.ts b/src/utils/listingForm.test.ts
index 6590a15..6001268 100644
--- a/src/utils/listingForm.test.ts
+++ b/src/utils/listingForm.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
import {
emptyListingForm,
parseDailyPrice,
+ toCreateListingInput,
validateListingForm,
type ListingFormValues,
} from './listingForm.ts';
@@ -67,3 +68,26 @@ describe('validateListingForm', () => {
expect(errors.dailyPrice).toBeDefined();
});
});
+
+describe('toCreateListingInput', () => {
+ it('fjerner mellomrom og gjør prisen om til et tall', () => {
+ expect(
+ toCreateListingInput({
+ ...validForm,
+ title: ' Stikksag ',
+ area: ' Lade ',
+ dailyPrice: ' 0 ',
+ }),
+ ).toEqual({
+ title: 'Stikksag',
+ category: 'powerTools',
+ description: 'Stikksag for tre og laminat.',
+ area: 'Lade',
+ dailyPrice: 0,
+ });
+ });
+
+ it('nekter å lage input fra et ugyldig skjema', () => {
+ expect(() => toCreateListingInput(emptyListingForm)).toThrow();
+ });
+});
diff --git a/src/utils/listingForm.ts b/src/utils/listingForm.ts
index e4b675f..d56a06d 100644
--- a/src/utils/listingForm.ts
+++ b/src/utils/listingForm.ts
@@ -1,8 +1,12 @@
/**
* Validering av skjemaet for å legge ut verktøy. Verdiene er strenger slik de
- * kommer fra skjemafeltene. Senere skal serveren gjøre den samme kontrollen.
+ * kommer fra skjemafeltene. Serveren gjør den samme kontrollen når annonsen
+ * lagres (backend/src/validation/createListingInput.ts).
*/
+import type { CreateListingInput } from '../graphql/listingMutations.ts';
+import type { ToolCategory } from '../types/listing.ts';
+
export interface ListingFormValues {
title: string;
/** Tom streng til brukeren har valgt en kategori. */
@@ -80,3 +84,23 @@ export function validateListingForm(
return errors;
}
+
+/**
+ * Gjør skjemaverdiene om til input for createListing. Skal bare kalles når
+ * validateListingForm ikke har funnet feil, slik at kategori og pris er gyldige.
+ */
+export function toCreateListingInput(
+ values: ListingFormValues,
+): CreateListingInput {
+ const dailyPrice = parseDailyPrice(values.dailyPrice);
+ if (dailyPrice === null || !values.category) {
+ throw new Error('Skjemaet må være gyldig før det sendes til serveren.');
+ }
+ return {
+ title: values.title.trim(),
+ category: values.category as ToolCategory,
+ description: values.description.trim(),
+ area: values.area.trim(),
+ dailyPrice,
+ };
+}
diff --git a/vite.config.ts b/vite.config.ts
index 18f31aa..6f17882 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,8 +2,24 @@ import react from '@vitejs/plugin-react';
// defineConfig fra vitest/config godtar også test-innstillingene under.
import { defineConfig } from 'vitest/config';
+/** Adressen til GraphQL-backenden ved lokal utvikling (backend/.env). */
+const BACKEND_URL = 'http://localhost:3001';
+
export default defineConfig({
+ // Appen publiseres under /project2 på VM-en. Samme base lokalt gjør at
+ // lenker, bilder og API-kall bruker de samme stiene i utvikling og drift.
+ base: '/project2/',
plugins: [react()],
+ server: {
+ proxy: {
+ // På VM-en sender Apache /project2/api/ videre til backenden. Lokalt
+ // gjør Vite det samme, så frontend slipper å kjenne til portnummeret.
+ '/project2/api': {
+ target: BACKEND_URL,
+ rewrite: (path) => path.replace(/^\/project2\/api/, ''),
+ },
+ },
+ },
test: {
// jsdom gir et DOM i Node, slik at komponentene kan rendres uten nettleser.
environment: 'jsdom',