fonteva-design-guide
Version:
## Dev, Build and Test
363 lines (289 loc) • 15.1 kB
JavaScript
/**
* Created by alain on 8/25/2020.
*/
import { createElement } from 'lwc';
import INPUT_DATE from 'c/pfmInputDate';
let element;
beforeEach(() => {
// creates a custom html web component
element = createElement('c-pfm-input-date', {
is: INPUT_DATE
});
// date delimiters (e.g. '/' => 04/20/2020)
element.delimiter = '';
// date locale (e.g. uk, us, fr)
element.locale = '';
// minimum year in YYYY format (e.g. 1950)
element.minYear = '';
// maximum year in YYYY format (e.g. 1950)
element.maxYear = '';
// existing date in SF YYYY-MM-DD date format (e.g. 2020-04-20)
element.value = '';
});
afterEach(() => {
// The jsdom instance is shared across test cases in a single file so reset the DOM
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});
describe('CUSTOM DATE INPUT FIELD', () => {
describe('Positive test cases:', () => {
describe('Helper functions:', () => {
it('Strip all supported delimiters from "00_11-22/aa|bb" to give "001122aabb"', () => {
const testStr = '00_11-22/aa|bb';
const expectedOutput = '001122aabb';
document.body.appendChild(element);
const adjustedStr = element.removeDelimiters(testStr);
expect(adjustedStr).toEqual(expectedOutput);
});
it('Strip all non-digit inputs from "00_11-22/aa|bb" to give "001122"', () => {
const testStr = '00_11-22/aa|bb';
const expectedOutput = '001122';
document.body.appendChild(element);
const adjustedStr = element.sanitize(testStr);
expect(adjustedStr).toEqual(expectedOutput);
});
it('Add delimiters to "11221999" to give "11/22/1999"', () => {
const testDateStr = '11221999';
const testDelimiter = '/';
const expectedDateStr = '11/22/1999';
expect(element.addDelimiters(testDateStr, testDelimiter)).toEqual(expectedDateStr);
});
it('2021 is not a leap year', () => {
const testYear = 2021;
expect(element.isLeapYear(testYear)).toBeFalsy();
});
it('2020 is a leap year', () => {
const testYear = 2020;
expect(element.isLeapYear(testYear)).toBeTruthy();
});
it('Maximum day in January is 31', () => {
const maxDay = 31;
expect(element.getMaxDayInMonth(1)).toEqual(maxDay);
});
it('Maximum day in February is 29', () => {
const maxDay = 29;
expect(element.getMaxDayInMonth(2)).toEqual(maxDay);
});
it('Maximum day in April is 30', () => {
const maxDay = 30;
expect(element.getMaxDayInMonth(4)).toEqual(maxDay);
});
it('Date format for 4/12/2020 is invalid',()=>{
const testDate = '4/12/2020';
const validationStatus = element.validateDateFormat(testDate,'/','MMDDYYYY').status;
expect(validationStatus).toBeFalsy();
})
it('Get 12/20/2021 in the Salesforce format of 2021-12-20', () => {
element.fullDateSnapshot = '12/21/2021';
element.locale = 'us';
document.body.appendChild(element);
const expectedDate = '2021-12-21';
expect(element.getDateInSFFormat()).toEqual(expectedDate);
});
});
describe('Date field setup:', () => {
it('Set SF date (with default locale and delimiter) populates correctly in input field', () => {
element.value = '2000-6-4';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const expectedShownDateValue = '06/04/2000';
expect(inputField.value).toEqual(expectedShownDateValue);
});
it('Set delimiter appears twice in input field when existing date is complete', () => {
element.value = '2000-6-4';
// test the pipe character as a delimiter
element.delimiter = '|';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const numberOfDelimiters = inputField.value.match(/\|/g) ? inputField.value.match(/\|/g).length : 0;
const expectedNumberOfDelimiters = 2;
expect(numberOfDelimiters).toEqual(expectedNumberOfDelimiters);
});
it('Set date digits follow the MMDDYYYY format for set US locale', () => {
element.value = '2000-6-4';
element.locale = 'us';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const expectedRawDate = '06042000';
const actualRawDate = inputField.value.replace(/\D/g, '');
expect(actualRawDate).toEqual(expectedRawDate);
});
it('Set date digits follow the DDMMYYYY format for set UK locale', () => {
element.value = '2000-6-4';
element.locale = 'gb';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const expectedRawDate = '04062000';
const actualRawDate = inputField.value.replace(/\D/g, '');
expect(actualRawDate).toEqual(expectedRawDate);
});
it('Date input field placeholder digits follow the MMDDYYYY format for set US locale', () => {
element.locale = 'us';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const placeholder = inputField.getAttribute('placeholder');
const rawDateFormat = placeholder.replace(/\W/g, '');
const expectedRawDateFormat = 'MMDDYYYY';
expect(rawDateFormat).toEqual(expectedRawDateFormat);
});
it('Date input field placeholder digits follow the DDMMYYYY format for set UK locale', () => {
element.locale = 'gb';
document.body.appendChild(element);
const inputField = element.shadowRoot.querySelector('input');
const placeholder = inputField.getAttribute('placeholder');
const rawDateFormat = placeholder.replace(/\W/g, '');
const expectedRawDateFormat = 'DDMMYYYY';
expect(rawDateFormat).toEqual(expectedRawDateFormat);
});
});
describe('Mimic user input:', () => {
it('1 delimiter is added after 2 date digits', () => {
const testDate = '04';
const testDelimiter = '/';
expect(element.addDelimiters(testDate, testDelimiter)).toEqual('04/');
});
it('2 delimiters are added after 4 date digits', () => {
const testDate = '0420';
const testDelimiter = '/';
expect(element.addDelimiters(testDate, testDelimiter)).toEqual('04/20/');
});
});
});
describe('Negative test cases:', () => {
describe('Helper functions:',()=> {
it('Stripping all supported delimiters from an object literal {} returns null', () => {
const testStr = {};
document.body.appendChild(element);
const adjustedStr = element.removeDelimiters(testStr);
expect(adjustedStr).toBeNull();
});
it('Stripping all non-digit inputs from an object literal returns null', () => {
const testStr = {};
document.body.appendChild(element);
const adjustedStr = element.sanitize(testStr);
expect(adjustedStr).toBeNull();
});
it('Adding delimiters to an object literal {} returns null', () => {
const testDateStr = {};
const testDelimiter = '/';
expect(element.addDelimiters(testDateStr, testDelimiter)).toBeNull();
});
it('Object literal {} returns null when checked for a leap year', () => {
const testYear = {};
expect(element.isLeapYear(testYear)).toBeNull();
});
it('Maximum day in an object literal {} is null', () => {
const month = {};
expect(element.getMaxDayInMonth(month)).toBeNull();
});
it('Validating date format for an object literal {} returns null',()=>{
const testDate = {};
const validationStatus = element.validateDateFormat(testDate,'/','MMDDYYYY').status;
expect(validationStatus).toBeNull();
})
it('Get null in the Salesforce format of YYYY-MM-DD when date input is 12/21/202 (incomplete)', () => {
element.fullDateSnapshot = '12/21/203';
element.locale = 'us';
document.body.appendChild(element);
expect(element.getDateInSFFormat()).toBeNull();
});
})
describe('Date field setup:', () => {
it('Set minimum year and maximum year both adjust to current year when minimum year is > then maximum year', () => {
element.minYear = 2000;
element.maxYear = 1999;
document.body.appendChild(element);
if (element.chosenMinYear !== element.chosenMaxYear) {
throw Error('Test failed. Both minimum and maximum years should be the same');
}
const currentYear = new Date().getFullYear();
const adjustedYear = (element.chosenMinYear = element.chosenMaxYear);
expect(adjustedYear).toEqual(currentYear);
});
it('Set minimum year adjusts to current year when minimum year is set in non-digits', () => {
element.minYear = 'TwoThousandAndOne';
document.body.appendChild(element);
const currentYear = new Date().getFullYear();
expect(element.chosenMinYear).toEqual(currentYear);
});
it('Set maximum year adjusts to current year when maximum year is set in non-digits', () => {
element.maxYear = 'TwoThousandAndOne';
document.body.appendChild(element);
const currentYear = new Date().getFullYear();
expect(element.chosenMaxYear).toEqual(currentYear);
});
it('Unset minimum year adjusts to 1900', () => {
element.minYear = null;
document.body.appendChild(element);
const defaultMinYear = 1900;
expect(element.chosenMinYear).toEqual(defaultMinYear);
});
it('Unset maximum year adjusts to 2100', () => {
element.maxYear = null;
document.body.appendChild(element);
const defaultMaxYear = 2100;
expect(element.chosenMaxYear).toEqual(defaultMaxYear);
});
});
describe('Mimic user input:', () => {
it('Adjust month to 01 when inputted month is < 01', () => {
const testMonth = '00';
const minMonth = '01';
const adjustedMonth = element.adjustMonth(testMonth).month;
expect(adjustedMonth).toEqual(minMonth);
});
it('Adjust month to 12 when inputted month is > 12', () => {
const testMonth = '13';
const maxMonth = '12';
const adjustedMonth = element.adjustMonth(testMonth).month;
expect(adjustedMonth).toEqual(maxMonth);
});
it('Adjust day to 01 when inputted day is < 01', () => {
const testDay = '00';
const testMonth = '01';
const minDay = '01';
const adjustedDay = element.adjustDay(testDay, testMonth).day;
expect(adjustedDay).toEqual(minDay);
});
it('Adjust day to the maximum for its month when it exceeds that maximum', () => {
const testDay = '31';
const testMonth = '04';
const adjustedDay = element.adjustDay(testDay, testMonth).day;
const maxDayForMonth = '30';
expect(adjustedDay).toEqual(maxDayForMonth);
});
it('Adjust year to minimum year when inputted year is less than minimum year', () => {
const testYear = 1950;
const minYear = 2000;
element.chosenMinYear = minYear;
const adjustedYear = element.adjustYear(testYear).year;
expect(adjustedYear).toEqual(minYear);
});
it('Adjust year to maximum year when inputted year is greater than maximum year', () => {
const testYear = 2050;
const maxYear = 2000;
element.chosenMaxYear = 2000;
const adjustedYear = element.adjustYear(testYear).year;
expect(adjustedYear).toEqual(maxYear);
});
it('Adjust February 29 to February 28 in non-leap years', () => {
const testDateStr = '02292021';
document.body.appendChild(element);
element.adjustForDateConstraints(testDateStr, element);
const actualDate = element.sanitize(element.value);
const adjustedDate = '02282021';
expect(actualDate).toEqual(adjustedDate);
});
it('Progressively adjust input when several constituents are invalid', () => {
const testDateStr = '02303000';
element.maxYear = 2100;
document.body.appendChild(element);
element.adjustForDateConstraints(testDateStr, element);
const actualDate = element.sanitize(element.value);
const expectedDate = '0228' + element.chosenMaxYear;
expect(actualDate).toEqual(expectedDate);
});
});
});
});