test(packages/form): Added some tests for Field and FieldSet components (#119)

packages/form/test/Field.astro.test.js

@@ -0,0 +1,79 @@
+import { expect } from 'chai';
+import { beforeEach, describe, it } from 'mocha';
+import { getComponentOutput } from 'astro-component-tester';
+
+describe('Field.astro test', () => {
+	let component;
+
+	beforeEach(() => {
+		component = undefined;
+	});
+
+	it('Should render field with label', async () => {
+		// arrange
+		const expectedLabel = 'TestLabel';
+		const props = {
+			control: {
+				label: expectedLabel,
+				name: 'username',
+				labelPosition: 'left',
+			},
+			showValidationHints: false,
+		};
+
+		// act
+		component = await getComponentOutput('./components/Field.astro', props);
+		const actualResult = cleanString(component.html);
+
+		// assert
+		expect(actualResult).to.contain(expectedLabel);
+	});
+
+	it('Should render only label', async () => {
+		// arrange
+		const expectedLabel = 'TestLabel';
+		const props = {
+			control: {
+				label: expectedLabel,
+				name: 'username',
+				labelPosition: 'left',
+			},
+			showValidationHints: false,
+			showOnlyLabel: true,
+		};
+
+		// act
+		component = await getComponentOutput('./components/Field.astro', props);
+		const actualResult = cleanString(component.html);
+
+		// assert
+		expect(actualResult).to.contain(expectedLabel);
+		expect(actualResult).to.not.contain('input');
+	});
+
+	it('Should render required fields with asterisk in label when showValidationHints is true', async () => {
+		// arrange
+		const expectedLabel = 'TestLabel';
+		const props = {
+			control: {
+				label: expectedLabel,
+				name: 'username',
+				labelPosition: 'left',
+				validators: ['validator-required'],
+			},
+			showValidationHints: true,
+		};
+
+		// act
+		component = await getComponentOutput('./components/Field.astro', props);
+		const actualResult = cleanString(component.html);
+
+		// assert
+		expect(actualResult).to.contain(expectedLabel);
+		expect(actualResult).to.contain('*');
+	});
+});
+
+function cleanString(str) {
+	return str.replace(/\s/g, '');
+}

packages/form/test/FieldSet.astro.test.js

@@ -0,0 +1,42 @@
+import { expect } from 'chai';
+import { beforeEach, describe, it } from 'mocha';
+import { getComponentOutput } from 'astro-component-tester';
+
+describe('FieldSet.astro test', () => {
+	let component;
+
+	const control = {
+		name: 'test',
+		label: 'Test',
+		type: 'text',
+		labelPosition: 'left',
+	};
+
+	beforeEach(() => {
+		component = undefined;
+	});
+
+	it('Should render fieldset tag', async () => {
+		// arrange
+		const expectedName = 'TestFieldSet';
+		const props = {
+			group: {
+				name: expectedName,
+				controls: [control],
+			},
+			showValidationHints: false,
+		};
+
+		// act
+		component = await getComponentOutput('./components/FieldSet.astro', props);
+		const actualResult = cleanString(component.html);
+
+		// assert
+		expect(actualResult).to.contain('<fieldset', 'fieldset tag not found');
+		expect(actualResult).to.contain(`<legend>${expectedName}</legend>`);
+	});
+});
+
+function cleanString(str) {
+	return str.replace(/\s/g, '');
+}