Add first basic tests

src/components/PriceCountChip.vue

@@ -2,7 +2,7 @@
   <v-chip label size="small" density="comfortable" :color="getColor()" class="mr-1">
     <v-icon start icon="mdi-tag-outline"></v-icon>
     <span v-if="withLabel">{{ $t('PriceCountChip.PriceCount', { count: count }) }}</span>
-    <span v-if="!withLabel">{{ count }}</span>
+    <span v-else id="price-count">{{ count }}</span>
   </v-chip>
 </template>
 

src/components/ProductCard.vue

@@ -7,7 +7,7 @@
           <v-img v-if="!product.image_url" :src="productImageDefault" style="height:100px;width:100px;filter:invert(.9);"></v-img>
         </v-col>
         <v-col style="max-width:75%">
-          <h3 @click="goToProduct()">{{ getProductTitle() }}</h3>
+          <h3 id="product-title" @click="goToProduct()">{{ getProductTitle() }}</h3>
 
           <p>
             <span>

src/views/Home.vue

@@ -45,7 +45,7 @@
         <template v-slot:subtitle v-if="!loading">
           <i18n-t keypath="Home.TodayPriceStat" :plural="todayPriceCount" tag="span">
             <template v-slot:todayPriceNumber>
-              <span>{{ todayPriceCount }}</span>
+              <span id="price-count">{{ todayPriceCount }}</span>
             </template>
           </i18n-t>
         </template>
@@ -95,7 +95,7 @@ export default {
   methods: {
     getTodayPriceCount() {
       this.loading = true
-      return api.getPrices({ created__gte: utils.currentStartOfDay(), size: 2 })
+      return api.getPrices({ created__gte: utils.currentStartOfDay(), size: 1 })
         .then((data) => {
           this.todayPriceCount = data.total
           this.loading = false

tests/e2e/spec.cy.js

@@ -0,0 +1,30 @@
+describe('Basic tests', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=1&order_by=-created*', { fixture: 'prices.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&product_code=3011360030498', { fixture: 'prices_3011360030498.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&category_tag=en%3Apitted-apricot', { fixture: 'prices_pitted_apricot.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/3011360030498', { fixture: 'product_3011360030498.json' })
+  })
+
+  it('loads the home page', () => {
+    cy.visit('/')
+    cy.contains('Welcome to Open Prices!')  // en by default
+    cy.get('#price-count').contains('42')
+  })
+
+  it('displays a product page', () => {
+    cy.visit('/products/3011360030498')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('#product-title').contains('Mayonnaise Classique')
+    cy.get('#price-count').contains('1')
+    cy.contains('Unknown product').should('not.exist')
+  })
+
+  it('displays a raw product page', () => {
+    cy.visit('/products/en:pitted-apricot')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('.v-card-title').contains('Pitted apricot')
+    // cy.get('#price-count').contains('1')
+    cy.contains('Unknown product')  // to fix
+  })
+})

tests/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}