From c8e93f57585294b586edbd442dedf559ce5c5806 Mon Sep 17 00:00:00 2001 From: Luz Ojeda Date: Mon, 3 Jun 2024 16:32:53 -0300 Subject: [PATCH] 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 | 2 +- .gitignore | 1 + src/app.scss | 1 + src/lib/components/Footer.svelte | 2 +- src/lib/components/RecipesSearchForm.svelte | 5 +- src/lib/scripts/urls.ts | 6 +- tests/homepage.test.ts | 61 +++++++++++++++++++++ tests/homepageTests.test.ts | 9 --- tests/recipeCard.test.ts | 18 ++++++ 9 files changed, 89 insertions(+), 16 deletions(-) create mode 100644 tests/homepage.test.ts delete mode 100644 tests/homepageTests.test.ts create mode 100644 tests/recipeCard.test.ts diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml index 8a2483e..9ae9400 100644 --- a/.github/workflows/pull_request.yml +++ b/.github/workflows/pull_request.yml @@ -1,4 +1,4 @@ -name: Node.js CI +name: Build and tests on: pull_request: diff --git a/.gitignore b/.gitignore index 6635cf5..8625b3e 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* +test-results/ \ No newline at end of file diff --git a/src/app.scss b/src/app.scss index 31a089e..1706081 100644 --- a/src/app.scss +++ b/src/app.scss @@ -54,6 +54,7 @@ footer { } input[type='text'], +input[type='search'] input[type='number'], textarea { appearance: none; diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index aa7ab71..33ac89e 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -15,7 +15,7 @@
(window.location.href = `/recetas?nombre=${name}`)}> - +
diff --git a/src/lib/components/RecipesSearchForm.svelte b/src/lib/components/RecipesSearchForm.svelte index 54644f3..982054f 100644 --- a/src/lib/components/RecipesSearchForm.svelte +++ b/src/lib/components/RecipesSearchForm.svelte @@ -34,7 +34,7 @@ }); -
+
{ loading = true; - }}>BuscarBuscar {/if} diff --git a/src/lib/scripts/urls.ts b/src/lib/scripts/urls.ts index 8a65463..4bf91ff 100644 --- a/src/lib/scripts/urls.ts +++ b/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; } diff --git a/tests/homepage.test.ts b/tests/homepage.test.ts new file mode 100644 index 0000000..369b180 --- /dev/null +++ b/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); + }); +}); diff --git a/tests/homepageTests.test.ts b/tests/homepageTests.test.ts deleted file mode 100644 index 2a7e399..0000000 --- a/tests/homepageTests.test.ts +++ /dev/null @@ -1,9 +0,0 @@ -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); -}); diff --git a/tests/recipeCard.test.ts b/tests/recipeCard.test.ts new file mode 100644 index 0000000..78fcf6e --- /dev/null +++ b/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); + }); +});