From 694a2a9833bdd95eeb05371d3fc939d4370a69ce Mon Sep 17 00:00:00 2001
From: Vincent Hardouin <vincent.hardouin@pix.fr>
Date: Mon, 28 Jun 2021 08:55:21 +0200
Subject: [PATCH 1/3] Use nuxt auto import components

---
 components/BurgerMenuNav.vue         |  7 ------
 components/ChartSection.vue          |  5 -----
 components/FooterSliceZone.vue       | 10 ++-------
 components/NavigationSliceZone.vue   | 17 +++-----------
 components/NewsItemPost.vue          |  3 ---
 components/SliceZone.vue             | 33 ++++++----------------------
 components/slices/ActionsZone.vue    |  5 -----
 components/slices/Article.vue        |  5 -----
 components/slices/LatestNews.vue     |  5 -----
 components/slices/NavigationZone.vue |  5 -----
 components/slices/PageBanner.vue     |  3 ---
 components/slices/Stat.vue           |  5 -----
 layouts/default.vue                  | 14 ------------
 nuxt.config.js                       |  2 +-
 pages/pix-pro/_custom-page.vue       |  8 -------
 pages/pix-pro/index.vue              | 10 ---------
 pages/pix-site/_custom-page.vue      |  8 -------
 pages/pix-site/index.vue             |  6 -----
 pages/pix-site/news/_slug.vue        |  6 -----
 pages/pix-site/news/index.vue        |  4 ----
 20 files changed, 13 insertions(+), 148 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index 9c13e4a49..ca2179783 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -7,15 +7,8 @@
 </template>
 
 <script>
