refactor(Brand detail): new BrandCard component (#712)

openfoodfacts · Aug 17, 2024 · dc4e0c8 · dc4e0c8
1 parent 3beedda
commit dc4e0c8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/src/components/BrandCard.vue b/src/components/BrandCard.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-card :title="brand" prepend-icon="mdi-factory" data-name="brand-card">
+    <v-card-text>
+      <v-chip label size="small" density="comfortable" class="mr-1">
+        <v-icon start icon="mdi-food-outline" />
+        <span id="product-count">{{ $t('BrandDetail.BrandProductTotal', { count: productCount }) }}</span>
+      </v-chip>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    brand: {
+      type: String,
+      default: null
+    },
+    productCount: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
@@ -1,17 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12" sm="6">
-      <v-card
-        :title="brand"
-        prepend-icon="mdi-factory"
-      >
-        <v-card-text>
-          <v-chip label size="small" density="comfortable" class="mr-1">
-            <v-icon start icon="mdi-food-outline" />
-            {{ $t('BrandDetail.BrandProductTotal', { count: brandProductTotal }) }}
-          </v-chip>
-        </v-card-text>
-      </v-card>
+      <BrandCard :brand="brand" :productCount="brandProductTotal" />
     </v-col>
   </v-row>
 
@@ -57,6 +47,7 @@ import api from '../services/api'
 
 export default {
   components: {
+    BrandCard: defineAsyncComponent(() => import('../components/BrandCard.vue')),
     FilterMenu: defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     OrderMenu: defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     ProductCard: defineAsyncComponent(() => import('../components/ProductCard.vue')),

diff --git a/tests/e2e/spec.cy.js b/tests/e2e/spec.cy.js
@@ -2,6 +2,7 @@ describe('Basic tests', () => {
   beforeEach(() => {
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?app_name=Open+Prices+Web+App&page=1&size=10&order_by=-price_count', { fixture: 'products.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?app_name=Open+Prices+Web+App&page=1&size=10&code=3011360030498', { fixture: 'products_3011360030498.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?app_name=Open+Prices+Web+App&page=1&size=10&brands__like=Snickers&order_by=-price_count', { body: {"items":[],"total":0,"page":1,"size":10,"pages":0} })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/3011360030498?app_name=Open+Prices+Web+App', { fixture: 'product_3011360030498.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/0000000000000?app_name=Open+Prices+Web+App', { statusCode: 404, body: { "detail": "Product with code 35647000112700 not found" }})
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?app_name=Open+Prices+Web+App&page=1&size=1&order_by=-created*', { fixture: 'prices.json' })
@@ -21,6 +22,7 @@ describe('Basic tests', () => {
   it('displays the latest prices', () => {
     cy.visit('/prices')
     cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.contains('Latest prices')
     cy.get('[data-name="price-card"]').should('have.length', 10)
     cy.contains('3564700428023')  // unknown product
     cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
@@ -30,6 +32,7 @@ describe('Basic tests', () => {
   it('displays the top products', () => {
     cy.visit('/products')
     cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.contains('Top products')
     cy.get('[data-name="product-card"]').should('have.length', 10)
     cy.contains('3973467869701')  // unknown product
     cy.contains('3250391696949')  // unknown product
@@ -41,6 +44,7 @@ describe('Basic tests', () => {
     cy.contains('Welcome to Open Prices!').should('not.exist')
     cy.get('#product-title').contains('Mayonnaise Classique')
     cy.get('#price-count').contains('1')
+    cy.contains('Latest prices')
     cy.get('[data-name="product-missing-chip"]').should('have.length', 0)
     cy.get('[data-name="product-not-found-alert"]').should('have.length', 0)
     cy.get('[data-name="category-not-found-alert"]').should('have.length', 0)
@@ -61,6 +65,7 @@ describe('Basic tests', () => {
     cy.contains('Welcome to Open Prices!').should('not.exist')
     cy.get('#product-title').contains('0000000000000')
     cy.get('#price-count').contains('0')
+    cy.contains('Latest prices')
     cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
     cy.get('[data-name="product-not-found-alert"]').should('have.length', 1)
     cy.get('[data-name="category-not-found-alert"]').should('have.length', 0)
@@ -73,6 +78,7 @@ describe('Basic tests', () => {
     cy.contains('Welcome to Open Prices!').should('not.exist')
     cy.get('.v-card-title').contains('Pitted apricot')
     cy.get('#price-count').contains('2')
+    cy.contains('Latest prices')
     cy.get('[data-name="product-missing-chip"]').should('have.length', 0)
     cy.get('[data-name="product-not-found-alert"]').should('have.length', 0)
     cy.get('[data-name="category-not-found-alert"]').should('have.length', 0)
@@ -85,13 +91,24 @@ describe('Basic tests', () => {
     cy.contains('Welcome to Open Prices!').should('not.exist')
     cy.get('.v-card-title').contains('en:aaaaaaaaaaaa')
     cy.get('#price-count').contains('0')
+    cy.contains('Latest prices')
     // cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
     cy.get('[data-name="product-not-found-alert"]').should('have.length', 0)
     cy.get('[data-name="category-not-found-alert"]').should('have.length', 1)
     cy.get('[data-name="price-card"]').should('have.length', 0)
     cy.contains('Load more').should('not.exist')
   })
 
+  it('displays a brand page', () => {
+    cy.visit('/brands/Snickers')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('[data-name="brand-card"]').should('have.length', 1)
+    cy.get('#product-count').contains('0')
+    cy.contains('Top products')
+    cy.get('[data-name="price-card"]').should('have.length', 0)
+    cy.contains('Load more').should('not.exist')
+  })
+
   it('displays the search page', () => {
     cy.visit('/search?q=3011360030498')
     cy.contains('Welcome to Open Prices!').should('not.exist')