WIP: REC-740 : do not load video by default

front/components/ChapterCard/ChapterCard.vue

@@ -19,86 +19,35 @@
         rel="noreferrer"
         class="chapter__image">
     </div>
-    <footer class="chapter__footer">
-      <ul
-        v-for="paragraph in chapterText"
-        :key="paragraph.text"
-        class="paragraph-container">
-        <li
-          v-if="paragraph"
-          class="paragraph">
-          <iframe
-            v-if="paragraph.iframeSrc"
-            :width="dimensions.width"
-            :height="dimensions.height"
-            :src="paragraph.iframeSrc"
-            :title="chapterTitle"
-            class="youtube-iframe"
-            allow="accelerometer; encrypted-media; gyroscope;"
-            allowfullscreen/>
-          <p
-            v-else-if="paragraph.link"
-            class="chapter__footer_text">
-            <a
-              :href="paragraph.link"
-              rel="noreferrer"
-              target="_blank">
-              {{ paragraph.link }}
-            </a>
-          </p>
-          <h3
-            v-else
-            class="chapter__footer_text">
-            {{ paragraph.text }}
-          </h3>
-        </li>
-      </ul>
-    </footer>
+    <paragraphs
+      :chapter-text="chapterText"
+      :title="chapterTitle"/>
   </article>
 </template>
 
 <script>
   import translationsService from '../../services/services/translations'
