diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 570e2e6..90b6b70 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,9 +1,9 @@ name: Playwright Tests on: push: - branches: [ main ] + branches: [ main, master ] pull_request: - branches: [ main ] + branches: [ main, master ] jobs: test: timeout-minutes: 60 @@ -12,11 +12,11 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: Install dependencies run: npm ci - name: Install Playwright Browsers - run: npx playwright install chromium --with-deps + run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - uses: actions/upload-artifact@v3 @@ -25,7 +25,3 @@ jobs: name: playwright-report path: playwright-report/ retention-days: 30 - - name: Run unit tests - run: npm run test - - name: Run OAs tests - run: npm run test:oas \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5b5e6c3..c587da2 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,6 @@ node_modules/ /test-results/ /playwright-report/* /playwright/.cache/ +/test-results/ +/playwright-report/ +/playwright/.cache/ diff --git a/README.md b/README.md index 3f26174..7e5ea7a 100644 --- a/README.md +++ b/README.md @@ -1,758 +1,36 @@ -# Analizador de texto +# Analizador de Texto ## Índice -* [1. Consideraciones generales](#1-consideraciones-generales) -* [2. Preámbulo](#2-preámbulo) -* [3. Resumen del proyecto](#3-resumen-del-proyecto) -* [4. Funcionalidades](#4-funcionalidades) -* [5. Boilerplate](#5-boilerplate) -* [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto) -* [7. Pruebas](#7-pruebas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Consideraciones para pedir tu Project Feedback](#9-consideraciones-para-pedir-tu-project-feedback) -* [10. Objetivos de aprendizaje](#10-objetivos-de-aprendizaje) -* [11. Funcionalidades opcionales](#11-funcionalidades-opcionales) +- [1. Analizador de Texto](#1-analizador-de-Texto) +- [2. Visualización](#2-Visualización) +- [3. Funcionalidades](#3-funcionalidades) +- [4. Uso](#4-Uso) -*** +## 1. Analizador de Texto -## 1. Consideraciones generales +- Este proyecto es un analizador de texto que te permite obtener informacion sobre el contenido de un texto, como el número de palabras, caracteres, números y la longitud promedio de las palabras. + Es una herramienta útil para analizar de manera rápida el contenido de tu texto. -* Este proyecto lo resolvemos de manera **individual**. -* El rango de tiempo estimado para completar el proyecto es de 1 a 3 Sprints. -* Enfócate en aprender y no solamente en "completar" el proyecto. -* Te sugerimos que no intentes saberlo todo antes de empezar a codear. - No te preocupes demasiado ahora por lo que _todavía_ no entiendas. - Irás aprendiendo. +## 2. Visualización -## 2. Preámbulo +![Analizador de Texto](src/image/Analizadordetexto.png) -![Una lupa sobre texto de libro](https://github.com/Laboratoria/bootcamp/assets/92090/2b45f653-69a5-4282-a65c-d34125c36113) +## 3. Funcionalidades -_Credito: Foto de [ethan](https://unsplash.com/fr/@andallthings?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ -_en [Unsplash](https://unsplash.com/es/fotos/72NpWZJOskU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ +Este analizador de texto te proporciona las siguientes funcionalidades: -Un analizador de texto es una aplicación para extraer información útil de un -texto utilizando diversas técnicas, como el procesamiento del lenguaje -natural (NLP), el aprendizaje automático (ML) y el análisis estadístico. -Estas aplicaciones pueden proporcionar una variedad de métricas que brindan -información básica sobre la longitud y la estructura del texto como por -ejemplo, el conteo de palabras, el conteo de caracteres, el conteo de -oraciones y el conteo de párrafos. Otras métricas incluyen el análisis -de sentimientos, que utiliza técnicas de NLP para determinar el tono -general positivo, negativo o neutral del texto, y el análisis de -legibilidad, que utiliza algoritmos para evaluar la complejidad y la -legibilidad del texto. +1. Contar Palabras: Calcula el número de palabras ingresadas. +2. Contar Caracteres: Determina la cantidad total de caracteres, incluyendo espacios, letras, números y signos de puntuación. +3. Contar Caracteres sin Espacios: Muestra la cantidad de caracteres pero excluye los espacios y signos de puntuación. +4. Longitud Promedio de Palabras: Calcula la longitud promedio de las palabras. +5. Contar Números: Identifica y cuenta todos los números en el texto. +6. Suma de Números: Calcula la suma de todos los números encontrados. -En general, las aplicaciones de análisis de texto brindan información -valiosa y métricas sobre los textos que pueden ayudar a las usuarias a -tomar decisiones informadas y sacar conclusiones significativas. -Mediante el uso de estas herramientas de análisis, las usuarias pueden -obtener una comprensión más profunda de los textos. +- Estas dos últimas funciones no toma encuenta aquellos números que se encuentren dentro de una palabra.\* -## 3. Resumen del proyecto +## 4. Uso -En este proyecto crearás una aplicación web que servirá para que tu usuaria -pueda analizar un texto en el navegador mostrando una serie de indicadores y -métricas específicas sobre caracteres, letras, números, etc. Que hayan sido -enviadas como _input_ por ella. Lo harás utilizando HTML, CSS y JavaScript. - -## 4. Funcionalidades - -El listado de funcionalidades es el siguiente: - -1. La aplicación debe permitir a la usuaria ingresar un texto escribiéndolo -en un cuadro de texto. - -2. La aplicación debe calcular las siguientes métricas y actualizar el -resultado en tiempo real a medida que la usuaria escribe su texto: - - - **Recuento de palabras**: la aplicación debe poder contar el número de - palabras en el texto de entrada y mostrar este recuento a la usuaria - - **Recuento de caracteres**: la aplicación debe poder contar el número de - caracteres en el texto de entrada, incluidos espacios y signos de - puntuación, y mostrar este recuento a la usuaria. - - **Recuento de caracteres excluyendo espacios y signos de puntuación**: - la aplicación debe poder contar el número de caracteres en el texto de - entrada, excluyendo espacios y signos de puntuación, y mostrar este recuento - a la usuaria. - - **Recuento de números**: la aplicación debe contar cúantos números hay en - el texto de entrada y mostrar este recuento a la usuaria. - - **Suma total de números**: la aplicación debe sumar todos los números que - hay en el texto de entrada y mostrar el resultado a la usuaria. - - **Longitud media de las palabras**: la aplicación debe calcular la - longitud media de las palabras en el texto de entrada y mostrársela a la usuaria. - -3. La aplicación debe permitir limpiar el contenido de la caja de texto haciendo -clic en un botón. - -![Text analyzer demo](https://github-production-user-asset-6210df.s3.amazonaws.com/12631491/240650556-988dcd6f-bc46-473b-894c-888a66c9fe2d.gif "Text analyzer demo") - -## 5. Boilerplate - -La lógica del proyecto debe estar implementada completamente en JavaScript. En -este proyecto NO está permitido usar librerías o frameworks, solo JavaScript -puro también conocido como Vanilla JavaScript. - -Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este -repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ -es la estructura básica de un proyecto que sirve como un punto de partida con -archivos y configuración inicial de dependencias y tests. - -El boilerplate que les damos contiene esta estructura: - -```text -./ -├── .babelrc -├── .editorconfig -├── .eslintrc -├── .gitignore -├── README.md -├── package.json -├── src -│ ├── analyzer.js -│ ├── index.html -│ ├── index.js -│ └── style.css -└── test - ├── .eslintrc - └── analyzer.spec.js -``` - -### Descripción de scripts / archivos - -* `README.md`: debes modificarlo para explicar la información necesaria para el - uso de tu aplicación - web, así como una introducción a la aplicación, su funcionalidad y decisiones - de diseño que tomaron. -* `.github/workflows`: esta carpeta contine la configuracion para la ejecution - de Github Actions. No debes modificar esta carpeta ni su contenido. -* `docs/images`: contiene las imagenes de este README. -* `read-only/`: esta carpeta contiene las pruebas de criterios mínimos de - aceptación y end-to-end. No debes modificar esta carpeta ni su contenido. -* [`src/index.html`](./src/index.html): este es el punto de entrada a tu - aplicación. Este archivo debe contener tu HTML. -* [`src/style.css`](./src/style.css): este archivo debe contener las reglas de - estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el - uso de frameworks de CSS (Bootstrap, Materialize, etc). -* [`src/analyzer.js`](./src/analyzer.js): acá debes implementar el objeto - `analyzer`, el cual ya está _exportado_ en el _boilerplate_. Este objeto - (`analyzer`) debe contener seis métodos: - - `analyzer.getWordCount(text)`: esta función debe retornar el recuento de - palabras que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCount(text)`: esta función debe retornar el recuento - de caracteres que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCountExcludingSpaces(text)`: esta función debe retornar - el recuento de caracteres excluyendo espacios y signos de puntuación que se - encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberCount(text)`: esta función debe retornar cúantos números - se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberSum(text)`: esta función debe retornar la suma de todos - los números que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getAverageWordLength(text)`: esta función debe retornar la longitud - media de palabras que se encuentran en el parámetro `text` de tipo `string`. - En este caso usa 2 dígitos decimales. - - Para ejemplo de uso de cada función recomendamos ver el archivo - [`test/analyzer.spec.js`](./test/analyzer.spec.js). - - _Nota: para simplificar las funcionalidades, definiremos las palabras como - un grupos de caracteres separados por espacios. Por ejemplo las palabras del - texto de entrada `¡Si, Tú puedes hacerlo!` son cuatro:_ - - - _`¡Si,`_ - - _`Tú`_ - - _`puedes`_ - - _`hacerlo!`_ - -* [`src/index.js`](./src/index.js): acá debes escuchar eventos del DOM, invocar - los métodos del objeto `analyzer` según sea necesario y actualizar el resultado - en la UI (interfaz de usuaria). -* [`test/analyzer.spec.js`](./test/analyzer.spec.js): este archivo contiene las -pruebas unitarias para los métodos del objeto `analyzer`. - -*** - -#### Deploy - -Hacer que los sitios estén publicados (o _desplegados_) para que usuarias de -la web puedan acceder a él es algo común en proyectos de desarrollo de software. - -En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. - -El comando `npm run deploy` puede ayudarte con esta tarea y también puedes - consultar su [documentación oficial](https://docs.github.com/es/pages). - -## 6. Criterios de aceptación mínimos del proyecto - -A continuación encontrarás los criterios de aceptación mínimos del proyecto -relacionados con cada objetivo de aprendizaje. - -### HTML - -* **Uso de HTML semántico** - - - [ ] La aplicación tiene un encabezado conformado por un - [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - que es padre de un - [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1) - con texto `Analizador de texto`. Para que puedas practicar más, estos - elementos no pueden tener atributos `id`, ni `name`, ni `class`. - - - [ ] La aplicación usa un - [` + + + + +
+

Autora: Tiare Infante :)

+
+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 58ba255..76252d4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,52 @@ import analyzer from './analyzer.js'; -//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` \ No newline at end of file +const input = document.querySelector('[name="user-input"]'); +const wordCountList = document.querySelector('li[data-testid="word-count"]'); +const resetButton = document.getElementById ('reset-button'); +const characterCountList = document.querySelector('li[data-testid="character-count"]'); +const characterWithoutSpaceList = document.querySelector('li[data-testid="character-no-spaces-count"]'); +const wordlengthaverageList = document.querySelector('li[data-testid="word-length-average"]'); +const numberCountList = document.querySelector('li[data-testid="number-count"]'); +const sumNumberList = document.querySelector('li[data-testid="number-sum"]'); + + + +input.addEventListener('keyup', () => { + const userInput = input.value; + if(userInput === ''){ + wordCountList.textContent = 'Palabras: 0'; + characterCountList.textContent = 'Caracteres: 0'; + characterWithoutSpaceList.textContent = 'Caracteres sin Espacios: 0'; + wordlengthaverageList.textContent = 'Longitud promedio palabras: 0'; + numberCountList.textContent = 'Números: 0'; + sumNumberList.textContent = 'Suma números: 0'; + + } else { + const wordCount = analyzer.getWordCount(userInput); + wordCountList.textContent = `Palabras: ${wordCount}`; + const characterCount = analyzer.getCharacterCount(userInput); + characterCountList.textContent = `Caracteres: ${characterCount}`; + const characterWithoutSpaceCount = analyzer.getCharacterCountExcludingSpaces(userInput); + characterWithoutSpaceList.textContent = `Caracteres sin Espacios: ${characterWithoutSpaceCount}`; + const averageLength = analyzer.getAverageWordLength (userInput); + wordlengthaverageList.textContent = `Longitud promedio palabras: ${averageLength}`; + const numberCount = analyzer.getNumberCount(userInput); + numberCountList.textContent = `Números: ${numberCount}`; + const sumaNumber = analyzer.getNumberSum(userInput); + sumNumberList.textContent = `Suma números: ${sumaNumber}`; + + + } + +}); + +resetButton.addEventListener ('click', () => { + input.value = ''; + wordCountList.textContent = 'Palabras: 0'; + characterCountList.textContent = 'Caracteres: 0'; + characterWithoutSpaceList.textContent = 'Caracteres sin Espacios: 0'; + wordlengthaverageList.textContent = 'Longitud promedio palabras: 0'; + numberCountList.textContent = 'Números: 0'; + sumNumberList.textContent = 'Suma números: 0'; + +}); diff --git a/src/style.css b/src/style.css index e69de29..7c6422c 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,100 @@ +*{ + box-sizing: border-box; +} + +body { + text-align: center; + background-color: #a68069; + font-family: sans-serif; + +} + +textarea[name="user-input"] { + background-color: #d8af97; + border-radius: 5px; + height: 200px; + padding: 1rem; + font-size: large; + width: 500px; +} +header { + color: black; + + } + +.mi-ul { + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 50%; + align-self: center; + margin-left: 300px; + +} +li { + margin: 3px; +} +.mi-li1 { + width: 200px; + height: 30px; + background-color:#d8af97 ; + border-radius: 5px; + color:black ; + font-size: small; + align-items: center; + justify-content: center; + display: flex; + flex-wrap: wrap; + text-align: center; + + +} +.mi-li2 { + width: 200px; + height: 30px; + background-color:#ecd6c0 ; + border-radius: 5px; + color:black ; + font-size: small; + align-items: center; + justify-content: center; + display: flex; + flex-wrap: wrap; + text-align: center; +} + +.mi-li3 { + width: 200px; + height: 30px; + background-color:#ffb48a ; + border-radius: 5px; + color:black ; + font-size: small; + align-items: center; + justify-content: center; + display: flex; + flex-wrap: wrap; + text-align: center; +} + + + +#reset-button { + width: 200px; + height: 60px; + background-color:#d38659; + border-radius: 10px; + font-size: 18px; + font-weight: bold; + cursor: pointer; +} + +#reset-button:hover{ + background-color: #c72c01; +} + +footer{ + text-align: right; +} + diff --git a/tests-examples/demo-todo-app.spec.js b/tests-examples/demo-todo-app.spec.js new file mode 100644 index 0000000..e2eb87c --- /dev/null +++ b/tests-examples/demo-todo-app.spec.js @@ -0,0 +1,449 @@ +// @ts-check +const { test, expect } = require('@playwright/test'); + +test.beforeEach(async ({ page }) => { + await page.goto('https://demo.playwright.dev/todomvc'); +}); + +const TODO_ITEMS = [ + 'buy some cheese', + 'feed the cat', + 'book a doctors appointment' +]; + +test.describe('New Todo', () => { + test('should allow me to add todo items', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + // Create 1st todo. + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press('Enter'); + + // Make sure the list only has one todo item. + await expect(page.getByTestId('todo-title')).toHaveText([ + TODO_ITEMS[0] + ]); + + // Create 2nd todo. + await newTodo.fill(TODO_ITEMS[1]); + await newTodo.press('Enter'); + + // Make sure the list now has two todo items. + await expect(page.getByTestId('todo-title')).toHaveText([ + TODO_ITEMS[0], + TODO_ITEMS[1] + ]); + + await checkNumberOfTodosInLocalStorage(page, 2); + }); + + test('should clear text input field when an item is added', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + // Create one todo item. + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press('Enter'); + + // Check that input is empty. + await expect(newTodo).toBeEmpty(); + await checkNumberOfTodosInLocalStorage(page, 1); + }); + + test('should append new items to the bottom of the list', async ({ page }) => { + // Create 3 items. + await createDefaultTodos(page); + + // create a todo count locator + const todoCount = page.getByTestId('todo-count') + + // Check test using different methods. + await expect(page.getByText('3 items left')).toBeVisible(); + await expect(todoCount).toHaveText('3 items left'); + await expect(todoCount).toContainText('3'); + await expect(todoCount).toHaveText(/3/); + + // Check all items in one call. + await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS); + await checkNumberOfTodosInLocalStorage(page, 3); + }); +}); + +test.describe('Mark all as completed', () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test.afterEach(async ({ page }) => { + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test('should allow me to mark all items as completed', async ({ page }) => { + // Complete all todos. + await page.getByLabel('Mark all as complete').check(); + + // Ensure all todos have 'completed' class. + await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + }); + + test('should allow me to clear the complete state of all items', async ({ page }) => { + const toggleAll = page.getByLabel('Mark all as complete'); + // Check and then immediately uncheck. + await toggleAll.check(); + await toggleAll.uncheck(); + + // Should be no completed classes. + await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']); + }); + + test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => { + const toggleAll = page.getByLabel('Mark all as complete'); + await toggleAll.check(); + await expect(toggleAll).toBeChecked(); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + + // Uncheck first todo. + const firstTodo = page.getByTestId('todo-item').nth(0); + await firstTodo.getByRole('checkbox').uncheck(); + + // Reuse toggleAll locator and make sure its not checked. + await expect(toggleAll).not.toBeChecked(); + + await firstTodo.getByRole('checkbox').check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + + // Assert the toggle all is checked again. + await expect(toggleAll).toBeChecked(); + }); +}); + +test.describe('Item', () => { + + test('should allow me to mark items as complete', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + // Create two items. + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press('Enter'); + } + + // Check first item. + const firstTodo = page.getByTestId('todo-item').nth(0); + await firstTodo.getByRole('checkbox').check(); + await expect(firstTodo).toHaveClass('completed'); + + // Check second item. + const secondTodo = page.getByTestId('todo-item').nth(1); + await expect(secondTodo).not.toHaveClass('completed'); + await secondTodo.getByRole('checkbox').check(); + + // Assert completed class. + await expect(firstTodo).toHaveClass('completed'); + await expect(secondTodo).toHaveClass('completed'); + }); + + test('should allow me to un-mark items as complete', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + // Create two items. + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press('Enter'); + } + + const firstTodo = page.getByTestId('todo-item').nth(0); + const secondTodo = page.getByTestId('todo-item').nth(1); + const firstTodoCheckbox = firstTodo.getByRole('checkbox'); + + await firstTodoCheckbox.check(); + await expect(firstTodo).toHaveClass('completed'); + await expect(secondTodo).not.toHaveClass('completed'); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + await firstTodoCheckbox.uncheck(); + await expect(firstTodo).not.toHaveClass('completed'); + await expect(secondTodo).not.toHaveClass('completed'); + await checkNumberOfCompletedTodosInLocalStorage(page, 0); + }); + + test('should allow me to edit an item', async ({ page }) => { + await createDefaultTodos(page); + + const todoItems = page.getByTestId('todo-item'); + const secondTodo = todoItems.nth(1); + await secondTodo.dblclick(); + await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]); + await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); + await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter'); + + // Explicitly assert the new text value. + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + 'buy some sausages', + TODO_ITEMS[2] + ]); + await checkTodosInLocalStorage(page, 'buy some sausages'); + }); +}); + +test.describe('Editing', () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test('should hide other controls when editing', async ({ page }) => { + const todoItem = page.getByTestId('todo-item').nth(1); + await todoItem.dblclick(); + await expect(todoItem.getByRole('checkbox')).not.toBeVisible(); + await expect(todoItem.locator('label', { + hasText: TODO_ITEMS[1], + })).not.toBeVisible(); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test('should save edits on blur', async ({ page }) => { + const todoItems = page.getByTestId('todo-item'); + await todoItems.nth(1).dblclick(); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur'); + + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + 'buy some sausages', + TODO_ITEMS[2], + ]); + await checkTodosInLocalStorage(page, 'buy some sausages'); + }); + + test('should trim entered text', async ({ page }) => { + const todoItems = page.getByTestId('todo-item'); + await todoItems.nth(1).dblclick(); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages '); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); + + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + 'buy some sausages', + TODO_ITEMS[2], + ]); + await checkTodosInLocalStorage(page, 'buy some sausages'); + }); + + test('should remove the item if an empty text string was entered', async ({ page }) => { + const todoItems = page.getByTestId('todo-item'); + await todoItems.nth(1).dblclick(); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(''); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); + + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + TODO_ITEMS[2], + ]); + }); + + test('should cancel edits on escape', async ({ page }) => { + const todoItems = page.getByTestId('todo-item'); + await todoItems.nth(1).dblclick(); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); + await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape'); + await expect(todoItems).toHaveText(TODO_ITEMS); + }); +}); + +test.describe('Counter', () => { + test('should display the current number of todo items', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + // create a todo count locator + const todoCount = page.getByTestId('todo-count') + + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press('Enter'); + await expect(todoCount).toContainText('1'); + + await newTodo.fill(TODO_ITEMS[1]); + await newTodo.press('Enter'); + await expect(todoCount).toContainText('2'); + + await checkNumberOfTodosInLocalStorage(page, 2); + }); +}); + +test.describe('Clear completed button', () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + }); + + test('should display the correct text', async ({ page }) => { + await page.locator('.todo-list li .toggle').first().check(); + await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible(); + }); + + test('should remove completed items when clicked', async ({ page }) => { + const todoItems = page.getByTestId('todo-item'); + await todoItems.nth(1).getByRole('checkbox').check(); + await page.getByRole('button', { name: 'Clear completed' }).click(); + await expect(todoItems).toHaveCount(2); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); + }); + + test('should be hidden when there are no items that are completed', async ({ page }) => { + await page.locator('.todo-list li .toggle').first().check(); + await page.getByRole('button', { name: 'Clear completed' }).click(); + await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden(); + }); +}); + +test.describe('Persistence', () => { + test('should persist its data', async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press('Enter'); + } + + const todoItems = page.getByTestId('todo-item'); + const firstTodoCheck = todoItems.nth(0).getByRole('checkbox'); + await firstTodoCheck.check(); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); + await expect(firstTodoCheck).toBeChecked(); + await expect(todoItems).toHaveClass(['completed', '']); + + // Ensure there is 1 completed item. + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + // Now reload. + await page.reload(); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); + await expect(firstTodoCheck).toBeChecked(); + await expect(todoItems).toHaveClass(['completed', '']); + }); +}); + +test.describe('Routing', () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + // make sure the app had a chance to save updated todos in storage + // before navigating to a new view, otherwise the items can get lost :( + // in some frameworks like Durandal + await checkTodosInLocalStorage(page, TODO_ITEMS[0]); + }); + + test('should allow me to display active items', async ({ page }) => { + const todoItem = page.getByTestId('todo-item'); + await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole('link', { name: 'Active' }).click(); + await expect(todoItem).toHaveCount(2); + await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); + }); + + test('should respect the back button', async ({ page }) => { + const todoItem = page.getByTestId('todo-item'); + await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + await test.step('Showing all items', async () => { + await page.getByRole('link', { name: 'All' }).click(); + await expect(todoItem).toHaveCount(3); + }); + + await test.step('Showing active items', async () => { + await page.getByRole('link', { name: 'Active' }).click(); + }); + + await test.step('Showing completed items', async () => { + await page.getByRole('link', { name: 'Completed' }).click(); + }); + + await expect(todoItem).toHaveCount(1); + await page.goBack(); + await expect(todoItem).toHaveCount(2); + await page.goBack(); + await expect(todoItem).toHaveCount(3); + }); + + test('should allow me to display completed items', async ({ page }) => { + await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole('link', { name: 'Completed' }).click(); + await expect(page.getByTestId('todo-item')).toHaveCount(1); + }); + + test('should allow me to display all items', async ({ page }) => { + await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole('link', { name: 'Active' }).click(); + await page.getByRole('link', { name: 'Completed' }).click(); + await page.getByRole('link', { name: 'All' }).click(); + await expect(page.getByTestId('todo-item')).toHaveCount(3); + }); + + test('should highlight the currently applied filter', async ({ page }) => { + await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected'); + + //create locators for active and completed links + const activeLink = page.getByRole('link', { name: 'Active' }); + const completedLink = page.getByRole('link', { name: 'Completed' }); + await activeLink.click(); + + // Page change - active items. + await expect(activeLink).toHaveClass('selected'); + await completedLink.click(); + + // Page change - completed items. + await expect(completedLink).toHaveClass('selected'); + }); +}); + +async function createDefaultTodos(page) { + // create a new todo locator + const newTodo = page.getByPlaceholder('What needs to be done?'); + + for (const item of TODO_ITEMS) { + await newTodo.fill(item); + await newTodo.press('Enter'); + } +} + +/** + * @param {import('@playwright/test').Page} page + * @param {number} expected + */ + async function checkNumberOfTodosInLocalStorage(page, expected) { + return await page.waitForFunction(e => { + return JSON.parse(localStorage['react-todos']).length === e; + }, expected); +} + +/** + * @param {import('@playwright/test').Page} page + * @param {number} expected + */ + async function checkNumberOfCompletedTodosInLocalStorage(page, expected) { + return await page.waitForFunction(e => { + return JSON.parse(localStorage['react-todos']).filter(i => i.completed).length === e; + }, expected); +} + +/** + * @param {import('@playwright/test').Page} page + * @param {string} title + */ +async function checkTodosInLocalStorage(page, title) { + return await page.waitForFunction(t => { + return JSON.parse(localStorage['react-todos']).map(i => i.title).includes(t); + }, title); +} diff --git a/tests/example.spec.js b/tests/example.spec.js new file mode 100644 index 0000000..40eddb8 --- /dev/null +++ b/tests/example.spec.js @@ -0,0 +1,19 @@ +// @ts-check +const { test, expect } = require('@playwright/test'); + +test('has title', async ({ page }) => { + await page.goto('https://playwright.dev/'); + + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/Playwright/); +}); + +test('get started link', async ({ page }) => { + await page.goto('https://playwright.dev/'); + + // Click the get started link. + await page.getByRole('link', { name: 'Get started' }).click(); + + // Expects page to have a heading with the name of Installation. + await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); +});