From 5997bb081f0c57f2a83283a93da5edf186c5d26d Mon Sep 17 00:00:00 2001
From: Pierre Recontact <commit@recontact.me>
Date: Sun, 6 Dec 2020 22:38:02 +0100
Subject: [PATCH 1/2] chore(REC-740): refacto chapter card

---
 front/components/ArticleCard/ArticleCard.vue  |   2 +-
 front/components/ChapterCard/ChapterCard.vue  | 130 ++----------------
 .../ChapterCard/Paragraphs/Paragraphs.spec.js |  30 ++++
 .../ChapterCard/Paragraphs/Paragraphs.vue     | 129 +++++++++++++++++
 .../__snapshots__/Paragraphs.spec.js.snap     |  33 +++++
 .../{ => Paragraphs}/paragraph-link-utils.js  |   0
 .../paragraph-link-utils.spec.js              |   0
 .../__snapshots__/ChapterCard.spec.js.snap    |  27 +---
 8 files changed, 203 insertions(+), 148 deletions(-)
 create mode 100644 front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
 create mode 100644 front/components/ChapterCard/Paragraphs/Paragraphs.vue
 create mode 100644 front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
 rename front/components/ChapterCard/{ => Paragraphs}/paragraph-link-utils.js (100%)
 rename front/components/ChapterCard/{ => Paragraphs}/paragraph-link-utils.spec.js (100%)

diff --git a/front/components/ArticleCard/ArticleCard.vue b/front/components/ArticleCard/ArticleCard.vue
index cf5e75cc..6e07ff40 100644
--- a/front/components/ArticleCard/ArticleCard.vue
+++ b/front/components/ArticleCard/ArticleCard.vue
@@ -51,7 +51,7 @@
           target="_blank"
           rel="noreferrer"
           class="article__dropbox article__footer__button">
-            {{ $t("viewGallery") }}
+          {{ $t("viewGallery") }}
         </a>
       </template>
     </footer>
diff --git a/front/components/ChapterCard/ChapterCard.vue b/front/components/ChapterCard/ChapterCard.vue
index b503cae1..e35ad429 100644
--- a/front/components/ChapterCard/ChapterCard.vue
+++ b/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
+      :chapterText="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 translationsService from '../../services/services/translations'
+import Paragraphs from './Paragraphs/Paragraphs'
 
-  export default {
+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>
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
new file mode 100644
index 00000000..fcbc0940
--- /dev/null
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
@@ -0,0 +1,30 @@
+import Paragraphs from './Paragraphs.vue'
+
+describe('Component | Paragraphs.vue', () => {
+  let wrapper
+  let propsData
+
+  beforeEach(() => {
+    propsData = { title: 'title', chapterText: ['voilà', ''] }
+  })
+
+  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', () => {
+    propsData = { title: 'title', chapterText: ['https://www.youtu.be/embed/123'] }
+      wrapper = shallowMount(Paragraphs, { propsData })
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})
+
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.vue b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
new file mode 100644
index 00000000..0f019461
--- /dev/null
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
@@ -0,0 +1,129 @@
+<template>
+  <footer class="chapter__footer">
+    <ul
+      v-for="paragraph in paragraphs"
+      :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="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() }),
+    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,
+        }
+      },
+    },
+  }
+</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>
diff --git a/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap b/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
new file mode 100644
index 00000000..8528356f
--- /dev/null
+++ b/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 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>
+`;
diff --git a/front/components/ChapterCard/paragraph-link-utils.js b/front/components/ChapterCard/Paragraphs/paragraph-link-utils.js
similarity index 100%
rename from front/components/ChapterCard/paragraph-link-utils.js
rename to front/components/ChapterCard/Paragraphs/paragraph-link-utils.js
diff --git a/front/components/ChapterCard/paragraph-link-utils.spec.js b/front/components/ChapterCard/Paragraphs/paragraph-link-utils.spec.js
similarity index 100%
rename from front/components/ChapterCard/paragraph-link-utils.spec.js
rename to front/components/ChapterCard/Paragraphs/paragraph-link-utils.spec.js
diff --git a/front/components/ChapterCard/__snapshots__/ChapterCard.spec.js.snap b/front/components/ChapterCard/__snapshots__/ChapterCard.spec.js.snap
index 53a3d5dd..8a0486b7 100644
--- a/front/components/ChapterCard/__snapshots__/ChapterCard.spec.js.snap
+++ b/front/components/ChapterCard/__snapshots__/ChapterCard.spec.js.snap
@@ -11,31 +11,6 @@ exports[`Component | ChapterCard.vue template should match snapshot 1`] = `
     </p>
   </header>
   <div class="chapter__content"><img src="webf" alt="An image showing Title of the first paragraph" rel="noreferrer" class="chapter__image"></div>
-  <footer class="chapter__footer">
-    <ul class="paragraph-container">
-      <li class="paragraph">
-        <h3 class="chapter__footer_text">
-          Title of the first paragraph
-        </h3>
-      </li>
-    </ul>
-    <ul class="paragraph-container">
-      <li class="paragraph">
-        <p class="chapter__footer_text"><a href="https://github.com/trollepierre" rel="noreferrer" target="_blank">
-            https://github.com/trollepierre
-          </a></p>
-      </li>
-    </ul>
-    <ul class="paragraph-container">
-      <li class="paragraph">
-        <h3 class="chapter__footer_text">
-          url
-        </h3>
-      </li>
-    </ul>
-    <ul class="paragraph-container">
-      <li class="paragraph"><iframe width="512" height="288" src="https://www.youtube.com/embed/-18AYp_7iW0?rel=0&amp;modestbranding=1" title="My title" allow="accelerometer; encrypted-media; gyroscope;" allowfullscreen="allowfullscreen" class="youtube-iframe"></iframe></li>
-    </ul>
-  </footer>
+  <paragraphs-stub chaptertext="Title of the first paragraph,https://github.com/trollepierre,url,https://www.youtube.com/embed/-18AYp_7iW0" title="My title"></paragraphs-stub>
 </article>
 `;

From 942e91fa193560e9170dd3b200454f62237b8813 Mon Sep 17 00:00:00 2001
From: Pierre Recontact <commit@recontact.me>
Date: Sun, 6 Dec 2020 22:59:07 +0100
Subject: [PATCH 2/2] feat(embedded): do not load embedded video by default

---
 front/components/ChapterCard/ChapterCard.vue  |  8 +++----
 .../ChapterCard/Paragraphs/Paragraphs.spec.js | 10 +++++++--
 .../ChapterCard/Paragraphs/Paragraphs.vue     | 22 +++++++++++++++++--
 .../__snapshots__/Paragraphs.spec.js.snap     |  2 +-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/front/components/ChapterCard/ChapterCard.vue b/front/components/ChapterCard/ChapterCard.vue
index e35ad429..05decbcd 100644
--- a/front/components/ChapterCard/ChapterCard.vue
+++ b/front/components/ChapterCard/ChapterCard.vue
@@ -20,16 +20,16 @@
         class="chapter__image">
     </div>
     <paragraphs
-      :chapterText="chapterText"
+      :chapter-text="chapterText"
       :title="chapterTitle"/>
   </article>
 </template>
 
 <script>
-import translationsService from '../../services/services/translations'
-import Paragraphs from './Paragraphs/Paragraphs'
+  import translationsService from '../../services/services/translations'
+  import Paragraphs from './Paragraphs/Paragraphs'
 
-export default {
+  export default {
     name: 'ChapterCard',
     components: { Paragraphs },
     props: { chapter: { type: Object, default: () => {} } },
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
index fcbc0940..c11a3f56 100644
--- a/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
@@ -1,11 +1,16 @@
+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', () => {
@@ -20,9 +25,10 @@ describe('Component | Paragraphs.vue', () => {
       expect(wrapper).toMatchSnapshot()
     })
 
-    it('should match snapshot with video', () => {
+    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 })
+      wrapper = shallowMount(Paragraphs, { propsData, localVue })
+      await wrapper.find('button').trigger('click')
       expect(wrapper).toMatchSnapshot()
     })
   })
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.vue b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
index 0f019461..39b725ef 100644
--- a/front/components/ChapterCard/Paragraphs/Paragraphs.vue
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
@@ -7,8 +7,13 @@
       <li
         v-if="paragraph"
         class="paragraph">
+        <button
+          v-if="paragraph.iframeSrc && isIframeHidden"
+          @click="displayIframe">
+          {{ $t("displayIframe") }}
+        </button>
         <iframe
-          v-if="paragraph.iframeSrc"
+          v-else-if="paragraph.iframeSrc && !isIframeHidden"
           :width="dimensions.width"
           :height="dimensions.height"
           :src="paragraph.iframeSrc"
@@ -50,7 +55,7 @@
       chapterText: { type: Array, default: () => [] },
       title: { type: String, default: () => '' },
     },
-    data: () => ({ dimensions: iframeDimensions() }),
+    data: () => ({ dimensions: iframeDimensions(), isIframeHidden: true }),
     computed: {
       paragraphs() {
         return this.chapterText
@@ -66,6 +71,19 @@
           text: paragraph,
         }
       },
+      displayIframe() {
+        this.isIframeHidden = false
+      },
+    },
+    i18n: {
+      messages: {
+        fr: {
+          displayIframe: 'Voir la vidéo',
+        },
+        en: {
+          displayIframe: 'See the video',
+        },
+      },
     },
   }
 </script>
diff --git a/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap b/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
index 8528356f..8028a641 100644
--- a/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
+++ b/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
@@ -24,7 +24,7 @@ exports[`Component | Paragraphs.vue template should match snapshot with text 1`]
 </footer>
 `;
 
-exports[`Component | Paragraphs.vue template should match snapshot with video 1`] = `
+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>