docbrown/app/javascript/actionsPanel/__tests__/initializeActionsPanelToggle.test.js
rhymes f9506affb5
Use faster JS selection methods (#11409)
* Add JS tips section to frontend documentation

* Replace document.getElementsByTagName('body') with document.body

* Replace querySelectorAll with faster selecting methods where appropriate

* Replace querySelector with faster selecting methods where appropriate

* Fix typo

* Fix forEach and getElementsByClassName

* Change querySelector* to faster methods in erb files

* Change querySelector* to faster methods in ruby files

* Fix runkit tag

* Various fixes

* Update app/assets/javascripts/initializers/initializeEllipsisMenu.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Update app/assets/javascripts/utilities/slideSidebar.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Commenting out flaky spec

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
2020-11-16 17:35:50 +01:00

54 lines
1.8 KiB
JavaScript

import initializeActionsPanel from '../initializeActionsPanelToggle';
describe('toggling the actions panel', () => {
describe('when the page is the article show page', () => {
document.body.innerHTML = `
<div class="mod-actions-menu"></div>
<div id="mod-actions-menu-btn-area"></div>
`;
const path = '/fakeuser/fake-article-slug-1d3a';
test('it should render the mod actions menu button', () => {
initializeActionsPanel(path);
expect(
document.querySelector(
`iframe#mod-container[src="${path}/actions_panel"]`,
),
).toBeDefined();
expect(
document.getElementsByClassName('mod-actions-menu-btn')[0],
).not.toBeNull();
expect(
document.getElementsByClassName('actions-menu-svg')[0],
).not.toBeNull();
});
test('it should have a click listener that toggles the appropriate classes', () => {
initializeActionsPanel(path);
const modContainer = document.getElementById('mod-container');
modContainer.contentWindow.document.write(
`<html><body><button class="close-actions-panel hidden"></body></html>`,
);
const modActionsMenu = document.getElementsByClassName(
'mod-actions-menu',
)[0];
const modActionsMenuBtn = document.getElementsByClassName(
'mod-actions-menu-btn',
)[0];
modActionsMenuBtn.click();
expect(modActionsMenu.classList.contains('showing')).toBeTruthy();
expect(modActionsMenuBtn.classList.contains('hidden')).toBeTruthy();
const panelDocument = modContainer.contentDocument;
const closeButton = panelDocument.getElementsByClassName(
'close-actions-panel',
)[0];
expect(closeButton.classList.contains('hidden')).toBeFalsy();
});
});
});