Automated tests

* update

* use only one job

* change workflow name

* Add footer search test

* Add test for clicking recipe in homepage going to recipe's page

* Add search recipes through home search form test

* add save recipe card test

.github/workflows/pull_request.yml

@@ -1,4 +1,4 @@
-name: Node.js CI
+name: Build and tests
 
 on:
   pull_request:

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+test-results/

src/app.scss

@@ -54,6 +54,7 @@ footer {
 }
 
 input[type='text'],
+input[type='search']
 input[type='number'],
 textarea {
 	appearance: none;

src/lib/components/Footer.svelte

@@ -15,7 +15,7 @@
 				<Icon name="search" height="28" width="28" />
 			</div>
 			<form on:submit={() => (window.location.href = `/recetas?nombre=${name}`)}>
-				<input bind:value={name} placeholder="Buscar" type="text" />
+				<input bind:value={name} placeholder="Buscar" type="search" />
 			</form>
 		</div>
 	</div>

src/lib/components/RecipesSearchForm.svelte

@@ -34,7 +34,7 @@
 	});
 </script>
 
-<form>
+<form aria-label="Recipe search form">
 	<div>
 		<TextInput
 			bind:inputValue={$recipes.name}
@@ -112,7 +112,8 @@
 				loading={loading && $navigating?.to?.url.pathname == '/recetas'}
 				onClick={() => {
 					loading = true;
-				}}>Buscar</Button
+				}}
+				type="submit">Buscar</Button
 			>
 		</a>
 	{/if}

src/lib/scripts/urls.ts

@@ -71,16 +71,16 @@ function buildRecipesBrowserUrl({
 	}
 
 	if (onlyVegetarian) {
-		browserUrl += `soloVegetarianas=true`;
+		browserUrl += `soloVegetarianas=true&`;
 	}
 
 	if (ids && ids.length > 0) {
 		for (let i = 0; i < ids.length; i++) {
-			browserUrl += `&ids=${ids[i]}`;
+			browserUrl += `ids=${ids[i]}&`;
 		}
 	}
 
-	browserUrl += `&pagina=${page ?? '1'}&limit=${resultsPerPage ?? '9'}`;
+	browserUrl += `pagina=${page ?? '1'}&limit=${resultsPerPage ?? '9'}`;
 
 	return browserUrl;
 }

tests/homepage.test.ts

@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('homepage', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/');
+	});
+
+	test('can see list of recipes in homepage', async ({ page }) => {
+		const recipeCardsCount = await page.getByTestId('recipe-card').count();
+
+		expect(recipeCardsCount).toEqual(4);
+	});
+
+	test('can search for recipes in the footer', async ({ page }) => {
+		const footerSearchBox = page.getByRole('searchbox', { name: 'Buscar' });
+		await footerSearchBox.fill('pasta');
+		await page.keyboard.press('Enter');
+		await page.waitForURL('**/recetas?nombre=pasta');
+
+		const recipeCardsCount = await page.getByRole('heading', { name: 'pasta' }).count();
+
+		expect(recipeCardsCount).toBeGreaterThan(0);
+	});
+
+	test('can search for recipes in the form', async ({ page }) => {
+		const form = page.getByRole('form', { name: 'Recipe search form' });
+
+		const nameTextBox = form.getByRole('textbox', { name: 'Nombre de la receta:' });
+		await nameTextBox.fill('pasta');
+
+		const ingredientsTextBox = form.getByRole('textbox', {
+			name: 'Ingredientes (presiona enter luego de cada uno):'
+		});
+		await ingredientsTextBox.fill('langostino');
+		await page.keyboard.press('Enter');
+
+		const mediumDiffCheckbox = form.getByRole('checkbox', { name: 'Intermedias' });
+		await mediumDiffCheckbox.check();
+
+		const vegetarianCheckbox = form.getByRole('checkbox', { name: 'Solo vegetarianas' });
+		await vegetarianCheckbox.check();
+
+		await page.keyboard.press('Enter');
+		await page.waitForURL('**/recetas?nombre=pasta&dificultad=Medium&ingredientes=langostino&soloVegetarianas=true&pagina=1&limit=9');
+
+		const recipeCardsCount = await page.getByRole('heading', { name: 'pasta' }).count();
+
+		expect(recipeCardsCount).toBeGreaterThan(0);
+	});
+
+	test("clicking on recipe card takes user to recipe's page", async ({ page }) => {
+		const recipeCard = page.getByTestId('recipe-card').first();
+		const recipeName = await recipeCard.getByRole('heading').innerText();
+
+		await recipeCard.click();
+		await page.waitForURL('**/recetas/**');
+
+		const recipeHeading = await page.getByRole('heading', { name: recipeName }).innerText();
+		expect(recipeHeading).toEqual(recipeName);
+	});
+});

tests/recipeCard.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('recipe card', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/');
+	});
+
+	test('can save recipe to local storage', async ({ page }) => {
+		const recipeCards = await page.getByTestId('recipe-card').all();
+		const saveRecipeButton = recipeCards[0].getByRole('button', { name: 'Guardar receta' });
+        await saveRecipeButton.click();
+
+		const recipesSaved = await page.evaluate(() => window.localStorage.getItem('recipesSaved'));
+		const recipesSavedParsed = recipesSaved ? JSON.parse(recipesSaved) : [];
+
+		expect(recipesSavedParsed).toHaveLength(1);
+	});
+});