test: re-scope of Form.astro tests
This commit is contained in:
Ayo
parent
fdd1f7cf50
commit
c6dc470b07
1 changed files with 28 additions and 189 deletions
|
|
@ -1,15 +1,19 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import { getComponentOutput } from 'astro-component-tester';
|
import { getComponentOutput } from 'astro-component-tester';
|
||||||
|
|
||||||
describe('Form.astro test', async () => {
|
describe('Form.astro test', () => {
|
||||||
let component;
|
let component;
|
||||||
|
|
||||||
describe('Input: formGroup is empty', () => {
|
beforeEach(() => {
|
||||||
it('Should handle empty formGroup prop', async () => {
|
component = undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('INPUT: formGroups', () => {
|
||||||
|
it('Should handle undefined formGroups prop', async () => {
|
||||||
// arrange
|
// arrange
|
||||||
const expectedResult = `<form></form>`;
|
const expectedResult = '<form></form>'
|
||||||
const props = { formGroup: undefined };
|
const props = { formGroups: undefined };
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
component = await getComponentOutput('./Form.astro', props);
|
||||||
|
|
||||||
// act
|
// act
|
||||||
const actualResult = cleanString(component.html);
|
const actualResult = cleanString(component.html);
|
||||||
|
|
@ -18,11 +22,11 @@ describe('Form.astro test', async () => {
|
||||||
expect(actualResult).to.contain(expectedResult);
|
expect(actualResult).to.contain(expectedResult);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Should handle empty controls', async () => {
|
it('Should handle empty formGroups prop', async () => {
|
||||||
// arrange
|
// arrange
|
||||||
const expectedResult = `<form></form>`;
|
const expectedResult = '<form></form>'
|
||||||
const props = { formGroup: { controls: [] } };
|
const props = { formGroups: [] };
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
component = await getComponentOutput('./Form.astro', props);
|
||||||
|
|
||||||
// act
|
// act
|
||||||
const actualResult = cleanString(component.html);
|
const actualResult = cleanString(component.html);
|
||||||
|
|
@ -30,193 +34,28 @@ describe('Form.astro test', async () => {
|
||||||
// assert
|
// assert
|
||||||
expect(actualResult).to.contain(expectedResult);
|
expect(actualResult).to.contain(expectedResult);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
describe('Label tests', () => {
|
it('Should render a fieldset for each form group', async () => {
|
||||||
it('Should display text input with value and label positioned to the left', async () => {
|
|
||||||
// arrange
|
// arrange
|
||||||
const name = 'fake-control';
|
const expectedCount = 3;
|
||||||
const value = 'fake-value';
|
const element = /<fieldset>/g;
|
||||||
const label = 'fake-label';
|
const fakeFormGroup = {
|
||||||
const labelPosition = 'left';
|
controls: [{
|
||||||
const fakeControl = { name, value, label, labelPosition };
|
type: 'checkbox',
|
||||||
const expectedResult = `<form><div><labelfor="${name}">${label}</label><inputname="${name}"id="${name}"value="${value}"></div></form>`;
|
name: 'fake-checkbox',
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
label: 'FAKE CHECKBOX'
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
}]
|
||||||
|
}
|
||||||
|
const props = { formGroups: Array(expectedCount).fill(fakeFormGroup) };
|
||||||
|
component = await getComponentOutput('./Form.astro', props);
|
||||||
|
|
||||||
// act
|
// act
|
||||||
const actualResult = cleanString(component.html);
|
const actualResult = cleanString(component.html);
|
||||||
|
const matches = actualResult.match(element) || [];
|
||||||
|
|
||||||
// assert
|
// assert
|
||||||
expect(actualResult).to.contain(expectedResult);
|
expect(matches.length).to.equal(expectedCount);
|
||||||
});
|
})
|
||||||
it('Should display text input with value and label positioned to the right', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const value = 'fake-value';
|
|
||||||
const label = 'fake-label';
|
|
||||||
const labelPosition = 'right';
|
|
||||||
const fakeControl = { name, value, label, labelPosition };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"value="${value}"><labelfor="${name}">${label}</label></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Text Control tests', () => {
|
|
||||||
it('Should display text input by default', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const fakeControl = { name };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display text input with value', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const value = 'fake-value';
|
|
||||||
const fakeControl = { name, value };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"value="${value}"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display text input with value and label', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const value = 'fake-value';
|
|
||||||
const label = 'fake-label';
|
|
||||||
const fakeControl = { name, value, label };
|
|
||||||
const expectedResult = `<form><div><labelfor="${name}">${label}</label><inputname="${name}"id="${name}"value="${value}"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Checkbox Control tests', () => {
|
|
||||||
it('Should display a checkbox', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'checkbox';
|
|
||||||
const fakeControl = { name, type };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"type="${type}"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display a checkbox with value checked', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'checkbox';
|
|
||||||
const value = 'checked';
|
|
||||||
const fakeControl = { name, type, value };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"type="${type}"value="${value}"checked="true"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display a checkbox with value checked and label', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'checkbox';
|
|
||||||
const value = 'checked';
|
|
||||||
const label = 'fake-label';
|
|
||||||
const fakeControl = { name, type, value, label };
|
|
||||||
const expectedResult = `<form><div><labelfor="fake-control">fake-label</label><inputname="${name}"id="${name}"type="${type}"value="${value}"checked="true"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Radio button tests', () => {
|
|
||||||
it('Should display a radio button', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'radio';
|
|
||||||
const fakeControl = { name, type };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"type="${type}"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display a radio button with value checked', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'radio';
|
|
||||||
const value = 'checked';
|
|
||||||
const fakeControl = { name, type, value };
|
|
||||||
const expectedResult = `<form><div><inputname="${name}"id="${name}"type="${type}"value="${value}"checked="true"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
it('Should display a radio button with value checked and label', async () => {
|
|
||||||
// arrange
|
|
||||||
const name = 'fake-control';
|
|
||||||
const type = 'radio';
|
|
||||||
const value = 'checked';
|
|
||||||
const label = 'fake-label';
|
|
||||||
const fakeControl = { name, type, value, label };
|
|
||||||
const expectedResult = `<form><div><labelfor="fake-control">fake-label</label><inputname="${name}"id="${name}"type="${type}"value="${value}"checked="true"></div></form>`;
|
|
||||||
const props = { formGroup: { controls: [fakeControl] } };
|
|
||||||
component = await getComponentOutput('./src/Form.astro', props);
|
|
||||||
|
|
||||||
// act
|
|
||||||
const actualResult = cleanString(component.html);
|
|
||||||
|
|
||||||
// assert
|
|
||||||
expect(actualResult).to.contain(expectedResult);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue