Commit 4a6d982a authored by Paul Slaughter's avatar Paul Slaughter

Polish responsive_app_spec and menu-expanded check

- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63687#note_597484250
parent cea8f9aa
export const hasMenuExpanded = () => { export const hasMenuExpanded = () =>
const header = document.querySelector('.header-content'); Boolean(document.querySelector('.header-content.menu-expanded'));
return Boolean(header?.classList.contains('menu-expanded'));
};
...@@ -8,6 +8,11 @@ import { resetMenuItemsActive } from '~/nav/utils/reset_menu_items_active'; ...@@ -8,6 +8,11 @@ import { resetMenuItemsActive } from '~/nav/utils/reset_menu_items_active';
import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue'; import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
import { TEST_NAV_DATA } from '../mock_data'; import { TEST_NAV_DATA } from '../mock_data';
const HTML_HEADER_CONTENT = '<div class="header-content"></div>';
const HTML_MENU_EXPANDED = '<div class="menu-expanded"></div>';
const HTML_HEADER_WITH_MENU_EXPANDED =
'<div></div><div class="header-content menu-expanded"></div>';
describe('~/nav/components/responsive_app.vue', () => { describe('~/nav/components/responsive_app.vue', () => {
let wrapper; let wrapper;
...@@ -55,9 +60,9 @@ describe('~/nav/components/responsive_app.vue', () => { ...@@ -55,9 +60,9 @@ describe('~/nav/components/responsive_app.vue', () => {
it.each` it.each`
bodyHtml | expectation bodyHtml | expectation
${''} | ${false} ${''} | ${false}
${'<div class="header-content"></div>'} | ${false} ${HTML_HEADER_CONTENT} | ${false}
${'<div class="menu-expanded"></div>'} | ${false} ${HTML_MENU_EXPANDED} | ${false}
${'<div></div><div class="header-content menu-expanded"></div>}'} | ${true} ${HTML_HEADER_WITH_MENU_EXPANDED} | ${true}
`( `(
'with responsive toggle event and html set to $bodyHtml, responsive open = $expectation', 'with responsive toggle event and html set to $bodyHtml, responsive open = $expectation',
({ bodyHtml, expectation }) => { ({ bodyHtml, expectation }) => {
...@@ -93,7 +98,7 @@ describe('~/nav/components/responsive_app.vue', () => { ...@@ -93,7 +98,7 @@ describe('~/nav/components/responsive_app.vue', () => {
describe('with menu expanded in body', () => { describe('with menu expanded in body', () => {
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = '<div></div><div class="header-content menu-expanded"></div>'; document.body.innerHTML = HTML_HEADER_WITH_MENU_EXPANDED;
createComponent(); createComponent();
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment