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

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//...

form-elements.component.ts

Source:form-elements.component.ts

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  }...

Using AI Code Generation

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 {}

Using AI Code Generation

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

Using AI Code Generation

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',

Using AI Code Generation

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 {}

Using AI Code Generation

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});

Using AI Code Generation

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';

Using AI Code Generation

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');

Using AI Code Generation

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

Using AI Code Generation

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 '

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.