-import LanguageSwitcher from '@/components/LanguageSwitcher'
-import BurgerMenuNavItems from '@/components/BurgerMenuNavItems'
-
 export default {
   name: 'BurgerMenuNav',
-  components: {
-    LanguageSwitcher,
-    BurgerMenuNavItems,
-  },
   props: {
     items: {
       type: Object,
diff --git a/components/ChartSection.vue b/components/ChartSection.vue
index 414a1d6fd..63350d2fe 100644
--- a/components/ChartSection.vue
+++ b/components/ChartSection.vue
@@ -5,13 +5,8 @@
 </template>
 
 <script>
-import LineChart from '@/components/LineChart'
-
 export default {
   name: 'ChartSection',
-  components: {
-    LineChart,
-  },
   props: {
     data: {
       type: Object,
diff --git a/components/FooterSliceZone.vue b/components/FooterSliceZone.vue
index 051b2a606..0905cfe08 100644
--- a/components/FooterSliceZone.vue
+++ b/components/FooterSliceZone.vue
@@ -6,7 +6,7 @@
         :key="`footer-slice-left-${index}`"
       >
         <template v-if="slice.slice_type === 'logos_zone'">
-          <logos-zone :slice="slice" class="footer-left__logos" />
+          <slices-logos-zone :slice="slice" class="footer-left__logos" />
         </template>
         <prismic-rich-text
           v-if="slice.slice_type === 'text'"
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="footer__right">
-      <navigation-group
+      <slices-navigation-group
         v-for="(slice, index) in navigationGroups"
         :key="`footer-slice-right-${index}`"
         class="footer-right__navigation"
@@ -44,15 +44,9 @@
 <script>
 import { mapState } from 'vuex'
 import { groupBy } from 'lodash'
-import LogosZone from '@/components/slices/LogosZone'
-import NavigationGroup from '@/components/slices/NavigationGroup'
 
 export default {
   name: 'FooterSliceZone',
-  components: {
-    LogosZone,
-    NavigationGroup,
-  },
   data() {
     return {
       socialMediasHoverMap: {},
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index a6ab1c259..ba1c88d0e 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -12,10 +12,10 @@
           :key="`navigation-slice-left-${index}`"
         >
           <template v-if="slice.slice_type === 'logos_zone'">
-            <logos-zone :slice="slice" />
+            <slices-logos-zone :slice="slice" />
           </template>
           <template v-if="slice.slice_type === 'navigation_zone'">
-            <navigation-zone :slice="slice" />
+            <slices-navigation-zone :slice="slice" />
           </template>
         </section>
       </div>
@@ -25,7 +25,7 @@
         class="navigation-slice-zone-content__right-side"
       >
         <template v-if="slice.slice_type === 'actions_zone'">
-          <actions-zone :slice="slice" />
+          <slice-actions-zone :slice="slice" />
         </template>
       </section>
     </div>
@@ -35,19 +35,8 @@
 <script>
 import { mapState } from 'vuex'
 import { groupBy } from 'lodash'
-import LogosZone from '@/components/slices/LogosZone'
-import NavigationZone from '@/components/slices/NavigationZone'
-import ActionsZone from '@/components/slices/ActionsZone'
-import BurgerMenuNav from '@/components/BurgerMenuNav'
-
 export default {
   name: 'NavigationSliceZone',
-  components: {
-    ActionsZone,
-    LogosZone,
-    NavigationZone,
-    BurgerMenuNav,
-  },
   computed: {
     isPixPro() {
       return process.env.isPixPro
diff --git a/components/NewsItemPost.vue b/components/NewsItemPost.vue
index bdfd20064..2bbe1b317 100644
--- a/components/NewsItemPost.vue
+++ b/components/NewsItemPost.vue
@@ -25,11 +25,8 @@
 </template>
 
 <script>
-import SliceZone from '@/components/SliceZone'
-
 export default {
   name: 'NewsItemPost',
-  components: { SliceZone },
   props: {
     newsItem: {
       type: Object,
diff --git a/components/SliceZone.vue b/components/SliceZone.vue
index fb2e54f19..28d2f5fbf 100644
--- a/components/SliceZone.vue
+++ b/components/SliceZone.vue
@@ -5,50 +5,33 @@
         <prismic-rich-text :field="slice.primary.text" />
       </template>
       <template v-if="slice.slice_type === 'pop-in'">
-        <pop-in-campaigns :slice="slice" :index-for-id="index" />
+        <slices-pop-in-campaigns :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'banner'">
-        <page-banner :slice="slice" :index-for-id="index" />
+        <slices-page-banner :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'article'">
-        <article-slice :slice="slice" :index-for-id="index" />
+        <slices-article :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'multiple_block'">
-        <multiple-block-slice :slice="slice" :index-for-id="index" />
+        <slices-multiple-block :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'partners_logos'">
-        <partners-logos-slice :slice="slice" :index-for-id="index" />
+        <slices-partners-logos :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'latest_news'">
-        <latest-news-slice :slice="slice" :index-for-id="index" />
+        <slices-latest-news :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'stat'">
-        <stat :slice="slice" :index-for-id="index" />
+        <slices-stat :slice="slice" :index-for-id="index" />
       </template>
     </section>
   </div>
 </template>
 
 <script>
-import PageBanner from '@/components/slices/PageBanner'
-import ArticleSlice from '@/components/slices/Article'
-import LatestNewsSlice from '@/components/slices/LatestNews'
-import PopInCampaigns from '@/components/slices/PopInCampaigns'
-import MultipleBlockSlice from '@/components/slices/MultipleBlock'
-import PartnersLogosSlice from '@/components/slices/PartnersLogos'
-import Stat from '@/components/slices/Stat'
-
 export default {
   name: 'SliceZone',
-  components: {
-    MultipleBlockSlice,
-    PageBanner,
-    ArticleSlice,
-    LatestNewsSlice,
-    PopInCampaigns,
-    PartnersLogosSlice,
-    Stat,
-  },
   props: {
     slices: {
       type: Array,
@@ -57,5 +40,3 @@ export default {
   },
 }
 </script>
-
-<style></style>
diff --git a/components/slices/ActionsZone.vue b/components/slices/ActionsZone.vue
index 7681a41a9..333b8274b 100644
--- a/components/slices/ActionsZone.vue
+++ b/components/slices/ActionsZone.vue
@@ -19,13 +19,8 @@
 </template>
 
 <script>
-import LanguageSwitcher from '@/components/LanguageSwitcher'
-
 export default {
   name: 'ActionsZone',
-  components: {
-    LanguageSwitcher,
-  },
   props: {
     slice: {
       type: Object,
diff --git a/components/slices/Article.vue b/components/slices/Article.vue
index 41edc4181..0648c8d97 100644
--- a/components/slices/Article.vue
+++ b/components/slices/Article.vue
@@ -69,13 +69,8 @@
 </template>
 
 <script>
-import CtaButton from '../CtaButton'
-
 export default {
   name: 'Article',
-  components: {
-    CtaButton,
-  },
   props: {
     slice: {
       type: Object,
diff --git a/components/slices/LatestNews.vue b/components/slices/LatestNews.vue
index 3891e1efd..75fa9558e 100644
--- a/components/slices/LatestNews.vue
+++ b/components/slices/LatestNews.vue
@@ -29,13 +29,8 @@
 </template>
 
 <script>
-import NewsItemCard from '../NewsItemCard'
-
 export default {
   name: 'LatestNews',
-  components: {
-    NewsItemCard,
-  },
   props: {
     slice: {
       type: Object,
diff --git a/components/slices/NavigationZone.vue b/components/slices/NavigationZone.vue
index 7eed9ef7f..17e5309bb 100644
--- a/components/slices/NavigationZone.vue
+++ b/components/slices/NavigationZone.vue
@@ -41,13 +41,8 @@
 </template>
 
 <script>
-import NavigationDropdown from '@/components/NavigationDropdown'
-
 export default {
   name: 'NavigationZone',
-  components: {
-    NavigationDropdown,
-  },
   props: {
     slice: {
       type: Object,
diff --git a/components/slices/PageBanner.vue b/components/slices/PageBanner.vue
index c6b5822cf..b4900f5fb 100644
--- a/components/slices/PageBanner.vue
+++ b/components/slices/PageBanner.vue
@@ -49,11 +49,8 @@
 </template>
 
 <script>
-import MediaPlayer from '../MediaPlayer'
-
 export default {
   name: 'PageBanner',
-  components: { MediaPlayer },
   props: {
     slice: {
       type: Object,
diff --git a/components/slices/Stat.vue b/components/slices/Stat.vue
index 76b5ff8bd..55b280185 100644
--- a/components/slices/Stat.vue
+++ b/components/slices/Stat.vue
@@ -7,13 +7,8 @@
 </template>
 
 <script>
-import ChartSection from '~/components/ChartSection'
-
 export default {
   name: 'StatSlice',
-  components: {
-    ChartSection,
-  },
   props: {
     slice: {
       type: Object,
diff --git a/layouts/default.vue b/layouts/default.vue
index 3ec7b06b5..71618ab63 100755
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,20 +9,6 @@
   </div>
 </template>
 
-<script>
-import HotNewsBanner from '@/components/HotNewsBanner'
-import NavigationSliceZone from '@/components/NavigationSliceZone'
-import FooterSliceZone from '@/components/FooterSliceZone'
-
-export default {
-  components: {
-    FooterSliceZone,
-    HotNewsBanner,
-    NavigationSliceZone,
-  },
-}
-</script>
-
 <style lang="scss">
 html {
   font-size: 16px;
diff --git a/nuxt.config.js b/nuxt.config.js
index bcc776d26..9ed789c22 100755
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -57,7 +57,7 @@ const config = {
     '~plugins/vue-js-modal',
     { src: '~/plugins/prismicLinks', ssr: false },
   ],
-
+  components: true,
   /*
    ** Nuxt.js dev-modules
    */
diff --git a/pages/pix-pro/_custom-page.vue b/pages/pix-pro/_custom-page.vue
index 23e8f0f74..8278c438d 100644
--- a/pages/pix-pro/_custom-page.vue
+++ b/pages/pix-pro/_custom-page.vue
@@ -13,9 +13,6 @@
 </template>
 
 <script>
-import FormPage from '@/components/FormPage'
-import SimplePage from '@/components/SimplePage'
-import SliceZone from '@/components/SliceZone'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -27,11 +24,6 @@ export default {
       'en-gb': '/:uid',
     },
   },
-  components: {
-    FormPage,
-    SimplePage,
-    SliceZone,
-  },
   async asyncData({ params, app, req, error, currentPagePath }) {
     try {
       const document = await documentFetcher(
diff --git a/pages/pix-pro/index.vue b/pages/pix-pro/index.vue
index efc8e69e1..e042fb46d 100644
--- a/pages/pix-pro/index.vue
+++ b/pages/pix-pro/index.vue
@@ -13,9 +13,6 @@
 </template>
 
 <script>
-import FormPage from '@/components/FormPage'
-import SimplePage from '@/components/SimplePage'
-import SliceZone from '@/components/SliceZone'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -27,11 +24,6 @@ export default {
       'en-gb': '/',
     },
   },
-  components: {
-    FormPage,
-    SimplePage,
-    SliceZone,
-  },
   async asyncData({ app, req, error, currentPagePath }) {
     try {
       const document = await documentFetcher(
@@ -64,5 +56,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/pages/pix-site/_custom-page.vue b/pages/pix-site/_custom-page.vue
index 6993bbfe1..583e82ace 100644
--- a/pages/pix-site/_custom-page.vue
+++ b/pages/pix-site/_custom-page.vue
@@ -13,9 +13,6 @@
 </template>
 
 <script>
-import FormPage from '@/components/FormPage'
-import SimplePage from '@/components/SimplePage'
-import SliceZone from '@/components/SliceZone'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -27,11 +24,6 @@ export default {
       'en-gb': '/:uid',
     },
   },
-  components: {
-    FormPage,
-    SimplePage,
-    SliceZone,
-  },
   async asyncData({ params, app, req, error, currentPagePath }) {
     try {
       const document = await documentFetcher(
diff --git a/pages/pix-site/index.vue b/pages/pix-site/index.vue
index b5bd074a6..b770f757c 100755
--- a/pages/pix-site/index.vue
+++ b/pages/pix-site/index.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import SliceZone from '@/components/SliceZone'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -17,9 +16,6 @@ export default {
       'en-gb': '/',
     },
   },
-  components: {
-    SliceZone,
-  },
   async asyncData({ app, req, error, currentPagePath }) {
     try {
       const document = await documentFetcher(
@@ -66,5 +62,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/pages/pix-site/news/_slug.vue b/pages/pix-site/news/_slug.vue
index e5178d5e0..90c2b0612 100644
--- a/pages/pix-site/news/_slug.vue
+++ b/pages/pix-site/news/_slug.vue
@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import NewsItemPost from '@/components/NewsItemPost'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -21,9 +20,6 @@ export default {
       'en-gb': '/news/:slug',
     },
   },
-  components: {
-    NewsItemPost,
-  },
   async asyncData({ params, app, req, error, route, currentPagePath }) {
     try {
       const newsItem = await documentFetcher(
@@ -51,5 +47,3 @@ export default {
   },
 }
 </script>
-
-<style></style>
diff --git a/pages/pix-site/news/index.vue b/pages/pix-site/news/index.vue
index 5cb314f4f..3e480bd99 100644
--- a/pages/pix-site/news/index.vue
+++ b/pages/pix-site/news/index.vue
@@ -26,7 +26,6 @@
   </div>
 </template>
 <script>
-import NewsItemCard from '@/components/NewsItemCard'
 import { documentFetcher } from '~/services/document-fetcher'
 
 export default {
@@ -38,9 +37,6 @@ export default {
       'en-gb': '/news',
     },
   },
-  components: {
-    NewsItemCard,
-  },
   async asyncData({ app, error, req }) {
     try {
       const newsItems = await documentFetcher(

From 7f42fbf541a48a209bfc65c84cf4894c1b36a9c0 Mon Sep 17 00:00:00 2001
From: celineung <celine.ung@zenika.com>
Date: Fri, 16 Jul 2021 10:19:12 +0200
Subject: [PATCH 2/3] Fix component name typo

---
 components/NavigationSliceZone.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index ba1c88d0e..024f6656a 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -25,7 +25,7 @@
         class="navigation-slice-zone-content__right-side"
       >
         <template v-if="slice.slice_type === 'actions_zone'">
-          <slice-actions-zone :slice="slice" />
+          <slices-actions-zone :slice="slice" />
         </template>
       </section>
     </div>

From 2ff756b1b04784d49617b67c83d96c3c4977ef60 Mon Sep 17 00:00:00 2001
From: celineung <celine.ung@zenika.com>
Date: Fri, 16 Jul 2021 10:20:00 +0200
Subject: [PATCH 3/3] Fix tests after using nuxt auto import components

---
 tests/components/slices/NavigationSliceZone.test.js | 6 +++---
 tests/components/slices/NavigationZone.test.js      | 2 +-
 tests/pages/pix-site/index.test.js                  | 6 ++++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js
index ca36b0145..254876bc9 100644
--- a/tests/components/slices/NavigationSliceZone.test.js
+++ b/tests/components/slices/NavigationSliceZone.test.js
@@ -11,9 +11,9 @@ describe('NavigationSliceZone', () => {
     'slide-menu': true,
     'burger-menu-nav': true,
     'organization-nav': true,
-    'logos-zone': true,
-    'navigation-zone': true,
-    'actions-zone': true,
+    'slices-logos-zone': true,
+    'slices-navigation-zone': true,
+    'slices-actions-zone': true,
     fa: true,
   }
 
diff --git a/tests/components/slices/NavigationZone.test.js b/tests/components/slices/NavigationZone.test.js
index deb4918e5..5d98ebe2f 100644
--- a/tests/components/slices/NavigationZone.test.js
+++ b/tests/components/slices/NavigationZone.test.js
@@ -29,7 +29,7 @@ describe('NavigationZone slice', () => {
     beforeEach(() => {
       component = shallowMount(NavigationZone, {
         mocks: { $route },
-        stubs: { 'pix-link': true, fa: true },
+        stubs: { 'pix-link': true, fa: true, 'navigation-dropdown': true },
         propsData: {
           slice: {
             items: [
diff --git a/tests/pages/pix-site/index.test.js b/tests/pages/pix-site/index.test.js
index ee6e977fc..63c6ab0c3 100644
--- a/tests/pages/pix-site/index.test.js
+++ b/tests/pages/pix-site/index.test.js
@@ -48,6 +48,9 @@ describe('Index Page', () => {
           return { asText: () => PRISMIC_META }
         },
       },
+      stubs: {
+        'slice-zone': true,
+      },
     })
   })
 
@@ -81,6 +84,9 @@ describe('Index Page', () => {
           return { asText: () => '' }
         },
       },
+      stubs: {
+        'slice-zone': true,
+      },
     })
 
     expect(findMetaContent('og:description')).toBe(fallbackDescription)