Fix recipes search form disalignment (#100)

* update * use only one job * Fix difficulties misalignment in recipes search form * Update tests * Update 'should display correct number of recipes...' test * Upda tests and adjust render condition of Pagination component. Show pages buttons only if totalPages > 1 * hotfix
luz-ojeda · Jun 12, 2024 · 8de8c4d · 8de8c4d
1 parent 1abc89d
commit 8de8c4d
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 87 deletions.
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
@@ -33,62 +33,64 @@
 			<option selected={perPage == 27} value="27">27</option>
 		</select>
 	</div>
-	<div class="flex-center">
-		<!-- Previous page button -->
-		{#if currentPage !== 1 && totalPages >= 2}
-			<button on:click={() => onPageClick(currentPage - 1)} style="width: 96px;"
-				>Pág. anterior</button
-			>
-		{/if}
-
-		<!-- Page 1 button -->
-		<button
-			class={currentPage === 1 ? 'active-page' : ''}
-			disabled={currentPage === 1}
-			on:click={() => onPageClick(1)}>1</button
-		>
-
-		<!-- Rest of pages buttons -->
-		{#if totalPages > PAGES_TO_DISPLAY_IN_BETWEEN + 2}
-			{#if currentPage >= 1 + PAGES_TO_DISPLAY_IN_BETWEEN}
-				<span>...</span>
+	{#if totalPages > 1}
+		<div class="flex-center">
+			<!-- Previous page button -->
+			{#if currentPage !== 1 && totalPages >= 2}
+				<button on:click={() => onPageClick(currentPage - 1)} style="width: 96px;"
+					>Pág. anterior</button
+				>
 			{/if}
 
-			{#each pagesArray.slice(pagesSliceIndex, pagesSliceIndex + 3) as i}
-				<button
-					class={currentPage === i ? 'active-page' : ''}
-					disabled={currentPage === i}
-					on:click={() => onPageClick(i)}>{i}</button
-				>
-			{/each}
+			<!-- Page 1 button -->
+			<button
+				class={currentPage === 1 ? 'active-page' : ''}
+				disabled={currentPage === 1}
+				on:click={() => onPageClick(1)}>1</button
+			>
 
-			{#if currentPage <= totalPages - PAGES_TO_DISPLAY_IN_BETWEEN}
-				<span>...</span>
+			<!-- Rest of pages buttons -->
+			{#if totalPages > PAGES_TO_DISPLAY_IN_BETWEEN + 2}
+				{#if currentPage >= 1 + PAGES_TO_DISPLAY_IN_BETWEEN}
+					<span>...</span>
+				{/if}
+
+				{#each pagesArray.slice(pagesSliceIndex, pagesSliceIndex + 3) as i}
+					<button
+						class={currentPage === i ? 'active-page' : ''}
+						disabled={currentPage === i}
+						on:click={() => onPageClick(i)}>{i}</button
+					>
+				{/each}
+
+				{#if currentPage <= totalPages - PAGES_TO_DISPLAY_IN_BETWEEN}
+					<span>...</span>
+				{/if}
+			{:else}
+				{#each Array.from(Array(totalPages - 2)).keys() as i}
+					<button
+						class={currentPage === i + 2 ? 'active-page' : ''}
+						disabled={currentPage === i + 2}
+						on:click={() => onPageClick(i + 2)}>{i + 2}</button
+					>
+				{/each}
 			{/if}
-		{:else}
-			{#each Array.from(Array(totalPages - 2)).keys() as i}
-				<button
-					class={currentPage === i + 2 ? 'active-page' : ''}
-					disabled={currentPage === i + 2}
-					on:click={() => onPageClick(i + 2)}>{i + 2}</button
-				>
-			{/each}
-		{/if}
-
-		<!-- Last page button -->
-		<button
-			class={currentPage === totalPages ? 'active-page' : ''}
-			disabled={currentPage === totalPages}
-			on:click={() => onPageClick(totalPages)}>{totalPages}</button
-		>
 
-		<!-- Next page button -->
-		{#if currentPage !== totalPages && totalPages > 2}
-			<button on:click={() => onPageClick(currentPage + 1)} style="width: 96px;"
-				>Pág. siguiente</button
+			<!-- Last page button -->
+			<button
+				class={currentPage === totalPages ? 'active-page' : ''}
+				disabled={currentPage === totalPages}
+				on:click={() => onPageClick(totalPages)}>{totalPages}</button
 			>
-		{/if}
-	</div>
+
+			<!-- Next page button -->
+			{#if currentPage !== totalPages && totalPages > 2}
+				<button on:click={() => onPageClick(currentPage + 1)} style="width: 96px;"
+					>Pág. siguiente</button
+				>
+			{/if}
+		</div>
+	{/if}
 </nav>
 
 <style lang="scss">

diff --git a/src/lib/components/RecipesSearchForm.svelte b/src/lib/components/RecipesSearchForm.svelte
@@ -137,14 +137,4 @@
 	.difficulty-label {
 		margin-bottom: 6px;
 	}
-
-	.difficulties-container {
-		@media (max-width: $tabletBreakpoint) {
-			div {
-				&:not(:last-child) {
-					margin-bottom: 12px;
-				}
-			}
-		}
-	}
 </style>
diff --git a/src/routes/recetas/+page.server.ts b/src/routes/recetas/+page.server.ts
@@ -5,10 +5,9 @@ import type { PageServerLoad } from '../$types';
 import { buildRecipesApiUrl } from '$lib';
 
 export const load: PageServerLoad<PaginatedList<Recipe>> = async ({ url, fetch }) => {
-	console.log("loading recipes from +page.server.ts with url: " + url)
 	const res = await fetch(buildRecipesApiUrl(env.API_URL, url));
 	const responseJson = await res.json();
-	console.log(responseJson.pagination.pageNumber)
+
 	if ('status' in responseJson) {
 		throw new Error(responseJson.title);
 	}

diff --git a/src/routes/recetas/+page.svelte b/src/routes/recetas/+page.svelte
@@ -77,7 +77,7 @@
 					/>
 				{/each}
 			</div>
-			{#if $recipes.pagination && $recipes.pagination.totalPages > 1}
+			{#if $recipes.pagination}
 				<div class="pagination">
 					<Pagination
 						currentPage={$recipes.pagination.pageNumber}

diff --git a/src/routes/recetas/+server.ts b/src/routes/recetas/+server.ts
@@ -3,7 +3,6 @@ import { buildRecipesApiUrl } from '$lib';
 import { json } from '@sveltejs/kit';
 
 export const GET = async ({ fetch, url }) => {
-	console.log("executing recipes fetch")
 	const res = await fetch(buildRecipesApiUrl(env.API_URL, url), {
 		headers: {
 			'x-api-key': `${env.API_KEY}`

diff --git a/tests/recipes.test.ts b/tests/recipes.test.ts
@@ -13,44 +13,39 @@ test.describe('recipes page', () => {
 		await perPageSelect.selectOption({ label: '18' });
 		expect(perPageSelect).toHaveValue('18');
 
-		let recipeCards = await page.getByTestId('recipe-card').all();
-		expect(recipeCards.length).toBe(18);
-
+		await expect(page.getByTestId('recipe-card')).toHaveCount(18)
+
 		// Change results per page to 27
 		await perPageSelect.selectOption({ label: '27' });
 		expect(perPageSelect).toHaveValue('27');
 
-		recipeCards = await page.getByTestId('recipe-card').all();
-		expect(recipeCards.length).toBe(27);
+		await expect(page.getByTestId('recipe-card')).toHaveCount(27)
 	});
 
 	test('should navigate to the next and previous pages correctly', async ({ page }) => {
 		await page.goto('/recetas');
 
 		await page.getByRole('button', { name: 'Pág. siguiente' }).click();
 
-		const activePageButton = page.locator('.active-page');
-		expect(await activePageButton.innerText()).toBe('2');
+		await expect(page.locator('.active-page')).toHaveText('2')
 
 		// Check if query parameter was updated
 		await page.waitForURL("/recetas?pagina=2")
 
 		// Click previous page button
 		await page.getByRole('button', { name: 'Pág. anterior' }).click();
 
-		expect(await activePageButton.innerText()).toBe('1');
+		await expect(page.locator('.active-page')).toHaveText('1')
 		await page.waitForURL("/recetas?pagina=1")
 	});
 
 	test('should display correct number of recipes and highlight correct page when navigating with query parameters', async ({
 		page
 	}) => {
-		await page.goto('/recetas?pagina=2&por_pagina=18');
-
-		const recipeCards = await page.getByTestId('recipe-card').all();
+		await page.goto('/recetas?pagina=2&por_pagina=9');
 
-		expect(recipeCards.length).toBe(18);
-		expect(await page.locator('.active-page').innerText()).toBe('2');
+		await expect(page.getByTestId('recipe-card')).toHaveCount(9)
+		await expect(page.locator('.active-page')).toHaveText('2')
 	});
 
 	test('should reset to page 1 when changing results per page', async ({ page }) => {
@@ -62,36 +57,32 @@ test.describe('recipes page', () => {
         await page.waitForURL("/recetas?pagina=3")
 
 		const perPageSelect = page.getByRole('combobox', { name: 'Resultados por página' }).first();
-		await perPageSelect.selectOption({ label: '27' });
+		await perPageSelect.selectOption({ label: '18' });
 
 		// Check that the page has been reset to 1
-		const activePageButton = page.locator('.active-page');
-		expect(await activePageButton.innerText()).toBe('1');
+		await expect(page.locator('.active-page')).toHaveText('1')
 
 		// Verify URL query parameter is updated to pagina=1 and por_pagina=27
-		await page.waitForURL("/recetas?pagina=1&por_pagina=27")
+		await page.waitForURL("/recetas?pagina=1&por_pagina=18")
 	});
 
 	test('should preserve state when navigating away and returning using browser buttons', async ({ page }) => {
 		await page.goto('/recetas');
 
 		await page.getByRole('button', { name: 'Pág. siguiente' }).click();
 
-		let activePageButton = page.locator('.active-page');
 		await page.waitForURL("/recetas?pagina=2");
-		expect(await activePageButton.innerText()).toBe('2');
+		await expect(page.locator('.active-page')).toHaveText('2')
 
 		await page.getByRole('button', { name: 'Pág. siguiente' }).click();
 
-		activePageButton = page.locator('.active-page');
 		await page.waitForURL("/recetas?pagina=3");
-		expect(await activePageButton.innerText()).toBe('3');
+		await expect(page.locator('.active-page')).toHaveText('3')
 
 		// Go back using browser's back button
 		await page.goBack();
 
-		activePageButton = page.locator('.active-page');
-		expect(await activePageButton.innerText()).toBe('2');
+		await expect(page.locator('.active-page')).toHaveText('2')
 
 		await page.waitForURL("/recetas?pagina=2");
 	});