@markuplint/rules 3.8.0 → 3.9.0

package/test/required-attr/index.spec.js

@@ -0,0 +1,414 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/required-attr').default;
+
+test('warns if specified attribute is not appeared', async () => {
+	const { violations } = await mlRuleTest(rule, '<img src="/path/to/image.png">', {
+		nodeRule: [
+			{
+				selector: 'img',
+				rule: {
+					severity: 'error',
+					value: 'alt',
+				},
+			},
+		],
+	});
+
+	expect(violations).toStrictEqual([
+		{
+			col: 1,
+			line: 1,
+			message: 'The "img" element expects the "alt" attribute',
+			raw: '<img src="/path/to/image.png">',
+			severity: 'error',
+		},
+	]);
+});
+
+test('multiple required attributes', async () => {
+	const { violations } = await mlRuleTest(rule, '<img src="/path/to/image.png">', {
+		nodeRule: [
+			{
+				selector: 'img',
+				rule: {
+					severity: 'error',
+					value: ['width', 'height', 'alt'],
+				},
+			},
+		],
+	});
+
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			message: 'The "img" element expects the "width" attribute',
+			line: 1,
+			col: 1,
+			raw: '<img src="/path/to/image.png">',
+		},
+		{
+			severity: 'error',
+			message: 'The "img" element expects the "height" attribute',
+			line: 1,
+			col: 1,
+			raw: '<img src="/path/to/image.png">',
+		},
+		{
+			severity: 'error',
+			message: 'The "img" element expects the "alt" attribute',
+			line: 1,
+			col: 1,
+			raw: '<img src="/path/to/image.png">',
+		},
+	]);
+});
+
+test('"alt" attribute on "<area>" is required only if the href attribute is used', async () => {
+	expect((await mlRuleTest(rule, '<area href="path/to">')).violations.length).toBe(1);
+
+	expect((await mlRuleTest(rule, '<area href="path/to" alt="alternate text">')).violations.length).toBe(0);
+});
+
+test('At least one of data and type must be defined to <object>.', async () => {
+	expect((await mlRuleTest(rule, '<object data="https://example.com/data">')).violations.length).toBe(0);
+
+	expect((await mlRuleTest(rule, '<object type="XXXX_YYYY_ZZZZ">')).violations.length).toBe(0);
+
+	expect((await mlRuleTest(rule, '<object>')).violations.length).toBe(2);
+});
+
+test('The ancestors of the <source> element.', async () => {
+	expect((await mlRuleTest(rule, '<audio><source></audio>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 8,
+			message: 'The "source" element expects the "src" attribute',
+			raw: '<source>',
+		},
+	]);
+
+	expect((await mlRuleTest(rule, '<video><source></video>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 8,
+			message: 'The "source" element expects the "src" attribute',
+			raw: '<source>',
+		},
+	]);
+
+	expect((await mlRuleTest(rule, '<picture><source></picture>')).violations).toStrictEqual([]);
+});
+
+test('with value requirement', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<img />', {
+				rule: [
+					{
+						name: 'decoding',
+						value: 'async',
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "src" attribute',
+			raw: '<img />',
+		},
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "decoding" attribute',
+			raw: '<img />',
+		},
+	]);
+
+	expect(
+		(
+			await mlRuleTest(rule, '<img decoding="sync" />', {
+				rule: [
+					{
+						name: 'decoding',
+						value: 'async',
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "src" attribute',
+			raw: '<img decoding="sync" />',
+		},
+		{
+			severity: 'error',
+			line: 1,
+			col: 16,
+			message: 'The "decoding" attribute expects "async"',
+			raw: 'sync',
+		},
+	]);
+});
+
+test('with value requirement (regex)', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<img src="./path/to" /><img src="/path/to" />', {
+				rule: [
+					{
+						name: 'src',
+						value: '/^\\/|^https:\\/\\//i',
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 11,
+			message: 'The "src" attribute expects "/^\\/|^https:\\/\\//i"',
+			raw: './path/to',
+		},
+	]);
+
+	expect(
+		(
+			await mlRuleTest(rule, '<a rel="noreferrer noopener">link</a><a rel="noreferrernoopener">link2</a>', {
+				rule: [
+					{
+						name: 'rel',
+						value: '/(?<![^\\s]+)noreferrer(?![^\\s]+)/',
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 46,
+			message: 'The "rel" attribute expects "/(?<![^\\s]+)noreferrer(?![^\\s]+)/"',
+			raw: 'noreferrernoopener',
+		},
+	]);
+});
+
+test('nodeRules', async () => {
+	const { violations } = await mlRuleTest(rule, '<img src="path/to.svg" alt="text" />', {
+		nodeRule: [
+			{
+				selector: 'img[src$=.svg]',
+				rule: 'role',
+			},
+		],
+	});
+
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "role" attribute',
+			raw: '<img src="path/to.svg" alt="text" />',
+		},
+	]);
+});
+
+test('Foreign element', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<svg></svg>', {
+				nodeRule: [
+					{
+						selector: 'svg',
+						rule: {
+							severity: 'error',
+							value: 'viewBox',
+						},
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "svg" element expects the "viewBox" attribute',
+			raw: '<svg>',
+		},
+	]);
+});
+
+test('svg', async () => {
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<svg>
+					<circle cx="50" cy="50" r="40" />
+					<circle cx="150" cy="50" r="4" />
+					<circle cx="5" cy="5" r="4" />
+					<circle />
+				</svg>
+				`,
+				{
+					nodeRule: [
+						{
+							selector: 'circle',
+							rule: ['cx', 'cy', 'r'],
+						},
+					],
+				},
+			)
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 5,
+			col: 6,
+			message: 'The "circle" element expects the "cx" attribute',
+			raw: '<circle />',
+		},
+		{
+			severity: 'error',
+			line: 5,
+			col: 6,
+			message: 'The "circle" element expects the "cy" attribute',
+			raw: '<circle />',
+		},
+		{
+			severity: 'error',
+			line: 5,
+			col: 6,
+			message: 'The "circle" element expects the "r" attribute',
+			raw: '<circle />',
+		},
+	]);
+});
+
+test('Pug', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, 'img', {
+				parser: {
+					'.*': '@markuplint/pug-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "src" attribute',
+			raw: 'img',
+		},
+	]);
+});
+
+test('Vue', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<template><img :src="src"></template>', {
+				parser: {
+					'.*': '@markuplint/vue-parser',
+				},
+			})
+		).violations.length,
+	).toBe(0);
+});
+
+test('React', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<img alt={alt} />', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "img" element expects the "src" attribute',
+			raw: '<img alt={alt} />',
+		},
+	]);
+
+	expect(
+		(
+			await mlRuleTest(rule, '<img {...props} />', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations,
+	).toStrictEqual([]);
+});
+
+test('custom element', async () => {
+	expect(
+		(
+			await mlRuleTest(rule, '<Link href="path/to"></Link>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+			})
+		).violations.length,
+	).toBe(0);
+
+	expect(
+		(
+			await mlRuleTest(rule, '<Link></Link>', {
+				parser: {
+					'.*': '@markuplint/jsx-parser',
+				},
+				nodeRule: [
+					{
+						selector: 'Link',
+						rule: ['href'],
+					},
+				],
+			})
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "Link" element expects the "href" attribute',
+			raw: '<Link>',
+		},
+	]);
+
+	expect((await mlRuleTest(rule, '<Link href="path/to"></Link>')).violations).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "link" element expects the "itemprop" attribute',
+			raw: '<Link href="path/to">',
+		},
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			message: 'The "link" element expects the "rel" attribute',
+			raw: '<Link href="path/to">',
+		},
+	]);
+});

package/test/required-element/index.spec.js

@@ -0,0 +1,188 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/required-element').default;
+
+describe('static', () => {
+	it('specifies to global rule', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><head></head></html>', {
+			rule: ['meta[charset="UTF-8"]'],
+		});
+		expect(violations).toStrictEqual([
+			{
+				severity: 'error',
+				line: 1,
+				col: 1,
+				raw: '<',
+				message: 'Require the "meta[charset="UTF-8"]" element',
+			},
+		]);
+	});
+
+	it('specifies to node rule', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><head></head></html>', {
+			nodeRule: [
+				{
+					selector: 'head',
+					rule: ['meta[charset="UTF-8"]'],
+				},
+			],
+		});
+		expect(violations).toStrictEqual([
+			{
+				severity: 'error',
+				line: 1,
+				col: 7,
+				raw: '<head>',
+				message: 'Require the "meta[charset="UTF-8"]" element',
+			},
+		]);
+	});
+});
+
+describe('dynamic', () => {
+	it('specifies to global rule', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><head>{variable}</head></html>', {
+			rule: ['meta[charset="UTF-8"]'],
+			parser: {
+				'.*': '@markuplint/jsx-parser',
+			},
+		});
+		expect(violations.length).toBe(0);
+	});
+
+	it('specifies to node rule', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><head>{variable}</head></html>', {
+			rule: ['meta[charset="UTF-8"]'],
+			parser: {
+				'.*': '@markuplint/jsx-parser',
+			},
+		});
+		expect(violations.length).toBe(0);
+	});
+});
+
+describe('React', () => {
+	it('native element', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><head><title>Title</title></head></html>', {
+			nodeRule: [
+				{
+					selector: 'head',
+					rule: ['meta[charset="UTF-8"]'],
+				},
+			],
+			parser: {
+				'.*': '@markuplint/jsx-parser',
+			},
+		});
+		expect(violations).toStrictEqual([
+			{
+				severity: 'error',
+				line: 1,
+				col: 7,
+				raw: '<head>',
+				message: 'Require the "meta[charset="UTF-8"]" element',
+			},
+		]);
+	});
+
+	it('custom element (Component)', async () => {
+		const { violations } = await mlRuleTest(rule, '<><Head><title>Title</title></Head></>', {
+			nodeRule: [
+				{
+					selector: 'head',
+					rule: ['meta[charset="UTF-8"]'],
+				},
+			],
+			parser: {
+				'.*': '@markuplint/jsx-parser',
+			},
+		});
+		expect(violations).toStrictEqual([]);
+	});
+});
+
+describe('Pretenders Option', () => {
+	it('Outer', async () => {
+		const { violations } = await mlRuleTest(rule, '<html><Head><title>Title</title></Head></html>', {
+			nodeRule: [
+				{
+					selector: 'head',
+					rule: ['meta[charset="UTF-8"]'],
+				},
+			],
+			parser: {
+				'.*': '@markuplint/jsx-parser',
+			},
+			pretenders: [
+				{
+					selector: 'Head',
+					as: 'head',
+				},
+			],
+		});
+		expect(violations).toStrictEqual([
+			{
+				severity: 'error',
+				line: 1,
+				col: 7,
+				raw: '<Head>',
+				message: 'Require the "meta[charset="UTF-8"]" element',
+			},
+		]);
+	});
+
+	it('Outer', async () => {
+		expect(
+			(
+				await mlRuleTest(rule, '<html><head><title>Title</title><Charset /></head></html>', {
+					nodeRule: [
+						{
+							selector: 'head',
+							rule: ['meta[charset="UTF-8"]'],
+						},
+					],
+					parser: {
+						'.*': '@markuplint/jsx-parser',
+					},
+				})
+			).violations,
+		).toStrictEqual([
+			{
+				severity: 'error',
+				line: 1,
+				col: 7,
+				message: 'Require the "meta[charset="UTF-8"]" element',
+				raw: '<head>',
+			},
+		]);
+		expect(
+			(
+				await mlRuleTest(rule, '<html><head><title>Title</title><Charset /></head></html>', {
+					nodeRule: [
+						{
+							selector: 'head',
+							rule: ['meta[charset="UTF-8"]'],
+						},
+					],
+					parser: {
+						'.*': '@markuplint/jsx-parser',
+					},
+					pretenders: [
+						{
+							selector: 'Charset',
+							as: {
+								element: 'meta',
+								attrs: [
+									{
+										name: 'charset',
+										value: 'UTF-8',
+									},
+								],
+							},
+						},
+					],
+				})
+			).violations,
+		).toStrictEqual([]);
+	});
+});

package/test/required-h1/index.spec.js

@@ -0,0 +1,69 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/required-h1').default;
+
+test('h1', async () => {
+	const { violations } = await mlRuleTest(rule, '<html><body>text</body></html>');
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			message: 'Require the "h1" element',
+			line: 1,
+			col: 1,
+			raw: '<',
+		},
+	]);
+});
+
+test('h1', async () => {
+	const { violations } = await mlRuleTest(rule, '<html><body><h1>text</h1></body></html>');
+	expect(violations.length).toBe(0);
+});
+
+test('h1', async () => {
+	const { violations } = await mlRuleTest(rule, '<html><body><h1>text</h1><h1>text</h1></body></html>');
+	expect(violations).toStrictEqual([
+		{
+			severity: 'error',
+			message: 'The "h1" element is duplicated',
+			line: 1,
+			col: 26,
+			raw: '<h1>',
+		},
+	]);
+});
+
+test('h1', async () => {
+	const { violations } = await mlRuleTest(rule, '<html><body><h1>text</h1><h1>text</h1></body></html>', {
+		rule: {
+			severity: 'error',
+			value: true,
+			options: {
+				'expected-once': false,
+			},
+		},
+	});
+	expect(violations.length).toBe(0);
+});
+
+test('h1', async () => {
+	const { violations } = await mlRuleTest(rule, '<div><h2>text</h2></div>');
+	expect(violations.length).toBe(0);
+});
+
+test('enable option "in-document-fragment"', async () => {
+	const { violations } = await mlRuleTest(rule, '<div><h2>text</h2></div>', {
+		rule: {
+			severity: 'error',
+			options: {
+				'in-document-fragment': true,
+			},
+		},
+	});
+	expect(violations.length).toBe(1);
+});
+
+test('Issue #57', async () => {
+	const { violations } = await mlRuleTest(rule, '');
+	expect(violations.length).toBe(0);
+});