chore: Replace darkmode mixin with useDarkMode composable [CW-3474] (#9949)
# Pull Request Template ## Description Replaces darkModeMixin with the new useDarkMode composable and replaces wll usages of mixin the the composable in components and pages Fixes https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable ## Type of change Please delete options that are not relevant. - [x] New feature (non-breaking change which adds functionality) --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
@@ -1,24 +0,0 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters({ darkMode: 'appConfig/darkMode' }),
|
||||
prefersDarkMode() {
|
||||
const isOSOnDarkMode =
|
||||
this.darkMode === 'auto' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
return isOSOnDarkMode || this.darkMode === 'dark';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
$dm(light, dark) {
|
||||
if (this.darkMode === 'light') {
|
||||
return light;
|
||||
}
|
||||
if (this.darkMode === 'dark') {
|
||||
return dark;
|
||||
}
|
||||
return light + ' ' + dark;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,41 +0,0 @@
|
||||
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');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user