Skip to content

Commit

Permalink
feat(testing): consume harness in primitive-textfield test
Browse files Browse the repository at this point in the history
  • Loading branch information
zarghamkhandev committed Sep 21, 2022
1 parent c03efcb commit aa1962f
Showing 1 changed file with 64 additions and 133 deletions.
Original file line number Diff line number Diff line change
@@ -1,97 +1,52 @@
import {Component, ViewChild} from '@angular/core';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {TuiRootModule} from '@taiga-ui/core/components/root';
import {
configureTestSuite,
TuiNativeInputPO,
TuiPageObject,
tuiTestCleaner,
tuiTestPlaceholder,
tuiTestTooltip,
} from '@taiga-ui/testing';
import {configureTestSuite, TuiPrimitiveTextfieldHarness} from '@taiga-ui/testing';

import {TuiHintModule} from '../../../directives/hint/hint.module';
import {TuiTextfieldControllerModule} from '../../../directives/textfield-controller';
import {TuiSizeL, TuiSizeS} from '../../../types/size';
import {TuiPrimitiveTextfieldComponent} from '../primitive-textfield.component';
import {TuiPrimitiveTextfieldModule} from '../primitive-textfield.module';

describe(`PrimitiveTextfield`, () => {
@Component({
template: `
<tui-primitive-textfield id="test1"></tui-primitive-textfield>
<tui-primitive-textfield
[tuiTextfieldCleaner]="cleaner"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldSize]="size"
[tuiHintContent]="hintContent"
[readOnly]="readOnly"
[invalid]="invalid"
[disabled]="disabled"
[filler]="filler"
[postfix]="postfix"
id="test2"
[filler]="'filler'"
[postfix]="'post'"
[value]="'value'"
[pseudoFocus]="true"
></tui-primitive-textfield>
<tui-primitive-textfield
id="test3"
[postfix]="'post'"
[value]="'value'"
></tui-primitive-textfield>
<tui-primitive-textfield id="test4"></tui-primitive-textfield>
<tui-primitive-textfield
id="test5"
[value]="'value'"
></tui-primitive-textfield>
<tui-primitive-textfield
id="test6"
[pseudoFocus]="focused"
[(value)]="value"
[value]="''"
>
<input
tuiTextfield
[attr.placeholder]="exampleText"
[attr.placeholder]="'placeholder'"
/>
</tui-primitive-textfield>
`,
})
class TestComponent {
@ViewChild(TuiPrimitiveTextfieldComponent, {static: true})
component!: TuiPrimitiveTextfieldComponent;

cleaner = false;

readOnly = false;

labelOutside = false;

size: TuiSizeS | TuiSizeL = `m`;

exampleText = `placeholder`;

hintContent: string | null = `prompt`;

value = ``;

filler = ``;

postfix = ``;

invalid = false;

disabled = false;

focused = false;
}
class TestComponent {}

let fixture: ComponentFixture<TestComponent>;
let testComponent: TestComponent;
let pageObject: TuiPageObject<TestComponent>;
let inputPO: TuiNativeInputPO;

const testContext = {
get pageObject() {
return pageObject;
},
get fixture() {
return fixture;
},
get testComponent() {
return testComponent;
},
get inputPO() {
return inputPO;
},
get prefix() {
return `tui-primitive-textfield__`;
},
};
let loader: HarnessLoader;

configureTestSuite(() => {
TestBed.configureTestingModule({
Expand All @@ -108,94 +63,70 @@ describe(`PrimitiveTextfield`, () => {

beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
pageObject = new TuiPageObject(fixture);
testComponent = fixture.componentInstance;

inputPO = new TuiNativeInputPO(fixture, `${testContext.prefix}native-input`);
loader = TestbedHarnessEnvironment.loader(fixture);
});

describe(`value decoration`, () => {
beforeEach(() => {
testComponent.size = `l`;
});

it(`is not shown when value is empty and field is not focused`, () => {
const example = `text`;
const postfix = `post`;

testComponent.exampleText = example;
testComponent.postfix = postfix;

fixture.detectChanges();
it(`is not shown when value is empty and field is not focused`, async () => {
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test1`}),
);
const valueDecorationText = await component.valueDecorationText();

expect(getValueDecoration()).toBe(``);
expect(valueDecorationText).toBe(``);
});

it(`value, filler and postfix are shown when value is not empty and field is focused`, () => {
it(`value, filler and postfix are shown when value is not empty and field is focused`, async () => {
const value = `value`;
const filler = `filler`;
const postfix = `post`;

testComponent.value = value;
testComponent.filler = filler;
testComponent.postfix = postfix;
testComponent.focused = true;

fixture.detectChanges();
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test2`}),
);
const valueDecorationText = await component.valueDecorationText();

expect(getValueDecoration()).toBe(
expect(valueDecorationText).toBe(
`${value}${filler.slice(value.length)} ${postfix}`,
);
});

it(`value and postfix are shown when value is not empty`, () => {
const value = `value`;
const postfix = `post`;

testComponent.value = value;
testComponent.postfix = postfix;

fixture.detectChanges();
it(`value and postfix are shown when value is not empty`, async () => {
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test3`}),
);
const valueDecorationText = await component.valueDecorationText();

expect(getValueDecoration()).toBe(`${value} ${postfix}`);
expect(valueDecorationText).toBe(`value post`);
});
});

describe(`Example of filling in the field (example-text)`, () => {
it(`if the input is not focused, then example-text is not shown`, async () => {
await fixture.whenStable();
expect(getValueDecoration()).toBe(``);
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test4`}),
);
const valueDecorationText = await component.valueDecorationText();

expect(valueDecorationText).toBe(``);
});

it(`if the input has value, then example-text is not shown`, async () => {
testComponent.value = `value`;
await fixture.whenStable();
fixture.detectChanges();
expect(getValueDecoration()).toBe(testComponent.value);
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test5`}),
);
const valueDecorationText = await component.valueDecorationText();

expect(valueDecorationText).toBe(`value`);
});

it(`if the input is focused, then example-text is shown`, async () => {
testComponent.value = ``;
testComponent.focused = true;
const input = fixture.debugElement.query(By.css(`input`)).nativeElement;

fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
expect(input.placeholder).toBe(testComponent.exampleText);
const component = await loader.getHarness(
TuiPrimitiveTextfieldHarness.with({selector: `#test6`}),
);
const placeholder = await component.inputPlaceholder();

expect(placeholder).toBe(`placeholder`);
});
});

tuiTestCleaner(testContext, `test`, ``);

tuiTestTooltip(testContext);

tuiTestPlaceholder(testContext);

function getValueDecoration(): string {
return pageObject
.getByAutomationId(`tui-primitive-textfield__value-decoration`)!
.nativeElement.textContent.trim()
.replace(`\n `, ``);
}
});

0 comments on commit aa1962f

Please sign in to comment.