mirror of https://github.com/chatwoot/chatwoot.git
feat: Support Dark mode for the widget (#4137)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>pull/4357/head
Sivin Varghese
2 years ago
committed by
GitHub
parent
3813b3b372
commit
caee9535f1
@ -1,2 +1,3 @@
|
||||
export const BUBBLE_DESIGN = ['standard', 'expanded_bubble'];
|
||||
export const WIDGET_DESIGN = ['standard', 'flat'];
|
||||
export const DARK_MODE = ['light', 'auto'];
|
||||
|
||||
@ -1,17 +1,52 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import DateSeparator from '../DateSeparator';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
import Vuex from 'vuex';
|
||||
import VueI18n from 'vue-i18n';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
const localVue = createLocalVue();
|
||||
import i18n from 'dashboard/i18n';
|
||||
localVue.use(Vuex);
|
||||
localVue.use(VueI18n);
|
||||
|
||||
describe('DateSeparator', () => {
|
||||
test('matches snapshot', () => {
|
||||
const wrapper = mount(DateSeparator, {
|
||||
const i18nConfig = new VueI18n({
|
||||
locale: 'en',
|
||||
messages: i18n,
|
||||
});
|
||||
|
||||
describe('dateSeparator', () => {
|
||||
let store = null;
|
||||
let actions = null;
|
||||
let modules = null;
|
||||
let dateSeparator = null;
|
||||
|
||||
beforeEach(() => {
|
||||
actions = {};
|
||||
|
||||
modules = {
|
||||
auth: {
|
||||
getters: {
|
||||
'appConfig/darkMode': () => 'light',
|
||||
},
|
||||
},
|
||||
};
|
||||
store = new Vuex.Store({
|
||||
actions,
|
||||
modules,
|
||||
});
|
||||
|
||||
dateSeparator = shallowMount(DateSeparator, {
|
||||
store,
|
||||
localVue,
|
||||
propsData: {
|
||||
date: 'Nov 18, 2019',
|
||||
},
|
||||
mocks: {
|
||||
$t: () => {},
|
||||
},
|
||||
i18n: i18nConfig,
|
||||
mixins: [darkModeMixin],
|
||||
});
|
||||
expect(wrapper.vm).toBeTruthy();
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('date separator snapshot', () => {
|
||||
expect(dateSeparator.vm).toBeTruthy();
|
||||
expect(dateSeparator.element).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters({ darkMode: 'appConfig/darkMode' }),
|
||||
},
|
||||
methods: {
|
||||
$dm(light, dark) {
|
||||
if (this.darkMode === 'light') {
|
||||
return light;
|
||||
}
|
||||
return light + ' ' + dark;
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,41 @@
|
||||
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||
import darkModeMixin from '../darkModeMixin';
|
||||
import Vuex from 'vuex';
|
||||
const localVue = createLocalVue();
|
||||
localVue.use(Vuex);
|
||||
|
||||
const darkModeValues = ['light', 'auto'];
|
||||
|
||||
describe('darkModeMixin', () => {
|
||||
let getters;
|
||||
let store;
|
||||
beforeEach(() => {
|
||||
getters = {
|
||||
'appConfig/darkMode': () => darkModeValues[0],
|
||||
};
|
||||
store = new Vuex.Store({ getters });
|
||||
});
|
||||
|
||||
it('if light theme', () => {
|
||||
const Component = {
|
||||
render() {},
|
||||
mixins: [darkModeMixin],
|
||||
};
|
||||
const wrapper = shallowMount(Component, { store, localVue });
|
||||
expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100');
|
||||
});
|
||||
|
||||
it('if auto theme', () => {
|
||||
getters = {
|
||||
'appConfig/darkMode': () => darkModeValues[2],
|
||||
};
|
||||
store = new Vuex.Store({ getters });
|
||||
|
||||
const Component = {
|
||||
render() {},
|
||||
mixins: [darkModeMixin],
|
||||
};
|
||||
const wrapper = shallowMount(Component, { store, localVue });
|
||||
expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100 bg-600');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue