Use better placeholder images and automated tests along with pull_req…

…uest.yml

* Convert PrimaryButton to a more generic Button component with primary, sec and tert classes

* Use better placeholder images

* Add homepage to package.json

* Add see list of recipes homepage test

* Rename node.js.yml to pull_request.yml

* Use pnpm in pull_request.yml

* Update pull_request.yml using pnpm official docs as guide

* use only node 20

* Add playwright install to download browsers

* update

* use only one job

* reference api key from secrets

.github/workflows/pull_request.yml

@@ -0,0 +1,32 @@
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: ['master']
+
+jobs:
+  build_and_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm exec playwright install
+      - run: pnpm test
+        env:
+          API_URL: ${{ secrets.API_URL }}
+          API_KEY: ${{ secrets.API_KEY }}

package.json

@@ -2,6 +2,7 @@
 	"name": "cook-web",
 	"version": "1.1.0",
 	"private": true,
+	"homepage": "https://github.com/luz-ojeda/cook-web",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

src/lib/components/PrimaryButton.svelte → src/lib/components/Button.svelte

@@ -5,16 +5,22 @@
 	export let disabled = false;
 	export let loading = false; // Use local state since we not always want it to sync with a global/different one
 	export let onClick: EventHandler<MouseEvent | SubmitEvent> | undefined = undefined;
-	export let width = 'auto';
+	export let size: 'small' | 'large' = 'large';
 	export let type: 'button' | 'reset' | 'submit' | null | undefined = 'button';
+	export let buttonType: 'primary' | 'secondary' | 'tertiary' = 'primary';
 </script>
 
 <button
+	class="
+		{buttonType === 'primary'
+		? 'primary'
+		: buttonType === 'secondary'
+			? 'secondary'
+			: 'tertiary'} {size === 'small' ? 'small' : 'large'}"
 	disabled={disabled || loading}
 	on:click={onClick}
 	on:submit={type === 'submit' ? onClick : undefined}
 	{type}
-	style="width: {width}"
 >
 	{#if loading}
 		<CircularLoading --background="#a19887" --circle-width="30px" />
@@ -29,24 +35,11 @@
 
 	button {
 		align-items: center;
-		background-color: $primaryColor;
 		border: 0;
 		border-radius: 7px;
-		box-shadow:
-			inset 0 3px 0 $lightestPrimaryColor,
-			$shadow;
-		color: $grey200;
 		display: flex;
-		font-size: 20px;
 		font-weight: bold;
-		height: 48px;
 		justify-content: center;
-		padding: 8px 24px;
-
-		&:hover {
-			background-color: $lightPrimaryColor;
-			transition: background-color 0.3s;
-		}
 
 		&:disabled {
 			box-shadow:
@@ -59,4 +52,39 @@
 			box-shadow: $smallestShadow;
 		}
 	}
+
+	.small {
+		font-size: 16px;
+		height: 32px;
+		padding: 4px 12px;
+	}
+
+	.large {
+		font-size: 20px;
+		height: 48px;
+		padding: 8px 24px;
+		width: 100%;
+	}
+
+	.primary {
+		background-color: $primaryColor;
+		box-shadow:
+			inset 0 3px 0 $lightestPrimaryColor,
+			$shadow;
+		color: $grey200;
+
+		&:hover {
+			background-color: $lightPrimaryColor;
+			transition: background-color 0.3s;
+		}
+	}
+
+	.tertiary {
+		background-color: transparent;
+		color: $primaryColor;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 </style>

src/lib/components/RecipeCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { SaveRecipeButton, slugify } from '$lib';
-	import placeholder from '$lib/assets/recipe_image_placeholder.png';
+	import placeholder from '$lib/assets/recipe_image_placeholder.svg';
 
 	export let recipeId: string;
 	export let recipeImage: string;
@@ -10,19 +10,18 @@
 	$: slugifiedRecipeTitle = slugify(recipeTitle);
 </script>
 
-<div class="container flex-column">
+<div class="container flex-column" data-testid="recipe-card">
 	<a class="non-text-anchor-element" href={`/recetas/${slugifiedRecipeTitle}`}>
 		<img
 			alt={`Photo of the recipe ${recipeTitle}`}
-			class="rounded-img recipe-image"
+			class="rounded-img recipe-image {recipeImage ? 'object-fit-cover' : ''}"
 			crossorigin="anonymous"
 			loading="lazy"
 			src={recipeImage ? recipeImage : placeholder}
 		/>
 	</a>
 	<div class="title-container">
 		<a class="non-text-anchor-element" href={`/recetas/${slugifiedRecipeTitle}`}>
-
 			<h2>{recipeTitle}</h2>
 		</a>
 		<SaveRecipeButton {recipeId} --iconWidth="32px" --mobileIconWidth="48px" />
@@ -50,7 +49,6 @@
 		margin-bottom: 16px;
 		max-height: 240px;
 		display: inline-block;
-		object-fit: cover;
 		width: 100%;
 
 		@media (max-width: $mobileBreakpoint) {

src/lib/components/RecipeForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { applyAction, enhance } from '$app/forms';
 	import { ImageUploadInput, slugify } from '$lib';
-	import PrimaryButton from '$lib/components/PrimaryButton.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import type { Recipe } from '$lib/types/Recipe';
 	import type { RecipeFormDataElems } from '$lib/types/RecipeFormData';
 	import type { ActionData as CreateRecipeActionData } from '../../routes/admin/crear-receta/$types';
@@ -215,7 +215,7 @@
 			/>
 		</label>
 
-		<PrimaryButton disabled={invalidFile} {loading} type="submit">{submitButtonText}</PrimaryButton>
+		<Button disabled={invalidFile} {loading} type="submit">{submitButtonText}</Button>
 	</form>
 	{#if form?.success}
 		<p class="success">

src/lib/components/RecipesSearchForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page, navigating } from '$app/stores';
-	import { ChipTextInput, PrimaryButton, TextInput } from '$lib';
+	import { ChipTextInput, Button, TextInput } from '$lib';
 	import { buildRecipesBrowserUrl } from '$lib/scripts/urls';
 	import { recipes } from '../../stores/recipes';
 	import { burgerMenuStore } from '../../stores/burgerMenu';
@@ -95,9 +95,7 @@
 	<label for="vegetarian">Solo vegetarianas</label>
 
 	{#if $page.url.pathname !== '/'}
-		<PrimaryButton {loading} onClick={onButtonClick} type="submit" width="100%">
-			Buscar
-		</PrimaryButton>
+		<Button {loading} onClick={onButtonClick} type="submit">Buscar</Button>
 	{:else}
 		<a
 			class="non-text-anchor-element"
@@ -109,13 +107,12 @@
 			})}
 			style={Boolean($navigating) ? 'pointer-events: none' : ''}
 		>
-			<PrimaryButton
+			<Button
 				disabled={$recipes.loading || Boolean($navigating)}
 				loading={loading && $navigating?.to?.url.pathname == '/recetas'}
 				onClick={() => {
 					loading = true;
-				}}
-				width="100%">Buscar</PrimaryButton
+				}}>Buscar</Button
 			>
 		</a>
 	{/if}

src/lib/index.ts

@@ -1,5 +1,6 @@
 // Components
 import BurgerMenu from './components/BurgerMenu.svelte';
+import Button from './components/Button.svelte';
 import ChipTextInput from './components/ChipTextInput.svelte';
 import CircularLoading from './components/CircularLoading.svelte';
 import CopyRecipeButton from './components/CopyRecipeButton.svelte';
@@ -10,7 +11,6 @@ import Icon from './components/Icon.svelte';
 import ImageUploadInput from './components/ImageUploadInput.svelte';
 import Navbar from './components/Navbar.svelte';
 import Pagination from './components/Pagination.svelte';
-import PrimaryButton from './components/PrimaryButton.svelte';
 import RecipeCard from './components/RecipeCard.svelte';
 import RecipeForm from './components/RecipeForm.svelte';
 import RecipesSearchForm from './components/RecipesSearchForm.svelte';
@@ -19,6 +19,7 @@ import TextInput from './components/TextInput.svelte';
 
 export {
 	BurgerMenu,
+	Button,
 	ChipTextInput,
 	CircularLoading,
 	CopyRecipeButton,
@@ -29,7 +30,6 @@ export {
 	ImageUploadInput,
 	Navbar,
 	Pagination,
-	PrimaryButton,
 	RecipeCard,
 	RecipeForm,
 	RecipesSearchForm,

src/routes/recetas/[name]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Recipe } from '$lib/types/Recipe';
-	import placeholder from '$lib/assets/recipe_image_placeholder.png';
+	import placeholder from '$lib/assets/recipe_image_placeholder.svg';
 	import {
 		CopyRecipeButton,
 		DownloadRecipeButton,
@@ -40,7 +40,7 @@
 	<div class="recipe-first-content">
 		<img
 			alt={`Photo of the recipe ${data.name}`}
-			class="image-container rounded-img recipe-image"
+			class="image-container rounded-img recipe-image {data.pictures[0] ? 'object-fit-cover' : ''}"
 			crossorigin="anonymous"
 			src={data.pictures[0] ? data.pictures[0] : placeholder}
 		/>
@@ -183,7 +183,6 @@
 	.recipe-image {
 		max-height: 374px;
 		margin-right: 20px;
-		object-fit: cover;
 		width: 100%;
 
 		@media (max-width: $tabletBreakpoint) {

src/sass/utilities.scss

@@ -108,3 +108,7 @@
 	color: $grey900;
 	text-decoration: none;
 }
+
+.object-fit-cover {
+	object-fit: cover;
+}

tests/homepageTests.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+
+test('user can see list of recipes in homepage', async ({ page }) => {
+	await page.goto('/');
+
+	const recipeCardsCount = await page.getByTestId('recipe-card').count();
+
+	expect(recipeCardsCount).toEqual(4);
+});