feat: do not pass through /locale-choice page

1024pix · Jan 6, 2023 · 6457cc1 · 6457cc1
1 parent babe8f9
commit 6457cc1
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 111 deletions.
diff --git a/layouts/empty.vue b/layouts/empty.vue
@@ -0,0 +1,9 @@
+<template>
+  <nuxt />
+</template>
+
+<script>
+export default {
+  name: 'Empty',
+}
+</script>
diff --git a/layouts/home.vue b/layouts/home.vue
diff --git a/pages/pix-site/index.vue b/pages/pix-site/index.vue
@@ -1,15 +1,43 @@
-<template><div></div></template>
+<template>
+  <client-only v-if="shouldDisplayLocaleChoice">
+    <main class="home">
+      <div class="locale-choice">
+        <h1>
+          <pix-image
+            class="logo-pix"
+            :field="{ url: '/images/logo-pix-blanc.svg', alt: 'Pix' }"
+          />
+        </h1>
+        <locale-link
+          v-for="locale in locales"
+          :key="locale.code"
+          class="locale-choice__link"
+          :locale="locale"
+        />
+        <pix-image class="planet" :field="{ url: '/images/planet.svg' }" />
+      </div>
+    </main>
+  </client-only>
+</template>
 
 <script>
 import { language } from '~/config/language'
 
 export default {
+  layout: 'empty',
   nuxtI18n: false,
-  layout: 'simple',
+  data() {
+    return {
+      locales: language.locales,
+      shouldDisplayLocaleChoice: false,
+    }
+  },
   mounted() {
     const chosenLocale = this.getLocaleFromCookie()
-    const url = chosenLocale ? `/${chosenLocale}/` : '/locale-choice'
-    this.$router.push(url)
+    if (chosenLocale) {
+      return this.$router.push(`/${chosenLocale}/`)
+    }
+    this.shouldDisplayLocaleChoice = true
   },
   methods: {
     getLocaleFromCookie() {
@@ -30,3 +58,57 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  min-width: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 1rem 0;
+  background: url('/images/stars.svg') repeat, $default-gradient;
+
+  @include device-is('large-mobile') {
+    padding: 0;
+  }
+}
+
+.locale-choice {
+  padding: 3rem 0;
+}
+
+.logo-pix {
+  margin: 0 auto 5vh;
+  display: block;
+  width: 11rem;
+  max-width: 100%;
+}
+
+.locale-choice__link + .locale-choice__link {
+  margin-top: 1rem;
+}
+
+.planet {
+  margin: 5vh auto 0;
+  display: block;
+  width: max(16vw, 90%);
+}
+
+@include device-is('large-mobile') {
+  .locale-choice {
+    position: relative;
+  }
+
+  .planet {
+    position: absolute;
+    top: 50%;
+    right: calc(100% + 4vw);
+    max-width: unset;
+    margin: 0;
+    transform: translateY(-50%);
+  }
+}
+</style>
diff --git a/pages/pix-site/locale-choice.vue b/pages/pix-site/locale-choice.vue
diff --git a/tests/pages/pix-site/index.test.js b/tests/pages/pix-site/index.test.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
+import Vue from 'vue'
 import Index from '@/pages/pix-site/index.vue'
 
 describe('Index Page', () => {
@@ -19,28 +20,40 @@ describe('Index Page', () => {
 
   describe('#mounted', () => {
     describe('when there is no cookie', () => {
-      test('redirects to /locale-choice page', () => {
+      test('do not redirect', async () => {
         // given
         document.cookie = ''
 
         // when
-        shallowMount(Index, { mocks: { $router } })
+        const wrapper = shallowMount(Index, {
+          mocks: { $router },
+          stubs: ['client-only', 'pix-image', 'locale-link'],
+        })
+        await Vue.nextTick()
 
         // then
-        expect($router.push).toHaveBeenCalledWith('/locale-choice')
+        expect($router.push).not.toHaveBeenCalled()
+        const localeLinks = wrapper.findAll('locale-link-stub')
+        expect(localeLinks.length).toBe(4)
       })
     })
 
     describe('when there is a cookie', () => {
-      test('redirects to locale page', () => {
+      test('redirects to locale page', async () => {
         // given
         document.cookie = 'foo=bar; locale=fr'
 
         // when
-        shallowMount(Index, { mocks: { $router } })
+        const wrapper = shallowMount(Index, {
+          mocks: { $router },
+          stubs: ['client-only', 'pix-image', 'locale-link'],
+        })
+        await Vue.nextTick()
 
         // then
         expect($router.push).toHaveBeenCalledWith('/fr/')
+        const localeLinks = wrapper.findAll('locale-link-stub')
+        expect(localeLinks.length).toBe(0)
       })
     })
   })
@@ -51,7 +64,10 @@ describe('Index Page', () => {
         test('returns no locale', () => {
           // given
           document.cookie = ''
-          const wrapper = shallowMount(Index, { mocks: { $router } })
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
 
           // when
           const chosenLocale = wrapper.vm.getLocaleFromCookie()
@@ -65,7 +81,10 @@ describe('Index Page', () => {
         test('returns the proper locale', () => {
           // given
           document.cookie = 'foo=bar; locale=fr'
-          const wrapper = shallowMount(Index, { mocks: { $router } })
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
 
           // when
           const chosenLocale = wrapper.vm.getLocaleFromCookie()
@@ -79,7 +98,10 @@ describe('Index Page', () => {
         test('cookie value is ignored', () => {
           // given
           document.cookie = 'foo=bar; locale=1234-crafted-cookie'
-          const wrapper = shallowMount(Index, { mocks: { $router } })
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
 
           // when
           const chosenLocale = wrapper.vm.getLocaleFromCookie()