generated from Seekra/repository-template
Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
17072dbc5a
|
|||
|
1d90612bbd
|
|||
|
f322f19f9e
|
|||
|
d0dc66940a
|
|||
|
8ff26f4bb8
|
|||
|
12f67f17ed
|
|||
|
8850732ec6
|
|||
|
940eb84202
|
|||
|
c2a9d80cf5
|
|||
|
8fc2b14ef1
|
|||
|
6731b1981b
|
|||
|
4584fd92d1
|
|||
|
42bd37e9e4
|
|||
|
d9906c782f
|
|||
|
c1ce580ed7
|
|||
|
e0419d57cc
|
|||
|
751b2663b3
|
|||
|
c53d98a95c
|
|||
|
4d612f2c19
|
|||
|
4d8521c130
|
+1
-2
@@ -17,11 +17,10 @@
|
|||||||
"vue-router": "^5.0.6"
|
"vue-router": "^5.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/test-utils": "^2.4.6",
|
|
||||||
"@vitejs/plugin-vue": "^6.0.6",
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
"jsdom": "^29.1.1",
|
"jsdom": "^29.1.1",
|
||||||
"vite": "^8.0.10",
|
"vite": "^8.0.10",
|
||||||
"vite-plugin-html": "^3.2.2",
|
"vite-plugin-html": "^3.2.2",
|
||||||
"vitest": "^4.1.7"
|
"vitest": "^4.1.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-5
@@ -42,18 +42,15 @@ watch(colorScheme, val => updateColorScheme(val))
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#app-wrapper {
|
.main-content {
|
||||||
--main-content-padding-x: 30px;
|
--main-content-padding-x: 30px;
|
||||||
--main-content-padding-y: 40px;
|
--main-content-padding-y: 40px;
|
||||||
--main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
|
--main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 48rem) {
|
@media (max-width: 48rem) {
|
||||||
#app-wrapper {
|
.main-content {
|
||||||
--main-content-padding-x: 15px;
|
--main-content-padding-x: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,114 +0,0 @@
|
|||||||
/*
|
|
||||||
Copyright 2026 Seekra
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { expect, test, describe, vi, beforeEach } from 'vitest';
|
|
||||||
import { mount } from '@vue/test-utils';
|
|
||||||
import LanguageSwitchButton from '../LanguageSwitchButton.vue';
|
|
||||||
import { loadLanguage } from '@/i18n';
|
|
||||||
|
|
||||||
vi.mock('@/i18n', () => ({
|
|
||||||
loadLanguage: vi.fn(() => Promise.resolve()),
|
|
||||||
LANGUAGES_RTL: ['ar', 'he'],
|
|
||||||
SUPPORTED_LANGUAGES: ['en', 'de', 'ar']
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('vue-i18n', () => ({
|
|
||||||
useI18n: () => ({
|
|
||||||
t: (key) => key,
|
|
||||||
locale: { value: 'de' }
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('@/features/icons/components/Icon.vue', () => ({
|
|
||||||
default: {
|
|
||||||
name: 'Icon',
|
|
||||||
template: '<span>Icon</span>'
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('LanguageSwitchButton.vue', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
localStorage.clear();
|
|
||||||
document.documentElement.lang = '';
|
|
||||||
document.documentElement.dir = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders correctly with initial state closed', () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-button').exists()).toBe(true);
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
expect(wrapper.find('.language-button').attributes('aria-expanded')).toBe('false');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('opens the dropdown when language button is clicked', async () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
const button = wrapper.find('.language-button');
|
|
||||||
|
|
||||||
await button.trigger('click');
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(true);
|
|
||||||
expect(button.attributes('aria-expanded')).toBe('true');
|
|
||||||
});
|
|
||||||
|
|
||||||
const languageTestCases = [
|
|
||||||
{ code: 'en', expectedDir: 'ltr' },
|
|
||||||
{ code: 'de', expectedDir: 'ltr' },
|
|
||||||
{ code: 'ar', expectedDir: 'rtl' }
|
|
||||||
];
|
|
||||||
|
|
||||||
test.for(languageTestCases)('selectLanguage($code) sets localStorage, html attributes and changes layout direction to $expectedDir', async ({ code, expectedDir }) => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
|
|
||||||
await wrapper.find('.language-button').trigger('click');
|
|
||||||
|
|
||||||
const options = wrapper.findAll('.language-dropdown li');
|
|
||||||
const optionToClick = options.find(opt => opt.text().includes(code));
|
|
||||||
|
|
||||||
await optionToClick.trigger('click');
|
|
||||||
|
|
||||||
expect(loadLanguage).toHaveBeenCalledWith(code);
|
|
||||||
expect(localStorage.getItem('locale')).toBe(code);
|
|
||||||
expect(document.documentElement.lang).toBe(code);
|
|
||||||
expect(document.documentElement.dir).toBe(expectedDir);
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('closes the dropdown when clicking outside the component', async () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton, {
|
|
||||||
attachTo: document.body
|
|
||||||
});
|
|
||||||
|
|
||||||
await wrapper.find('.language-button').trigger('click');
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(true);
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 0));
|
|
||||||
|
|
||||||
const externalDiv = document.createElement('div');
|
|
||||||
document.body.appendChild(externalDiv);
|
|
||||||
|
|
||||||
const clickEvent = new MouseEvent('click', { bubbles: true });
|
|
||||||
externalDiv.dispatchEvent(clickEvent);
|
|
||||||
|
|
||||||
await wrapper.vm.$nextTick();
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
|
|
||||||
wrapper.unmount();
|
|
||||||
externalDiv.remove();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -42,7 +42,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 18px var(--main-content-padding-x);
|
padding: 18px 40px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -73,8 +73,7 @@ const submitSearch = function () {
|
|||||||
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
|
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
|
||||||
padding: var(--padding);
|
padding: var(--padding);
|
||||||
padding-left: var(--padding-left);
|
padding-left: var(--padding-left);
|
||||||
width: 100%;
|
width: calc(100% - var(--padding-left));
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-wrapper input {
|
.search-wrapper input {
|
||||||
@@ -84,7 +83,6 @@ const submitSearch = function () {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
|
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
|
||||||
padding-left: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-button {
|
.search-button {
|
||||||
|
|||||||
@@ -67,10 +67,9 @@ const submitSearch = function () {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slogan {
|
.slogan{
|
||||||
margin-top: 1rem;
|
margin: 0;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user