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

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 strikeThroughMenuButtonSelector = '.js-strike-btn';

const content = 'test';
const org = 'MicrosoftDocs';
const repo = 'azure-docs-pr';
const path = 'articles/azure-functions/create-first-function-vs-code-csharp.md';

describe('docs', () => {
	beforeEach(async () => {
		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', 'docs');
		editorElement.setAttribute('content', content);
		editorElement.setAttribute('org', org);
		editorElement.setAttribute('repo', repo);
		editorElement.setAttribute('path', path);
		document.body.appendChild(editorElement);
		await setTimeoutAsync(500);
	});

	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(content);
	});
	it('buttons should be hidden', async () => {
		const menu = editorElement.querySelector(menuSelector);
		expect(menu).toBeTruthy();
		const headingMenuButton = editorElement.querySelector(headingMenuButtonSelector);
		expect(headingMenuButton).toBeTruthy();
		const linkMenuButton = editorElement.querySelector(linkMenuButtonSelector);
		expect(linkMenuButton).toBeTruthy();
		const blockquoteMenuButton = editorElement.querySelector(blockquoteMenuButtonSelector);
		expect(blockquoteMenuButton).toBeTruthy();
		const imageMenuButton = editorElement.querySelector(imageMenuButtonSelector);
		expect(imageMenuButton).toBeTruthy();
		const hrMenuButton = editorElement.querySelector(hrMenuButtonSelector);
		expect(hrMenuButton).toBeFalsy();
		const strikeThroughMenuButton = editorElement.querySelector(strikeThroughMenuButtonSelector);
		expect(strikeThroughMenuButton).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();
	});
});
