How to use matInput method in ng-mocks

Best JavaScript code snippet using ng-mocks

create-new-account.spec.ts

Source:create-new-account.spec.ts Github

copy

Full Screen

1/// <reference types="cypress" />2describe('Account administration', () => {3 beforeEach(() => {4 cy.server();5 cy.route('POST', '/hd/accounts').as('createAccount');6 cy.route('PUT', '/user/me/password').as('changePassword');7 cy.route('GET', `/hd/accounts`).as('fetchAccounts');8 cy.route('GET', `/user/me`).as('me');9 cy.route('GET', `/hd/cases`).as('allCases');10 cy.logInAdmin();11 });12 it('create new admin account', () => {13 cy.wait('@me').its('status').should('eq', 200);14 cy.wait('@allCases').its('status').should('eq', 200);15 cy.location('pathname').should('eq', Cypress.env('index_cases_url'));16 cy.get('[data-cy="account-administration"]').click();17 cy.location('pathname').should('eq', '/administration/accounts/account-list');18 cy.wait('@fetchAccounts').its('status').should('eq', 200);19 cy.get('[data-cy="new-case-button"]').click();20 cy.location('pathname').should('eq', '/administration/accounts/account-detail/new/edit');21 cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');22 cy.get('[data-cy="account-submit-button"] button').should('be.disabled');23 cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');24 cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');25 cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');26 cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');27 cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');28 cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');29 cy.get('[data-cy="select-role"] div.mat-select-trigger').click();30 cy.get('[id="mat-option-0"]').then(($elem) => {31 $elem.trigger('click');32 cy.get('.cdk-overlay-backdrop').click();33 cy.get('[data-cy="account-submitandclose-button"] button').should('be.enabled');34 cy.get('[data-cy="account-submit-button"] button').should('be.enabled');35 cy.get('[data-cy="account-submitandclose-button"] button').click();36 });37 cy.wait('@createAccount').its('status').should('eq', 201);38 cy.location('pathname').should('eq', '/administration/accounts/account-list');39 cy.logOut();40 cy.logIn('testaccount', 'Test123!');41 cy.get('mat-dialog-container mat-card-title h1').should('have.text', 'Passwort ändern');42 cy.get('mat-dialog-container [data-cy="input-username"] input[matInput]').should('contain.value', 'testaccount');43 cy.get('[data-cy="changepassword-submit-button"] button').should('be.disabled');44 cy.get('mat-dialog-container [data-cy="input-currentpassword"] input[matInput]').type('Test123!');45 cy.get('mat-dialog-container [data-cy="input-newpassword"] input[matInput]').type('New123!');46 cy.get('mat-dialog-container [data-cy="input-password-confirm"] input[matInput]').type('New123!');47 cy.get('[data-cy="changepassword-submit-button"] button').should('be.enabled');48 cy.get('[data-cy="changepassword-submit-button"] button').click();49 cy.wait('@changePassword').its('status').should('eq', 204);50 cy.location('pathname').should('eq', Cypress.env('index_cases_url'));51 cy.get('[data-cy="profile-user-button"] .mat-button-wrapper span').should(52 'have.text',53 'Testfirstname Testlastname (GA Mannheim) ' // TODO: space54 );55 });56});57//58// describe('new account', () => {59// beforeEach(() => {60// cy.server();61// cy.route('POST', '/hd/accounts').as('createaccount');62//63// cy.loginAdmin();64//65// cy.visit('administration/accounts/account-detail/new');66// });67//68// describe('field validations: required', () => {69// describe('enabled submit button', () => {70// TODO: unit tests71// it('missing firstname', () => {72// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');73// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');74// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');75// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');76// cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');77// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();78// cy.get('[id="mat-option-0"]').click();79//80// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');81// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');82// });83//84// it('missing lastname', () => {85// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');86// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');87// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');88// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');89// cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');90// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();91// cy.get('[id="mat-option-0"]').click();92//93// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');94// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');95// });96//97// it('missing e-mail', () => {98// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');99// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');100// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');101// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');102// cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');103// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();104// cy.get('[id="mat-option-0"]').click();105//106// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');107// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');108// });109//110// it('missing username', () => {111// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');112// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');113// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');114// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');115// cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');116// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();117// cy.get('[id="mat-option-0"]').click();118//119// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');120// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');121// });122//123// it('missing password', () => {124// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');125// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');126// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');127// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');128// cy.get('[data-cy="input-passwordconfirm"] input[matInput]').type('Test123!');129// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();130// cy.get('[id="mat-option-0"]').click();131//132// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');133// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');134// });135//136// it('missing password confirm', () => {137// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');138// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');139// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');140// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');141// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');142// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();143// cy.get('[id="mat-option-0"]').click();144//145// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');146// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');147// });148//149// it('missing role', () => {150// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');151// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');152// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');153// cy.get('[data-cy="input-username"] input[matInput]').type('testaccount');154// cy.get('[data-cy="input-password"] input[matInput]').type('Test123!');155//156// cy.get('[data-cy="account-submit-button"] button').should('be.disabled');157// cy.get('[data-cy="account-submitandclose-button"] button').should('be.disabled');158// });159// });160// });161//162// describe('field tests', () => {163// describe('firstName', () => {164// it('should not be empty', () => {165// cy.get('[data-cy="input-firstname"] input[matInput]').type('Testfirstname');166// cy.get('[data-cy="input-firstname"] input[matInput]').clear();167// cy.get('[data-cy="input-firstname"] input[matInput]').blur();168//169// cy.get('[data-cy="input-firstname"] mat-error').should(170// 'contain.text',171// 'Bitte füllen Sie dieses Pflichtfeld aus'172// );173// });174//175// it('should be invalid', () => {176// cy.get('[data-cy="input-firstname"] input[matInput]').clear().type('Testfirstn5ame');177// cy.get('[data-cy="input-firstname"] input[matInput]').blur();178//179// cy.get('[data-cy="input-firstname"] mat-error').should(180// 'contain.text',181// 'Bitte geben Sie einen gültigen Namen ein. Es sind nur Buchstaben, Leerzeichen und Bindestriche erlaubt'182// );183// });184// });185//186// describe('lastName', () => {187// it('should not be empty', () => {188// cy.get('[data-cy="input-lastname"] input[matInput]').type('Testlastname');189// cy.get('[data-cy="input-lastname"] input[matInput]').clear();190// cy.get('[data-cy="input-lastname"] input[matInput]').blur();191//192// cy.get('[data-cy="input-lastname"] mat-error').should(193// 'contain.text',194// 'Bitte füllen Sie dieses Pflichtfeld aus'195// );196// });197// it('should be invalid', () => {198// cy.get('[data-cy="input-lastname"] input[matInput]').clear().type('Testlast09name');199// cy.get('[data-cy="input-lastname"] input[matInput]').blur();200//201// cy.get('[data-cy="input-lastname"] mat-error').should(202// 'contain.text',203// 'Bitte geben Sie einen gültigen Namen ein. Es sind nur Buchstaben, Leerzeichen und Bindestriche erlaubt'204// );205// });206// });207//208// describe('username', () => {209// it('should not be empty', () => {210// cy.get('[data-cy="input-username"] input[matInput]').type('account');211// cy.get('[data-cy="input-username"] input[matInput]').clear();212// cy.get('[data-cy="input-username"] input[matInput]').blur();213//214// cy.get('[data-cy="input-username"] mat-error').should(215// 'contain.text',216// 'Bitte füllen Sie dieses Pflichtfeld aus'217// );218// });219//220// it('should be invalid', () => {221// cy.get('[data-cy="input-username"] input[matInput]').clear().type('admin');222// cy.get('[data-cy="input-username"] input[matInput]').blur();223//224// cy.get('[data-cy="input-username"] mat-error').should(225// 'contain.text',226// 'Der angegebene Benutzername kann nicht verwendet werden '227// );228// });229// });230//231// describe('password', () => {232// it('too few characters', () => {233// cy.get('[data-cy="input-password"] input[matInput]')234// .type('short')235// .blur()236// .then(($input) => {237// $input.hasClass('mat-form-field-invalid');238// cy.get('[data-cy="input-password"] mat-error')239// .should('exist')240// .and('contain.text', 'Dieses Feld erfordert eine Eingabe von mindestens 7 Zeichen')241// .and('contain.text', 'Dieses Feld muss mindestens einen Großbuchstaben enthalten')242// .and('contain.text', 'Dieses Feld muss mindestens eine Zahl enthalten')243// .and(244// 'contain.text',245// 'Dieses Feld muss mindestens eines der folgenden Sonderzeichen beinhalten: @ # $ % ^ & * ( ) , . ? : | & < >'246// );247// });248// });249//250// it('no capital letters', () => {251// cy.get('[data-cy="input-password"] input[matInput]')252// .type('thisispassword1!')253// .blur()254// .then(($input) => {255// $input.hasClass('mat-form-field-invalid');256// cy.get('[data-cy="input-password"] mat-error')257// .should('exist')258// .and('contain.text', 'Dieses Feld muss mindestens einen Großbuchstaben enthalten');259// });260// });261//262// it('no numbers', () => {263// cy.get('[data-cy="input-password"] input[matInput]')264// .type('thisIsMyPassword!')265// .blur()266// .then(($input) => {267// $input.hasClass('mat-form-field-invalid');268// cy.get('[data-cy="input-password"] mat-error')269// .should('exist')270// .and('contain.text', 'Dieses Feld muss mindestens eine Zahl enthalten');271// });272// });273//274// it('no special characters', () => {275// cy.get('[data-cy="input-password"] input[matInput]')276// .type('thisIsMyPassword1')277// .blur()278// .then(($input) => {279// $input.hasClass('mat-form-field-invalid');280// cy.get('[data-cy="input-password"] mat-error')281// .should('exist')282// .and(283// 'contain.text',284// 'Dieses Feld muss mindestens eines der folgenden Sonderzeichen beinhalten: @ # $ % ^ & * ( ) , . ? : | & < >'285// );286// });287// });288//289// it('password and confirmation have to match', () => {290// cy.get('[data-cy="input-password"] input[matInput]')291// .type('thisIsMyPassword1!')292// .blur()293// .then(($input) => {294// $input.hasClass('ng-valid');295// cy.get('[data-cy="input-password"] mat-error').should('not.exist');296// });297//298// cy.get('[data-cy="input-passwordconfirm"] input[matInput]')299// .type('thisIsMyPassword12!')300// .blur()301// .then(($input) => {302// $input.hasClass('mat-form-field-invalid');303// cy.get('[data-cy="input-passwordconfirm"] mat-error')304// .should('exist')305// .and('contain.text', 'Das Passwort und die Bestätigung müssen übereinstimmen');306// });307// });308// });309//310// describe('role', () => {311// it('should not be empty', () => {312// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();313// cy.get('[id="mat-option-0"]').click();314// cy.get('.cdk-overlay-backdrop').click();315// cy.get('[data-cy="select-role"] div.mat-select-trigger').click();316// cy.get('[id="mat-option-0"]').click();317//318// cy.get('[data-cy="select-role"] mat-error').should('contain.text', 'Bitte wählen Sie mindestens ein Element ');319// });320// });321//322// describe('email address', () => {323// it('should have a valid email address', () => {324// cy.get('[data-cy="input-email"] input[matInput]').type('test@test.de');325// cy.get('[data-cy="input-email"] input[matInput]').blur();326//327// cy.get('[data-cy="input-email"] mat-error').should('not.exist');328// });329//330// it('should be invalid without correct email structure', () => {331// cy.get('[data-cy="input-email"] input[matInput]').type('te@st@test.de');332// cy.get('[data-cy="input-email"] input[matInput]').blur();333//334// cy.get('[data-cy="input-email"] mat-error').should('exist');335//336// cy.get('[data-cy="input-email"] input[matInput]').clear().type('test.de');337// cy.get('[data-cy="input-email"] input[matInput]').blur();338//339// cy.get('[data-cy="input-email"] mat-error').should('exist');340//341// cy.get('[data-cy="input-email"] input[matInput]').clear().type('test@testde');342// cy.get('[data-cy="input-email"] input[matInput]').blur();343//344// cy.get('[data-cy="input-email"] mat-error').should('exist');345//346// cy.get('[data-cy="input-email"] input[matInput]').clear().type('testde');347// cy.get('[data-cy="input-email"] input[matInput]').blur();348//349// cy.get('[data-cy="input-email"] mat-error').should('exist');350// });351// });352// });353//354// });355// });356// });357//358//...

Full Screen

Full Screen

form-elements.component.ts

Source:form-elements.component.ts Github

copy

Full Screen

1import { ChangeDetectorRef, Component, OnInit } from '@angular/core';2import { FormControl } from '@angular/forms';3import escape from 'lodash-es/escape';4@Component({5 selector: 'fury-form-elements',6 templateUrl: './form-elements.component.html',7 styleUrls: ['./form-elements.component.scss']8})9export class FormElementsComponent implements OnInit {10 selectCtrl: FormControl = new FormControl();11 showBasicFormSource: boolean;12 basicFormSource = escape(13 `<mat-form-field>14 <input matInput placeholder="Company" type="text" required>15</mat-form-field>16<div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="16px">17 <mat-form-field fxFlex>18 <input matInput placeholder="First Name" type="text">19 </mat-form-field>20 <mat-form-field fxFlex>21 <input matInput placeholder="Last Name" type="text" required>22 </mat-form-field>23</div>24<mat-form-field>25 <input matInput placeholder="Password" type="password" required>26</mat-form-field>27<mat-form-field>28 <input matInput #lengthHint maxlength="10" placeholder="Hint Label and Max Length" type="text" required>29 <mat-hint align="start">Try to type in more than 10 letters</mat-hint>30 <mat-hint align="end">{{ lengthHint.value.length }}/10</mat-hint>31</mat-form-field>32<mat-form-field>33 <input matInput placeholder="Disabled" disabled>34</mat-form-field>35`);36 showAdvancedFormSource: boolean;37 advancedFormSource = escape(38 `<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="16px">39 <mat-form-field color="primary" fxFlex.gt-sm>40 <input matInput placeholder="Primary Color" type="text">41 </mat-form-field>42 <mat-form-field color="accent" fxFlex.gt-sm>43 <input matInput placeholder="Accent Color" type="text">44 </mat-form-field>45 <mat-form-field color="warn" fxFlex.gt-sm>46 <input matInput placeholder="Warn Color" type="text">47 </mat-form-field>48</div>49<mat-form-field>50 <input matInput placeholder="Username" type="text" value="DavidSmith">51 <mat-icon matSuffix>person</mat-icon>52</mat-form-field>53<mat-form-field fxFlex.gt-sm>54 <span matPrefix>+1 &nbsp;</span>55 <input matInput placeholder="Mobile Phone" type="text" required>56 <mat-icon matSuffix>smartphone</mat-icon>57</mat-form-field>58<mat-form-field floatPlaceholder="never">59 <input matInput placeholder="No Floating Placeholder" type="text" required>60</mat-form-field>61<mat-form-field>62 <input matInput [mdDatepicker]="datepickerRef" placeholder="Click on the icon to the right for a Datepicker">63 <button matSuffix [mdDatepickerToggle]="datepickerRef"></button>64</mat-form-field>65<mat-datepicker #datepickerRef></mat-datepicker>66`);67 showFormThemingSource: boolean;68 formThemingSource = escape(69 `<mat-form-field color="primary">70 <input matInput placeholder="Primary Color">71</mat-form-field>72<mat-form-field color="accent">73 <input matInput placeholder="Accent Color">74</mat-form-field>75<mat-form-field color="warn">76 <input matInput placeholder="Warn Color">77</mat-form-field>78`);79 showFormPrefixSuffixSource: boolean;80 formPrefixSuffixSource = escape(81 `<mat-form-field>82 <span matPrefix>+1 &nbsp;</span>83 <input matInput placeholder="Input with prefix text">84</mat-form-field>85<mat-form-field>86 <input matInput placeholder="Input with suffix icon">87 <mat-icon matSuffix>menu</mat-icon>88</mat-form-field>89<mat-form-field>90 <span matPrefix>http:// &nbsp;</span>91 <input matInput placeholder="Input with prefix text and suffix icon">92 <mat-icon matSuffix>camera</mat-icon>93</mat-form-field>94`);95 showFormHintLabelSource: boolean;96 formHintLabelSource = escape(97 `<mat-form-field>98 <input matInput placeholder="Email Address">99 <mat-hint>e.g. david@example.com</mat-hint>100</mat-form-field>101<mat-form-field floatPlaceholder="never">102 <input matInput #hintLabelInputRef placeholder="Domain Name">103 <mat-hint align="end">http://{{ hintLabelInputRef.value || "company" }}.example.com</mat-hint>104</mat-form-field>105<mat-form-field floatPlaceholder="never">106 <input matInput #hintLabelInputLengthRef maxlength="10" placeholder="Dynamic Hint Label">107 <mat-hint align="start">Try to type in more than 10 letters</mat-hint>108 <mat-hint align="end">{{ hintLabelInputLengthRef.value.length }}/10</mat-hint>109</mat-form-field>110</div>111`);112 showFormCheckboxSource: boolean;113 formCheckboxSource = escape(114 `<mat-checkbox [checked]="false">Stay signed in</mat-checkbox>115<mat-checkbox [checked]="true" color="primary">Theming</mat-checkbox>116<mat-checkbox [checked]="false">Simply useful</mat-checkbox>117<mat-checkbox [indeterminate]="true">Indeterminate</mat-checkbox>118<mat-checkbox [checked]="true" align="end">Align end</mat-checkbox>119`);120 showFormCheckboxThemingSource: boolean;121 formCheckboxThemingSource = escape(122 `<mat-checkbox [checked]="true" color="primary">Primary Color</mat-checkbox>123<mat-checkbox [checked]="true" color="accent">Accent Color</mat-checkbox>124<mat-checkbox [checked]="true" color="warn">Warn Color</mat-checkbox>125`);126 selectModel;127 showFormSelectSource: boolean;128 formSelectSource = escape(129 `<mat-select placeholder="Favorite fruit">130 <mat-option value="Apples">Apples</mat-option>131 <mat-option value="Peaches">Peaches</mat-option>132 <mat-option value="Bananas">Bananas</mat-option>133 <mat-option value="Mango">Mango</mat-option>134 <mat-option value="Apples">Cucumber</mat-option>135</mat-select>136`);137 showFormDatepickerSource: boolean;138 formDatepickerSource = escape(139 `<mat-form-field>140 <input matInput [mdDatepicker]="formDatepickerRef" placeholder="Select your date">141 <button matSuffix [mdDatepickerToggle]="formDatepickerRef"></button>142 <mat-hint>Click on the icon to the right for the Datepicker</mat-hint>143</mat-form-field>144<mat-datepicker #formDatepickerRef></mat-datepicker>145`);146 showFormSliderSource: boolean;147 formSliderSource = escape(148 `<mat-slider [min]="0" [max]="100" [step]="1" [thumbLabel]="true" [tickInterval]="10" value="36"></mat-slider>149<div fxLayout="row">150 <mat-slider fxFlex [min]="0" [max]="10" [step]="1" value="6" color="primary"></mat-slider>151 <mat-slider fxFlex [min]="0" [max]="10" [step]="1" value="8" color="accent"></mat-slider>152 <mat-slider fxFlex [min]="0" [max]="10" [step]="1" value="7" color="warn"></mat-slider>153</div>154`);155 showFormRadioSource: boolean;156 formRadioSource = escape(157 `<mat-radio-group fxLayout="row" fxLayoutGap="16px">158 <mat-radio-button value="Apples" [checked]="true">Apples</mat-radio-button>159 <mat-radio-button value="Peaches">Peaches</mat-radio-button>160</mat-radio-group>161<mat-radio-group fxLayout="row" fxLayoutGap="16px" color="accent">162 <mat-radio-button value="primary" [checked]="true" color="primary">Primary Color</mat-radio-button>163 <mat-radio-button value="accent" color="accent">Accent Color</mat-radio-button>164 <mat-radio-button value="warn" color="warn">Warn Color</mat-radio-button>165</mat-radio-group>166`);167 showFormSlideToggleSource: boolean;168 formSlideToggleSource = escape(169 `<div fxLayout="column" fxLayoutGap="8px">170 <mat-slide-toggle [checked]="false">Slide Me</mat-slide-toggle>171 <mat-slide-toggle [checked]="false">Drag & Drop</mat-slide-toggle>172 <mat-slide-toggle [checked]="true">I Agree</mat-slide-toggle>173</div>174<div fxLayout="column" fxLayoutAlign="start end" fxLayoutGap="8px">175 <mat-slide-toggle [checked]="true" color="primary" labelPosition="before">Primary Color</mat-slide-toggle>176 <mat-slide-toggle [checked]="true" color="accent" labelPosition="before">Accent Color</mat-slide-toggle>177 <mat-slide-toggle [checked]="true" color="warn" labelPosition="before">Warn Color</mat-slide-toggle>178</div>179`);180 private _gap = 16;181 gap = `${this._gap}px`;182 col2 = `1 1 calc(50% - ${this._gap / 2}px)`;183 col3 = `1 1 calc(33.3333% - ${this._gap / 1.5}px)`;184 inputType = 'password';185 visible = false;186 constructor(private cd: ChangeDetectorRef) {187 }188 togglePassword() {189 if (this.visible) {190 this.inputType = 'password';191 this.visible = false;192 this.cd.markForCheck();193 } else {194 this.inputType = 'text';195 this.visible = true;196 this.cd.markForCheck();197 }198 }199 ngOnInit() {200 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { matInput } from 'ng-mocks';2import { MyComponent } from './my.component';3import { MyModule } from './my.module';4beforeEach(async(() => {5 TestBed.configureTestingModule({6 imports: [MyModule],7 }).compileComponents();8}));9it('should create', () => {10 const fixture = TestBed.createComponent(MyComponent);11 fixture.detectChanges();12 expect(fixture).toBeTruthy();13});14it('should have the correct placeholder', () => {15 const fixture = TestBed.createComponent(MyComponent);16 fixture.detectChanges();17 const input = matInput(fixture.debugElement, 'myInput');18 expect(input.placeholder).toBe('My Placeholder');19});20it('should have the correct value', () => {21 const fixture = TestBed.createComponent(MyComponent);22 fixture.detectChanges();23 const input = matInput(fixture.debugElement, 'myInput');24 expect(input.value).toBe('My Value');25});26it('should have the correct type', () => {27 const fixture = TestBed.createComponent(MyComponent);28 fixture.detectChanges();29 const input = matInput(fixture.debugElement, 'myInput');30 expect(input.type).toBe('number');31});32import { Component } from '@angular/core';33import { FormControl } from '@angular/forms';34@Component({35})36export class MyComponent {37 myControl = new FormControl('My Value');38}39import { NgModule } from '@angular/core';40import { ReactiveFormsModule } from '@angular/forms';41import { MatInputModule } from '@angular/material/input';42import { MyComponent } from './my.component';43@NgModule({44 imports: [MatInputModule, ReactiveFormsModule],45})46export class MyModule {}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {matInput} from 'ng-mocks';2const input = matInput(fixture.debugElement, 'inputName');3import {matSelect} from 'ng-mocks';4const select = matSelect(fixture.debugElement, 'selectName');5import {matTextarea} from 'ng-mocks';6const textarea = matTextarea(fixture.debugElement, 'textareaName');7import {matButton} from 'ng-mocks';8const button = matButton(fixture.debugElement, 'buttonName');9import {matCheckbox} from 'ng-mocks';10const checkbox = matCheckbox(fixture.debugElement, 'checkboxName');11import {matRadio} from 'ng-mocks';12const radio = matRadio(fixture.debugElement, 'radioName');13import {matDatepicker} from 'ng-mocks';14const datepicker = matDatepicker(fixture.debugElement, 'datepickerName');15import {matSlider} from 'ng-mocks';16const slider = matSlider(fixture.debugElement, 'sliderName');17import {matSlideToggle} from 'ng-mocks';18const slideToggle = matSlideToggle(fixture.debugElement, 'slideToggleName');19import {matAutocomplete} from 'ng-mocks';20const autocomplete = matAutocomplete(fixture.debugElement, 'autocompleteName');21import {matMenu} from 'ng-mocks';22const menu = matMenu(fixture.debugElement, 'menuName');23import {matToolbar} from 'ng-mocks';24const toolbar = matToolbar(fixture.debugElement, 'toolbarName');25import {matTooltip} from 'ng-mocks';26const tooltip = matTooltip(fixture.debugElement, 'tooltipName');27import {matDialog} from 'ng-mocks';28const dialog = matDialog(fixture.debugElement

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { matInput } from 'ng-mocks';2const input = matInput(fixture);3const input = matInput(fixture, 'my-input');4const input = matInput(fixture, 'my-input', DebugElement);5const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder');6const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value');7const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id');8const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id', 'my-aria-label');9const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id', 'my-aria-label', 'my-aria-labelledby');10const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id', 'my-aria-label', 'my-aria-labelledby', 'my-aria-describedby');11const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id', 'my-aria-label', 'my-aria-labelledby', 'my-aria-describedby', 'my-aria-required');12const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id', 'my-aria-label', 'my-aria-labelledby', 'my-aria-describedby', 'my-aria-required', 'my-aria-invalid');13const input = matInput(fixture, 'my-input', DebugElement, 'my-placeholder', 'my-value', 'my-id',

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { matInput } from 'ng-mocks';2describe('test', () => {3 it('test', () => {4 const fixture = TestBed.createComponent(Comp);5 fixture.detectChanges();6 const input = matInput(fixture.debugElement);7 expect(input).toBeTruthy();8 });9});10@Component({11})12class Comp {}13import { matInput } from 'ng-mocks';14describe('test', () => {15 it('test', () => {16 const fixture = TestBed.createComponent(Comp);17 fixture.detectChanges();18 const input = matInput(fixture.debugElement);19 expect(input).toBeTruthy();20 });21});22@Component({23})24class Comp {}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const matInput = require('ng-mocks').matInput;2const fixture = MockRender(`3`);4const matInputInstance = matInput(fixture.debugElement);5expect(matInputInstance).toBeDefined();6import { MockRender, matInput } from 'ng-mocks';7it('should work', () => {8 const fixture = MockRender(`9 `);10 const matInputInstance = matInput(fixture.debugElement);11 expect(matInputInstance).toBeDefined();12});13import 'ng-mocks';14it('should work', () => {15 const fixture = MockRender(`16 `);17 const matInputInstance = matInput(fixture.debugElement);18 expect(matInputInstance).toBeDefined();19});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { MatInput } from '@angular/material/input';2import { MatFormField } from '@angular/material/form-field';3const input = MatInput(fixture.debugElement.query(By.css('input')));4input.value = '123';5input.triggerEventHandler('input', { target: input.nativeElement });6input.triggerEventHandler('blur', {});7const formField = MatFormField(fixture.debugElement.query(By.css('mat-form-field')));8formField.value = '123';9formField.triggerEventHandler('input', { target: formField.nativeElement });10formField.triggerEventHandler('blur', {});11const input = MatInput(fixture.debugElement.query(By.css('input')));12input.value = '123';13input.triggerEventHandler('input', { target: input.nativeElement });14input.triggerEventHandler('blur', {});15const formField = MatFormField(fixture.debugElement.query(By.css('mat-form-field')));16formField.value = '123';17formField.triggerEventHandler('input', { target: formField.nativeElement });18formField.triggerEventHandler('blur', {});19This is a great solution, but you are missing the import for By20import { By } from '@angular/platform-browser';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {matInput} from 'ng-mocks';2const input = matInput(fixture.debugElement, 'name');3input.nativeElement.value = 'some value';4input.nativeElement.dispatchEvent(new Event('input'));5expect(component.form.get('name').value).toEqual('some value');6input.nativeElement.value = 'some value';7input.nativeElement.dispatchEvent(new Event('input'));8expect(component.form.get('name').value).toEqual('some value');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {matInput} from 'ng-mocks';2const input = matInput(fixture, 'input');3expect(input).toBeDefined();4expect(input.value).toBe('test');5expect(input.placeholder).toBe('test placeholder');6import {matSelect} from 'ng-mocks';7const select = matSelect(fixture, 'select');8expect(select).toBeDefined();9expect(select.value).toBe('test');10expect(select.placeholder).toBe('test placeholder');11import {matTextarea} from 'ng-mocks';12const textarea = matTextarea(fixture, 'textarea');13expect(textarea).toBeDefined();14expect(textarea.value).toBe('test');15expect(textarea.placeholder).toBe('test placeholder');16import {matButton} from 'ng-mocks';17const button = matButton(fixture, 'button');18expect(button).toBeDefined();19expect(button.textContent).toBe('test button');20import {matCheckbox} from 'ng-mocks';21const checkbox = matCheckbox(fixture, 'checkbox');22expect(checkbox).toBeDefined();23expect(checkbox.checked).toBe(true);24expect(checkbox.disabled).toBe(true);25import {matRadio} from 'ng-mocks';26const radio = matRadio(fixture, 'radio');27expect(radio).toBeDefined();28expect(radio.checked).toBe(true);29expect(radio.disabled).toBe(true);30import {matSlideToggle} from 'ng-mocks';31const slideToggle = matSlideToggle(fixture, 'slideToggle');32expect(slideToggle).toBeDefined();33expect(slideToggle.checked).toBe(true);34expect(slideToggle.disabled).toBe(true);35import {matSlider} from 'ng-mocks';36const slider = matSlider(fixture, 'slider');37expect(slider).toBeDefined();38expect(slider.value).toBe(10);39expect(slider.disabled).toBe(true);40import {matFormField} from 'ng-mocks';41const formField = matFormField(fixture, 'formField');42expect(formField).toBeDefined();43expect(formField.textContent).toBe('test formField');44import {mat

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { matInput } from 'ng-mocks';2const input = matInput(fixture, 'input');3import { matInput } from 'ng-mocks';4const input = matInput(fixture, 'input');5import { matFormField } from 'ng-mocks';6const formField = matFormField(fixture, 'input');7import { matFormFieldControl } from 'ng-mocks';8const formFieldControl = matFormFieldControl(fixture, 'input');9import { matSelect } from 'ng-mocks';10const select = matSelect(fixture, 'input');11import { matOption } from 'ng-mocks';12const option = matOption(fixture, 'input');13import { matOptionText } from 'ng-mocks';14const optionText = matOptionText(fixture, 'input');15import { matSelectTrigger } from '

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful