Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Vista de detalle producto

Offen
#6 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
frontend, testing-qa

Rechercherichtung

Beginne damit, die Produktansicht im Frontend, ihre fixtures, vorhandene end-to-end-Tests und den für Produkte verwendeten Vuex-Store zu finden. Verfolge anschließend die Navigation zu den Produktdetails und den Ablauf zum Laden der Komponenten und prüfe dann die referenzierten Abnahmeszenarien. Als erledigt gilt die Aufgabe, wenn die Detailroute und -ansicht funktionieren, fehlende Store-Daten auf die Produktseite weiterleiten, die fixtures Preise enthalten und die angeforderten Tests diese Verhaltensweisen abdecken.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

enhancement get certificate required

Criterios de Aceptación

Característica: Detalle de producto
  Existe una página de detalle de producto donde se puede ver la información. Para acceder a esta página debemos hacer click sobre un botón 

  Escenario: Vista detalle producto
    Dado el usuario autenticado en la página principal
    Cuando el usuario hace click sobre el botón "ver detalle" de un producto
    Luego el usuario va hacia la página de detalle del producto seleccionado
    Y se muestra la información completa del producto
    
 Escenario: Recarga de la vista de producto
    Dado el usuario autenticado en la página de detalle de un producto
    Cuando el usuario recarga la página de detalle de producto
    Luego el usuario es re dirigido a la página de productos

Requerimientos técnicos


  • Crear una prueba e2e que compruebe que al hacer click en el botón detalle de producto el usuario es dirigido a la página correspondiente

Tip: puedes utilizar un atributo data-cy para almacenar el id del producto y así correlacionarlo de mejor manera con los fixtures y hacer una aserción más efectiva. No olvides modificar los fixtures para incluir el precio en cada item.


  • Modificar el código Frontend para mostrar el boton de detalle de producto y luego crear una nueva vista con su propia ruta de acceso como muestran las siguientes imágenes:



  • Crear una lógica que valide que si al cargarse el componente de detalle de producto, los productos guardados en el store Vuex están. En caso contrario redirigir a la página de productos.

  • Crear una prueba de Frontend para el componente de detalle de producto que valide la lógica anterior, es decir, que al cargarse el componente se redirige hacie la vista de productos en función de si existe o no la lista de productos en el store.

Notas
Se espera que al menos 1 de los criterios de aceptación esté automatizado

Vorherrschende Sprache
JavaScript
Sterne
0
Forks
6
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus booleancl/G01-2021-fullstack-javascript-final

Alle Issues in booleancl/G01-2021-fullstack-javascript-final

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.