Add default footer to new dynamic footer component

This commit is contained in:
Ramon Wenger 2023-05-10 12:19:10 +02:00
parent f53b7791d1
commit 1428634440
7 changed files with 50 additions and 30 deletions

View File

@ -42,7 +42,7 @@ export const myKvValues: FlavorValues = {
textInstrumentFilterShowAll: 'Alles anzeigen',
// myKV flags
showFooter: false,
showFooter: true,
showObjectivesTitle: false,
showInstrumentFilterSidebar: true,
showPortfolio: true,

View File

@ -14,7 +14,8 @@
class="layout__content"
:key="$route.fullPath"
/>
<default-footer
<dynamic-footer
:simple="false"
class="layout__footer"
v-if="enableFooter"
/>
@ -24,7 +25,7 @@
<script>
import HeaderBar from '@/components/HeaderBar.vue';
import ProfileSidebar from '@/components/profile/ProfileSidebar.vue';
import DefaultFooter from '@/layouts/DefaultFooter.vue';
import DynamicFooter from '@/layouts/DynamicFooter.vue';
import NavigationSidebar from '@/components/book-navigation/NavigationSidebar.vue';
export default {
@ -32,7 +33,7 @@ export default {
HeaderBar,
ProfileSidebar,
NavigationSidebar,
DefaultFooter,
DynamicFooter,
},
computed: {

View File

@ -5,12 +5,15 @@
<script setup lang="ts">
import MyKvFooter from '@/layouts/MyKVFooter.vue';
import SkillboxSimpleFooter from '@/layouts/SkillboxSimpleFooter.vue';
import SkillboxDefaultFooter from '@/layouts/SkillboxDefaultFooter.vue';
import { computed } from 'vue';
import { Flavor } from '@/helpers/flavor.stubabble';
const props = withDefaults(defineProps<{ simple: boolean }>(), {
simple: true,
});
const flavor = Flavor.getFlavor();
console.log(flavor);
console.log(flavor.appFlavor);
const Footer = computed(() => {
switch (flavor.appFlavor) {
case 'my-kv':
@ -18,7 +21,7 @@ const Footer = computed(() => {
case 'my-dhf':
return MyKvFooter;
default:
return SkillboxSimpleFooter;
return props.simple ? SkillboxSimpleFooter : SkillboxDefaultFooter;
}
});
</script>

View File

@ -9,7 +9,8 @@
</router-link>
</div>
<router-view class="public__content layout__content" />
<default-footer
<dynamic-footer
:simple="false"
class="skillbox__footer public__footer footer"
v-if="$flavor.showFooter"
/>
@ -18,13 +19,13 @@
<script>
import { defineAsyncComponent } from 'vue';
import DefaultFooter from '@/layouts/DefaultFooter.vue';
import DynamicFooter from '@/layouts/DynamicFooter.vue';
const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
export default {
components: {
Logo,
DefaultFooter,
DynamicFooter,
},
};
</script>

View File

@ -1,10 +1,14 @@
import SimpleFooter from './SimpleFooter.vue';
import DynamicFooter from './DynamicFooter.vue';
import { Flavor } from '@/helpers/flavor.stubabble';
import { defaultFlavorValues, dhaValues, dhfValues, myKvValues } from '@/helpers/app-flavor.constants';
const checkLinks = (baseUrl) => {
cy.mount(SimpleFooter);
const checkLinks = (baseUrl, simple = true) => {
cy.viewport('macbook-15');
cy.mount(DynamicFooter, {
props: {
simple,
},
});
cy.get('a')
.eq(0)
.should('contain', 'Datenschutz')
@ -21,25 +25,44 @@ const checkLinks = (baseUrl) => {
describe('<SimpleFooter />', () => {
it('renders for MySkillbox', () => {
cy.viewport('macbook-15');
// see: https://on.cypress.io/mounting-vue
cy.stub(Flavor, 'getFlavor').returns(defaultFlavorValues);
cy.mount(SimpleFooter);
cy.viewport('macbook-15');
cy.mount(DynamicFooter, { props: { simple: true } });
cy.get('p').eq(0).should('contain', 'Copyright');
});
it('renders for MyKV', () => {
// see: https://on.cypress.io/mounting-vue
cy.stub(Flavor, 'getFlavor').returns(myKvValues);
checkLinks('mykv.ch');
});
it('renders for MyDHA', () => {
// see: https://on.cypress.io/mounting-vue
cy.stub(Flavor, 'getFlavor').returns(dhaValues);
checkLinks('mydetailhandel.ch');
});
it('renders for MyDHF', () => {
// see: https://on.cypress.io/mounting-vue
cy.stub(Flavor, 'getFlavor').returns(dhfValues);
checkLinks('mydetailhandel.ch');
});
});
describe('<DefaultFooter />', () => {
it('renders for MySkillbox', () => {
cy.viewport('macbook-15');
// see: https://on.cypress.io/mounting-vue
cy.stub(Flavor, 'getFlavor').returns(defaultFlavorValues);
cy.mount(DynamicFooter, { props: { simple: false } });
cy.get('h5').should('contain', 'Wer sind wir');
});
it('renders for MyKV', () => {
cy.stub(Flavor, 'getFlavor').returns(myKvValues);
checkLinks('mykv.ch', false);
});
it('renders for MyDHA', () => {
cy.stub(Flavor, 'getFlavor').returns(dhaValues);
checkLinks('mydetailhandel.ch', false);
});
it('renders for MyDHF', () => {
cy.stub(Flavor, 'getFlavor').returns(dhfValues);
checkLinks('mydetailhandel.ch', false);
});
});

View File

@ -10,7 +10,8 @@
<cross class="close-button__icon" />
</div>
<router-view class="layout__content" />
<footer
<dynamic-footer
:simple="true"
class="layout__footer"
v-if="enableFooter"
/>
@ -18,7 +19,7 @@
</template>
<script lang="ts" setup>
import SimpleFooter from '@/layouts/SimpleFooter.vue';
import DynamicFooter from '@/layouts/DynamicFooter.vue';
import MyKvFooter from '@/layouts/MyKVFooter.vue';
import { defineAsyncComponent, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
@ -27,15 +28,6 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
const route = useRoute();
const router = useRouter();
const Footer = computed(() => {
switch (flavor.appFlavor) {
case 'my-kv':
return MyKvFooter;
default:
return SimpleFooter;
}
});
const enableFooter = computed(() => {
if (route.meta.hideFooter) {
return false;

View File

@ -48,7 +48,7 @@
>AGB</a
>
<a
:href="$flavor.supportLink"
href="https://myskillbox.ch/support"
target="_blank"
class="default-footer__link"
>Support</a