-  import {
-    generateCleanUrlLink, generateIframeLink, urlTester, youtubeEmbedUrlTester,
-  } from './paragraph-link-utils'
-  import { iframeDimensions } from '../../services'
+  import Paragraphs from './Paragraphs/Paragraphs'
 
   export default {
     name: 'ChapterCard',
+    components: { Paragraphs },
     props: { chapter: { type: Object, default: () => {} } },
-    data: () => ({ dimensions: iframeDimensions() }),
     computed: {
       imgLink() {
         const { imgLink } = this.chapter
         return !imgLink ? false : imgLink
       },
-      styleMissing() {
-        return `height: ${this.dimensions.height}px;"`
-      },
       chapterTitle() {
         const language = this.$store.state.locale
         return translationsService.getChapterTitle(this.chapter, language)
       },
       chapterAlt() {
-        return this.$t('altComplement') + (this.chapterText[0] ? this.chapterText[0].text : '')
+        return this.$t('altComplement') + (this.chapterText[0] ? this.chapterText[0] : '')
       },
       chapterText() {
         const language = this.$store.state.locale
-        const chapterText = translationsService.getChapterText(this.chapter, language)
-
-        return chapterText
-          .filter(paragraph => !!paragraph)
-          .map(this.enhanceParagraph)
-      },
-    },
-    methods: {
-      enhanceParagraph(paragraph) {
-        return {
-          iframeSrc: youtubeEmbedUrlTester(paragraph) ? generateIframeLink(paragraph) : undefined,
-          link: urlTester(paragraph) ? generateCleanUrlLink(paragraph) : undefined,
-          text: paragraph,
-        }
+        return translationsService.getChapterText(this.chapter, language)
       },
     },
     i18n: {
@@ -167,65 +116,4 @@
     color: #000;
     text-align: center;
   }
-
-  .chapter__footer {
-    text-align: center;
-    padding: 0 15px;
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .chapter__footer button {
-    text-transform: uppercase;
-    color: #D14800;
-    background: #FFFFFF;
-    border: 1px solid #D14800;
-    cursor: pointer;
-    padding: 15px 30px;
-    border-radius: 4px;
-    width: 100%;
-    margin-bottom: 10px;
-    font-weight: 700;
-  }
-
-  .chapter__footer button:hover {
-    background: #D14800;
-    color: #FFFFFF;
-  }
-
-  .chapter__footer button:disabled,
-  .chapter__footer button:active {
-    background: #BDBDBD;
-    border-color: #616161;
-    color: #FAFAFA;
-    cursor: auto;
-  }
-
-  .youtube-iframe {
-    margin: 30px 0;
-    border: none;
-  }
-
-  .chapter__footer_text {
-    font-size: 18px;
-    word-spacing: 1px;
-  }
-
-  .missing-image {
-    display: flex;
-    justify-content: center;
-  }
-
-  .paragraph {
-    list-style-type: none;
-  }
-
-  .paragraph-container {
-    padding: 0;
-  }
-
-  @media only screen and (min-width: 640px) {
-    .chapter__footer_text {
-      font-weight: lighter;
-    }
-  }
 </style>

front/components/ChapterCard/Paragraphs/Paragraphs.spec.js

@@ -0,0 +1,36 @@
+import VueI18n from 'vue-i18n'
+import Paragraphs from './Paragraphs.vue'
+
+describe('Component | Paragraphs.vue', () => {
+  let wrapper
+  let propsData
+  let localVue
+
+  beforeEach(() => {
+    console.warn = jest.fn()
+    propsData = { title: 'title', chapterText: ['voilà', ''] }
+    localVue = createLocalVue()
+    localVue.use(VueI18n)
+  })
+
+  describe('template', () => {
+    it('should match snapshot with text', () => {
+      wrapper = shallowMount(Paragraphs, { propsData })
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot with link', () => {
+    propsData = { title: 'title', chapterText: ['https://www.rec.me'] }
+      wrapper = shallowMount(Paragraphs, { propsData })
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot with video on click on loading button', async () => {
+    propsData = { title: 'title', chapterText: ['https://www.youtu.be/embed/123'] }
+      wrapper = shallowMount(Paragraphs, { propsData, localVue })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})
+

front/components/ChapterCard/Paragraphs/Paragraphs.vue

@@ -0,0 +1,147 @@
+<template>
+  <footer class="chapter__footer">
+    <ul
+      v-for="paragraph in paragraphs"
+      :key="paragraph.text"
+      class="paragraph-container">
+      <li
+        v-if="paragraph"
+        class="paragraph">
+        <button
+          v-if="paragraph.iframeSrc && isIframeHidden"
+          @click="displayIframe">
+          {{ $t("displayIframe") }}
+        </button>
+        <iframe
+          v-else-if="paragraph.iframeSrc && !isIframeHidden"
+          :width="dimensions.width"
+          :height="dimensions.height"
+          :src="paragraph.iframeSrc"
+          :title="title"
+          class="youtube-iframe"
+          allow="accelerometer; encrypted-media; gyroscope;"
+          allowfullscreen/>
+        <p
+          v-else-if="paragraph.link"
+          class="chapter__footer_text">
+          <a
+            :href="paragraph.link"
+            rel="noreferrer"
+            target="_blank">
+            {{ paragraph.link }}
+          </a>
+        </p>
+        <h3
+          v-else
+          class="chapter__footer_text">
+          {{ paragraph.text }}
+        </h3>
+      </li>
+    </ul>
+  </footer>
+</template>
+<script>
+  import { iframeDimensions } from '../../../services'
+  import {
+    generateCleanUrlLink,
+    generateIframeLink,
+    urlTester,
+    youtubeEmbedUrlTester,
+  } from './paragraph-link-utils'
+
+  export default {
+    name: 'Paragraphs',
+    props: {
+      chapterText: { type: Array, default: () => [] },
+      title: { type: String, default: () => '' },
+    },
+    data: () => ({ dimensions: iframeDimensions(), isIframeHidden: true }),
+    computed: {
+      paragraphs() {
+        return this.chapterText
+          .filter(paragraph => !!paragraph)
+          .map(this.enhanceParagraph)
+      },
+    },
+    methods: {
+      enhanceParagraph(paragraph) {
+        return {
+          iframeSrc: youtubeEmbedUrlTester(paragraph) ? generateIframeLink(paragraph) : undefined,
+          link: urlTester(paragraph) ? generateCleanUrlLink(paragraph) : undefined,
+          text: paragraph,
+        }
+      },
+      displayIframe() {
+        this.isIframeHidden = false
+      },
+    },
+    i18n: {
+      messages: {
+        fr: {
+          displayIframe: 'Voir la vidéo',
+        },
+        en: {
+          displayIframe: 'See the video',
+        },
+      },
+    },
+  }
+</script>
+
+<style scoped>
+.chapter__footer {
+  text-align: center;
+  padding: 0 15px;
+  border-top: 1px solid #E6E6E6;
+}
+
+.chapter__footer button {
+  text-transform: uppercase;
+  color: #D14800;
+  background: #FFFFFF;
+  border: 1px solid #D14800;
+  cursor: pointer;
+  padding: 15px 30px;
+  border-radius: 4px;
+  width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.chapter__footer button:hover {
+  background: #D14800;
+  color: #FFFFFF;
+}
+
+.chapter__footer button:disabled,
+.chapter__footer button:active {
+  background: #BDBDBD;
+  border-color: #616161;
+  color: #FAFAFA;
+  cursor: auto;
+}
+
+.youtube-iframe {
+  margin: 30px 0;
+  border: none;
+}
+
+.chapter__footer_text {
+  font-size: 18px;
+  word-spacing: 1px;
+}
+
+.paragraph {
+  list-style-type: none;
+}
+
+.paragraph-container {
+  padding: 0;
+}
+
+@media only screen and (min-width: 640px) {
+  .chapter__footer_text {
+    font-weight: lighter;
+  }
+}
+</style>

front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component | Paragraphs.vue template should match snapshot with link 1`] = `
+<footer class="chapter__footer">
+  <ul class="paragraph-container">
+    <li class="paragraph">
+      <p class="chapter__footer_text"><a href="https://www.rec.me" rel="noreferrer" target="_blank">
+          https://www.rec.me
+        </a></p>
+    </li>
+  </ul>
+</footer>
+`;
+
+exports[`Component | Paragraphs.vue template should match snapshot with text 1`] = `
+<footer class="chapter__footer">
+  <ul class="paragraph-container">
+    <li class="paragraph">
+      <h3 class="chapter__footer_text">
+        voilà
+      </h3>
+    </li>
+  </ul>
+</footer>
+`;
+
+exports[`Component | Paragraphs.vue template should match snapshot with video on click on loading button 1`] = `
+<footer class="chapter__footer">
+  <ul class="paragraph-container">
+    <li class="paragraph"><iframe width="512" height="288" src="https://www.youtu.be/embed/123?rel=0&amp;modestbranding=1" title="title" allow="accelerometer; encrypted-media; gyroscope;" allowfullscreen="allowfullscreen" class="youtube-iframe"></iframe></li>
+  </ul>
+</footer>
+`;