Test for images and RichText (#103)

* Add test for images

* Add test for richtext

cypress/integration/Home.spec.js

@@ -4,6 +4,7 @@ context('CI', () => {
   it('can render blok', () => {
     cy.visit('ci')
     cy.contains('ci=working')
+    cy.contains('I am testing this')
   })
 })
 

cypress/integration/Images.spec.js

@@ -0,0 +1,13 @@
+/// <reference types="Cypress" />
+
+context('Images', () => {
+  it('can render images', () => {
+    cy.visit('images')
+    cy.get('[data-testid="storyblok-page"]').find('img').should('have.length', 3)
+    cy.get('[data-testid="storyblok-page"]')
+      .find('img')
+      .first()
+      .should('have.attr', 'src')
+      .should('include', 'https://img2.storyblok.com')
+  })
+})

package.json

@@ -7,10 +7,7 @@
   "license": "MIT",
   "scripts": {
     "bootstrap": "lerna bootstrap --no-ci",
-    "test:ci": "yarn test:ci:start; yarn test:ci:test",
-    "test:ci:start": "docker-compose -f docker-compose.yml -f docker-compose.override.yml -f docker-compose.test.yml up -d",
-    "test:ci:test": "docker-compose -f docker-compose.yml -f docker-compose.override.yml -f docker-compose.test.yml up --abort-on-container-exit --exit-code-from cypress",
-    "test": "cypress open",
+    "cypress": "cypress open",
     "pree2e": "wait-on http://localhost:3000/ci",
     "e2e": " cypress run",
     "lint": "eslint --ext .js,.vue,.ts .",

packages/vsf-storyblok-module/components/Page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-testid="storyblok-page">
     <sb-render v-for="child in item.body" :item="child" :key="child.uuid" />
   </div>
 </template>

theme/components/storyblok/Image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="image" :style="{ backgroundImage: `url(${item.url})` }" />
+  <sb-img :src="item.image" :width="1200" :lazy="true" />
 </template>
 
 <script>
@@ -9,12 +9,3 @@ export default {
   extends: Blok
 }
 </script>
-
-<style lang="scss" scoped>
-.image {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 500px;
-}
-</style>

theme/components/storyblok/RichText.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <sb-rich-text v-if="item.text" :text="item.text" />
+  </div>
+</template>
+
+<script>
+import { Blok } from 'src/modules/vsf-storyblok-module/components'
+export default {
+  name: 'RichTextBlok',
+  extends: Blok
+}
+</script>

theme/components/storyblok/index.ts

@@ -1,7 +1,8 @@
 import { add } from 'src/modules/vsf-storyblok-module/components'
 
 add('hero', () => import('./Hero.vue'))
-add('demoImage', () => import('./Image.vue'))
+add('Image', () => import('./Image.vue'))
+add('RichText', () => import('./RichText.vue'))
 add('ciLink', () => import('./Link.vue'))
 // Overwrite an existing component
 // add('tile', () => import('./Tile.vue'), { force: true })