Skip to content

Commit

Permalink
Refactor tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@RichardHelm
RichardHelm committed Mar 13, 2024
1 parent 3f1e72b commit a599fb8
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 597 deletions.
49 changes: 3 additions & 46 deletions libs/components/src/lib/checkbox/checkbox.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,63 +127,20 @@ describe('vwc-checkbox', () => {
});
});

describe('helper text', function () {
it('should render the helper text when attribute is set on checkbox', async function () {
const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text');
const helperText = 'Helper Text';
element.helperText = helperText;
await elementUpdated(element);
expect(helperTextElementWithoutText)
.toBeNull();
expect(element.shadowRoot?.querySelector('.helper-message')
?.textContent
?.trim())
.toEqual(helperText);
});
});

describe('success Text', () => {
it('should add success class to base when successText is set', async function () {
(element as any).successText = 'success';
element.successText = 'success';
await elementUpdated(element);
expect(getBaseElement(element).classList.contains('success')).toBeTruthy();
});

it('should show success text when successText is set', async function () {
(element as any).successText = 'success';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
});

it('should remove success text when undefined', async function () {
(element as any).successText = 'success';
await elementUpdated(element);
(element as any).successText = undefined;
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.success-message')).toBeNull();
});
});

describe('error Text', () => {
it('should add error class to base when errorText is set', async function () {
(element as any).errorText = 'error';
element.errorText = 'error';
await elementUpdated(element);
expect(getBaseElement(element).classList.contains('error')).toBeTruthy();
});

it('should show error text when errorText is set', async function () {
(element as any).errorText = 'error';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error');
});

it('should remove error text when undefined', async function () {
(element as any).errorText = 'error';
await elementUpdated(element);
(element as any).errorText = undefined;
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
});
});

describe.each(['input', 'change'])('%s event', (eventName) => {
Expand Down Expand Up @@ -318,4 +275,4 @@ describe('vwc-checkbox', () => {
});

});
});
});
37 changes: 0 additions & 37 deletions libs/components/src/lib/file-picker/file-picker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,43 +98,6 @@ describe('vwc-file-picker', () => {
});
});

describe('helper text', function () {
it('should render the helper text when attribute is set on file picker', async function () {
const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message');
const helperText = 'Helper Text';
element.helperText = helperText;
await elementUpdated(element);
expect(helperTextElementWithoutText)
.toBeNull();
expect(element.shadowRoot?.querySelector('.helper-message')
?.textContent
?.trim())
.toEqual(helperText);
});
});

describe('error text', function () {
it('should render the error text when attribute is set', async function () {
const errorTextElementWithoutAttribute = element.shadowRoot?.querySelector('.error-message');
element.errorText = 'Error Text';
await elementUpdated(element);
expect(errorTextElementWithoutAttribute)
.toBeNull();
expect(element.shadowRoot?.querySelector('.error-message')
?.textContent
?.trim())
.toEqual('Error Text');
});

it('should hide helper text if error text is set', async function () {
element.helperText = 'Helper Text';
element.errorText = 'Error Text';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.helper-message')).toBe(null);
expect(element.shadowRoot?.querySelector('.error-message')).not.toBe(null);
});
});

describe('value', function () {
it('should be set to a fake path when a file is added', async function () {
addFiles([await generateFile('london.png', 1)]);
Expand Down
123 changes: 0 additions & 123 deletions libs/components/src/lib/number-field/number-field.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,10 @@ function getRootElement(element: NumberField) {
}

describe('vwc-number-field', () => {

function setToBlurred() {
element.dispatchEvent(new Event('blur'));
}

function setToFocused() {
element.dispatchEvent(new Event('focus'));
}

function setValidityToError(errorMessage = 'error') {
element.setValidity({badInput: true}, errorMessage);
element.validate();
Expand Down Expand Up @@ -302,23 +297,7 @@ describe('vwc-number-field', () => {
});
});

describe('helper text', function () {
it('should render the helper text when attribute is set', async function () {
const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message');
const helperText = 'Helper Text';
element.helperText = helperText;
await elementUpdated(element);
expect(helperTextElementWithoutText)
.toBeNull();
expect(element.shadowRoot?.querySelector('.helper-message')
?.textContent
?.trim())
.toEqual(helperText);
});
});

describe('error message', function () {

it('should add class error to base if not valid', async function () {
element.dirtyValue = true;
setToBlurred();
Expand All @@ -330,84 +309,6 @@ describe('vwc-number-field', () => {
.contains('error'))
.toEqual(true);
});

it('should render the error message when not valid', async function () {
const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message');
const errorMessage = 'Error Text';

element.dirtyValue = true;
setToBlurred();
setValidityToError(errorMessage);
await elementUpdated(element);

expect(errorElementWithoutText)
.toBeNull();
expect(element.shadowRoot?.querySelector('.error-message')
?.textContent
?.trim())
.toEqual(errorMessage);
});

it('should render the error message only after a blur', async function() {
const errorMessage = 'Error Text';
element.dirtyValue = true;
setValidityToError(errorMessage);
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
});

it('should replace helper text', async function () {
element.helperText = 'helper text';
element.dirtyValue = true;
setToBlurred();
setValidityToError();
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.helper-text'))
.toBeNull();
});

it('should set error message to empty string when pristine', async function () {
setValidityToError();
await elementUpdated(element);
expect(element.errorValidationMessage)
.toEqual('');
});

it('should validate after a blur', async function () {
const errorMessage = 'Error Text';
element.dirtyValue = true;
setValidityToError(errorMessage);
setToBlurred();
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')?.
textContent?.trim()).toEqual(errorMessage);
});

it('should update error message when blurred', async function() {
setToBlurred();
const errorMessage = 'Error Text';
const errorMessageTwo = 'Error Text 2';
element.dirtyValue = true;
setValidityToError(errorMessage);
await elementUpdated(element);

setValidityToError(errorMessageTwo);
await elementUpdated(element);

expect(element.shadowRoot?.querySelector('.error-message')?.
textContent?.trim()).toEqual(errorMessageTwo);
});

it('should change the error message only when already not valid', async function() {
setToBlurred();
setToFocused();
const errorMessage = 'Error Text';
element.dirtyValue = true;
setValidityToError(errorMessage);
await elementUpdated(element);

expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
});
});

describe('successText', function () {
Expand All @@ -420,30 +321,6 @@ describe('vwc-number-field', () => {
.contains('success'))
.toEqual(true);
});

it('should not show helper text when success is shown', async function () {
element.helperText = 'help';
element.successText = 'success';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.helper-text'))
.toBeNull();
});

it('should not show error message when success is shown', async function () {
element.dirtyValue = true;
setToBlurred();
setValidityToError('blah');
element.successText = 'success';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message'))
.toBeNull();
});

it('should show success message if set', async function() {
element.successText = 'success';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
});
});

describe('disabled', function () {
Expand Down
55 changes: 5 additions & 50 deletions libs/components/src/lib/select/select.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,65 +131,20 @@ describe('vwc-select', () => {
});
});

describe('helper text', function () {
it('should render the helper text when attribute is set on select', async function () {
const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text');
const helperText = 'Helper Text';
element.helperText = helperText;
await elementUpdated(element);
expect(helperTextElementWithoutText)
.toBeNull();
expect(element.shadowRoot?.querySelector('.helper-message')
?.textContent
?.trim())
.toEqual(helperText);
});
});

describe('success Text', () => {
describe('success text', () => {
it('should add success class to base when successText is set', async function () {
(element as any).successText = 'success';
element.successText = 'success';
await elementUpdated(element);
expect(getControlElement(element).classList.contains('success')).toBeTruthy();
});

it('should show success text when successText is set', async function () {
(element as any).successText = 'success';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
});

it('should remove success text when undefined', async function () {
(element as any).successText = 'success';
await elementUpdated(element);
(element as any).successText = undefined;
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.success-message')).toBeNull();
});

});

describe('error Text', () => {
describe('error text', () => {
it('should add error class to base when errorText is set', async function () {
(element as any).errorText = 'error';
element.errorText = 'error';
await elementUpdated(element);
expect(getControlElement(element).classList.contains('error')).toBeTruthy();
});

it('should show error text when errorText is set', async function () {
(element as any).errorText = 'error';
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error');
});

it('should remove error text when undefined', async function () {
(element as any).errorText = 'error';
await elementUpdated(element);
(element as any).errorText = undefined;
await elementUpdated(element);
expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
});

});

describe('disabled', function () {
Expand Down Expand Up @@ -568,7 +523,7 @@ describe('vwc-select', () => {

await elementUpdated(element);
expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('placeholder');

element.selectedIndex = 2;
await elementUpdated(element);
expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('3');
Expand Down
Loading

0 comments on commit a599fb8

Please sign in to comment.