/* eslint-disable @typescript-eslint/no-unsafe-return */
import '../../src/docs-markdown-editor';
import { DocsMarkdownEditor } from '../../src/docs-markdown-editor';

let editorElement: HTMLElement;
const menuSelector = '.js-editor-menu';
const boldMenuButtonSelector = '.js-bold-btn';
const headingMenuButtonSelector = '.js-heading-btn';
const linkMenuButtonSelector = '.js-insert-link-btn';
const blockquoteMenuButtonSelector = '.js-blockquote-btn';
const imageMenuButtonSelector = '.js-insert-image-btn';
const hrMenuButtonSelector = '.js-horizontal-rule-btn';

const text = 'test';
describe('renewal assessments', () => {
	beforeEach(() => {
		const mockIntersectionObserver = jest.fn();
		mockIntersectionObserver.mockReturnValue({
			observe: () => null as any,
			unobserve: () => null as any,
			disconnect: () => null as any
		});
		window.IntersectionObserver = mockIntersectionObserver;

		editorElement = window.document.createElement('docs-markdown-editor');
		editorElement.setAttribute('mode', 'renewal-assessments');
		editorElement.setAttribute('content', text);
		document.body.appendChild(editorElement);
	});

	afterEach(() => {
		document.body.getElementsByTagName('docs-markdown-editor')[0].remove();
	});

	it('element displays', async () => {
		const editor = document.body.getElementsByTagName(
			'docs-markdown-editor'
		)[0] as DocsMarkdownEditor;
		expect(editor.content).toEqual(text);
	});
	it('buttons should be hidden', async () => {
		const menu = editorElement.querySelector(menuSelector);
		expect(menu).toBeTruthy();
		const headingMenuButton = editorElement.querySelector(headingMenuButtonSelector);
		expect(headingMenuButton).toBeFalsy();
		const linkMenuButton = editorElement.querySelector(linkMenuButtonSelector);
		expect(linkMenuButton).toBeFalsy();
		const blockquoteMenuButton = editorElement.querySelector(blockquoteMenuButtonSelector);
		expect(blockquoteMenuButton).toBeFalsy();
		const imageMenuButton = editorElement.querySelector(imageMenuButtonSelector);
		expect(imageMenuButton).toBeFalsy();
		const hrMenuButton = editorElement.querySelector(hrMenuButtonSelector);
		expect(hrMenuButton).toBeFalsy();
	});
	it('aria-label displays', async () => {
		const menu = editorElement.querySelector(menuSelector);
		expect(menu).toBeTruthy();
		const boldquoteMenuButton = editorElement.querySelector(boldMenuButtonSelector) as HTMLElement;
		boldquoteMenuButton.focus();
		expect(boldquoteMenuButton.getAttribute('aria-label')).toBeTruthy();
	});
	it('focus-visible displays', async () => {
		const menu = editorElement.querySelector(menuSelector);
		expect(menu).toBeTruthy();
		const boldquoteMenuButton = editorElement.querySelector(boldMenuButtonSelector) as HTMLElement;
		boldquoteMenuButton.focus();
		expect(boldquoteMenuButton.classList.contains('focus-visible')).toBeTruthy();
	});
});
