const schema = require('./data/eds-c-autocomplete.schema.json');
const dataAttributesSchema = require('../eds-c-data-attributes/data/eds-c-data-attributes.schema.json');
const inputSchema = require('../eds-c-input/data/eds-c-input.schema.json');
const labelSchema = require('../eds-c-label/data/eds-c-label.schema.json');
const hintSchema = require('../eds-c-hint/data/eds-c-hint.schema.json');
const errorMessageSchema = require('../eds-c-error-message/data/eds-c-error-message.schema.json');
const buttonSchema = require('../eds-c-button/data/eds-c-button.schema.json');
const exampleJson = require('./data/eds-c-autocomplete.example.json');
const fs = require('fs');
const path = require('path');
const handlebars = require('handlebars');

const {findTemplates} = require('../../development/tests/templateLoader.js');
const { validateSchema } = require('../../development/tests/validate-schema');
findTemplates(['eds-c-autocomplete', 'eds-c-input', 'eds-c-label', 'eds-c-hint', 'eds-c-error-message', 'eds-c-button', 'eds-c-data-attributes']).load(handlebars);

const autocompleteTemplate = '{{> eds-c-autocomplete }}';
const compiledTemplate = handlebars.compile(autocompleteTemplate);
const renderedComponent = compiledTemplate(exampleJson);

describe('EDS Component Autocomplete', () => {
	test('docs file exists', () => {
		const exists = fs.existsSync(path.resolve(__dirname, 'docs.md'));
		expect(exists).toBe(true);
	});
});

describe('Autocomplete Schema Validation and Accessibility Test', () => {
	const {configureAxe, toHaveNoViolations} = require('jest-axe');
	expect.extend(toHaveNoViolations);

	const axe = configureAxe({
		rules: {
			region: {enabled: false},
			'aria-input-field-name': {enabled: false}
		}
	});

	test('Example data matches schema', () => {
		const valid = validateSchema(schema, exampleJson, [
			{ name: 'eds-c-data-attributes', schema: dataAttributesSchema },
			{ name: 'eds-c-input', schema: inputSchema },
			{ name: 'eds-c-label', schema: labelSchema },
			{ name: 'eds-c-hint', schema: hintSchema },
			{ name: 'eds-c-error-message', schema: errorMessageSchema },
			{ name: 'eds-c-button', schema: buttonSchema }
		]);
		expect(valid).toBeTruthy();
	});

	test('Template passes basic HTML accessibility', async () => {
		expect(await axe(renderedComponent)).toHaveNoViolations();
	});
});

describe('EDS Component Autocomplete render', () => {
	test('Template can be compiled and rendered', () => {
		document.body.innerHTML = renderedComponent;
		const container = document.querySelector('.eds-c-autocomplete');
		expect(container).not.toBeNull();
	});

	test('Input element is rendered', () => {
		document.body.innerHTML = renderedComponent;
		const input = document.querySelector('#autocomplete-input');
		expect(input).not.toBeNull();
		expect(input.getAttribute('type')).toBe('text');
	});

	test('Dropdown element is rendered', () => {
		document.body.innerHTML = renderedComponent;
		const dropdown = document.querySelector('.eds-c-autocomplete__dropdown');
		expect(dropdown).not.toBeNull();
	});
});