Skip to content

Commit 6015dab

Browse files
Deepika516Deepika516
committed
select component testing
1 parent 8a64944 commit 6015dab

29 files changed

+612
-277
lines changed

‎projects/arc-lib/documentation.json

Lines changed: 265 additions & 120 deletions
Large diffs are not rendered by default.

‎projects/arc-lib/src/lib/components/auth/auth-routing.module.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const routes: Routes = [
99
path: '',
1010
component: AuthComponent,
1111
children: [
12-
{
13-
path: 'login',
14-
component: LoginComponent,
15-
},
12+
// {
13+
// path: 'login',
14+
// component: LoginComponent,
15+
// },
1616
],
1717
},
1818
];

‎projects/arc-lib/src/lib/components/auth/auth.module.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,6 @@ import { LoginPageComponent } from './login-page/login-page.component';
3636
forms: {},
3737
}),
3838
],
39+
exports:[LoginPageComponent]
3940
})
4041
export class AuthModule {}

‎projects/arc-lib/src/lib/components/auth/home-page/home-page.component.css

Whitespace-only changes.

‎projects/arc-lib/src/lib/components/auth/home-page/home-page.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>home-page works!</p>

‎projects/arc-lib/src/lib/components/auth/home-page/home-page.component.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HomePageComponent } from './home-page.component';
4+
5+
describe('HomePageComponent', () => {
6+
let component: HomePageComponent;
7+
let fixture: ComponentFixture<HomePageComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ HomePageComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(HomePageComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎projects/arc-lib/src/lib/components/auth/home-page/home-page.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'lib-home-page',
5+
templateUrl: './home-page.component.html',
6+
styleUrls: ['./home-page.component.css']
7+
})
8+
export class HomePageComponent {
9+
10+
}

‎projects/arc-lib/src/lib/components/auth/login-page/login-page.component.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<div class="main-section">
3+
<div class="first">
4+
<nb-card class="h-100 m-0">
5+
<nb-card-body class="p-0">
6+
<!-- Include the Login Component here -->
7+
<login></login>
8+
9+
10+
</nb-card-body>
11+
</nb-card>
12+
</div>
13+
14+
<div class="first">
15+
<nb-layout>
16+
<nb-layout-column>
17+
<div class="login-img">
18+
<img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" alt="loginImg" />
19+
</div>
20+
</nb-layout-column>
21+
</nb-layout>
22+
</div>
23+
</div>

‎projects/arc-lib/src/lib/components/auth/login-page/login-page.component.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.main-section {
2+
display: flex;
3+
}
4+
.first {
5+
width: 50%;
6+
}
7+
.main-section .first .nb-card{
8+
margin: 0;
9+
}

‎projects/arc-lib/src/lib/components/auth/login-page/login-page.component.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { LoginPageComponent } from './login-page.component';
4+
5+
describe('LoginPageComponent', () => {
6+
let component: LoginPageComponent;
7+
let fixture: ComponentFixture<LoginPageComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ LoginPageComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(LoginPageComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎projects/arc-lib/src/lib/components/auth/login-page/login-page.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'lib-login-page',
5+
templateUrl: './login-page.component.html',
6+
styleUrls: ['./login-page.component.scss']
7+
})
8+
export class LoginPageComponent {
9+
10+
11+
}

‎projects/arc-lib/src/lib/components/auth/login/login.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<nb-card class="h-100">
22
<nb-card-body>
33
<div class="align-center logo">
4-
<img width="20%" src= "{{image}}" alt="logo" draggable="false"
4+
<img width="20%" src= "assets/images/auth/angular.png" alt="logo" draggable="false"
55
height="126px" width="120px" />
66

77
<!-- src="baseHref + 'images/auth/angular.png'" -->

‎projects/arc-lib/src/lib/components/selector/list/list.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export class ListComponent<
151151
* It initializes the removed set, the visible list, and the search control
152152
*/
153153
ngOnInit(): void {
154-
debugger
154+
155155
console.log(this.options)
156156
this.removed = new Set();
157157
this.visibleList = Object.assign([], this.options);

‎projects/arc-lib/src/lib/components/selector/select/select.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,11 @@
8888
[cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.block()"
8989
[cdkConnectedOverlayOpen]="state === states.Open"
9090
[cdkConnectedOverlayPositions]="positions"
91-
[cdkConnectedOverlayWidth]="0"
91+
[cdkConnectedOverlayWidth]="width"
9292
(backdropClick)="close()"
9393
(detach)="close()"
9494
>
95+
<div>Hello</div>
9596
<!-- <app-list
9697
class="dropdown-panel"
9798
[options]="options"

‎projects/arc-lib/src/lib/components/selector/select/select.component.ts

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ ngOnChanges(changes: SimpleChanges): void {
340340
}
341341
this._dropdownHeight();
342342
this.updateSelectedItems();
343-
// this.updateTagsCount();
343+
this.updateTagsCount();
344344
}
345345

346346
/**
@@ -506,7 +506,7 @@ handleAutocompleteSelect(item: InputType) {
506506
*/
507507
open() {
508508
this.state = SelectState.Open;
509-
// this._updateWidth();
509+
this._updateWidth();
510510
}
511511

512512
/**
@@ -536,51 +536,51 @@ emitNewValue() {
536536
* It calculates the width of the tags and the input box and then decides which tags to show and which
537537
* to hide
538538
*/
539-
// updateTagsCount() {
540-
// // for cross and chevron if not disabled
541-
// this.suffixCount = this.disabledDropdown ? 0 : DIGITS.TWO;
542-
// if (this.invisibleTags.length) {
543-
// // for the counter box
544-
// this.suffixCount += 1;
545-
// }
546-
// this.invisibleTags = [];
547-
// this.visibleTags = Object.assign([], this.selectedItems.selected);
548-
// this._cdr.detectChanges();
549-
// const inputBuffer =
550-
// this.allowInput && !this.disabledDropdown
551-
// ? this.inputMinWidth + DIGITS.TWO * this.tagMargin
552-
// : 0;
553-
// const width = this.elementRef.nativeElement.getBoundingClientRect().width;
554-
// const rightPadding = this.suffixWidth * this.suffixCount;
555-
// const allowedWidth =
556-
// width - (this.padding * DIGITS.TWO + rightPadding + inputBuffer);
557-
// let combinedWidth = 0;
558-
// let i;
559-
// for (i = 0; i < this.tags.length; i++) {
560-
// const tag = this.tags.get(i);
561-
// if (!tag) {
562-
// break;
563-
// }
564-
// combinedWidth =
565-
// combinedWidth +
566-
// tag._hostElement.nativeElement.getBoundingClientRect().width +
567-
// DIGITS.TWO * this.tagMargin;
568-
// if (combinedWidth > allowedWidth) {
569-
// break;
570-
// }
571-
// }
572-
// if (i === 0) {
573-
// i = 1;
574-
// }
575-
// this.visibleTags = this.selectedItems.selected.slice(0, i);
576-
// this.invisibleTags = this.selectedItems.selected.slice(i);
577-
// // this required again to ensure proper width of input element
578-
// if (this.invisibleTags.length) {
579-
// // for the counter box
580-
// this.suffixCount += 1;
581-
// }
582-
// this._cdr.detectChanges();
583-
// }
539+
updateTagsCount() {
540+
// for cross and chevron if not disabled
541+
this.suffixCount = this.disabledDropdown ? 0 : DIGITS.TWO;
542+
if (this.invisibleTags.length) {
543+
// for the counter box
544+
this.suffixCount += 1;
545+
}
546+
this.invisibleTags = [];
547+
this.visibleTags = Object.assign([], this.selectedItems.selected);
548+
this._cdr.detectChanges();
549+
const inputBuffer =
550+
this.allowInput && !this.disabledDropdown
551+
? this.inputMinWidth + DIGITS.TWO * this.tagMargin
552+
: 0;
553+
const width = this.elementRef.nativeElement.getBoundingClientRect().width;
554+
const rightPadding = this.suffixWidth * this.suffixCount;
555+
const allowedWidth =
556+
width - (this.padding * DIGITS.TWO + rightPadding + inputBuffer);
557+
let combinedWidth = 0;
558+
let i;
559+
for (i = 0; i < this.tags.length; i++) {
560+
const tag = this.tags.get(i);
561+
if (!tag) {
562+
break;
563+
}
564+
combinedWidth =
565+
combinedWidth +
566+
tag._hostElement.nativeElement.getBoundingClientRect().width +
567+
DIGITS.TWO * this.tagMargin;
568+
if (combinedWidth > allowedWidth) {
569+
break;
570+
}
571+
}
572+
if (i === 0) {
573+
i = 1;
574+
}
575+
this.visibleTags = this.selectedItems.selected.slice(0, i);
576+
this.invisibleTags = this.selectedItems.selected.slice(i);
577+
// this required again to ensure proper width of input element
578+
if (this.invisibleTags.length) {
579+
// for the counter box
580+
this.suffixCount += 1;
581+
}
582+
this._cdr.detectChanges();
583+
}
584584

585585
/**
586586
* It takes an item of type T and returns it as a string
@@ -683,17 +683,18 @@ private _initSelectionModel() {
683683
/**
684684
* It updates the width of the dropdown overlay element.
685685
*/
686-
// private _updateWidth() {
687-
// this.width = this.elementRef.nativeElement.getBoundingClientRect().width;
688-
// this._cdr.detectChanges();
689-
// }
686+
private _updateWidth() {
687+
688+
this.width = 100;
689+
this._cdr.detectChanges();
690+
}
690691

691692
/**
692693
* It updates the width of the panel overlay element.
693694
*/
694695
private _panelWidth(type: PanelType) {
695-
this.panels[type].width =
696-
this.elementRef.nativeElement.getBoundingClientRect().width;
696+
this.panels[type].width =100;
697+
697698
this._cdr.detectChanges();
698699
}
699700

‎projects/arc-lib/src/stories/components/Login.stories.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { moduleMetadata } from '@storybook/angular';
2+
import { CommonModule } from '@angular/common';
3+
import { NbLayoutModule, NbCardModule, NbStatusService, NbThemeService } from '@nebular/theme';
4+
import { Meta, Story } from '@storybook/angular';
5+
import { LoginComponent } from '@project-lib/components/auth/login/login.component';
6+
7+
// Import your components
8+
// Replace with the actual path
9+
10+
export default {
11+
title: 'Main Section',
12+
decorators: [
13+
moduleMetadata({
14+
declarations: [], // Add your components here
15+
imports: [CommonModule, NbLayoutModule, NbCardModule],
16+
providers:[NbStatusService,NbThemeService]
17+
}),
18+
],
19+
} as Meta;
20+
21+
const Template: Story = () => ({
22+
template: `
23+
<div class="main-section">
24+
<div class="first">
25+
<nb-card class="h-100 m-0">
26+
<nb-card-body class="p-0">
27+
<!-- Include the Login Component here -->
28+
<app-login></app-login>
29+
</nb-card-body>
30+
</nb-card>
31+
</div>
32+
<div class="first">
33+
<nb-layout>
34+
<nb-layout-column>
35+
<div class="login-img">
36+
<img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" alt="loginImg" />
37+
</div>
38+
</nb-layout-column>
39+
</nb-layout>
40+
</div>
41+
</div>
42+
`,
43+
});
44+
45+
export const MainSection = Template.bind({});
46+

‎projects/arc-lib/src/stories/components/LoginPage.stories.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,17 @@ export default {
4444
});
4545

4646
export const Default = Template.bind({});
47-
Default.args = {};
47+
Default.args = {};
48+
49+
// export const WithImage = Template.bind({});
50+
51+
// WithImage.args:Story = {
52+
53+
// render: () => {<img src="/images/Illustration.svg" alt="my image" />},
54+
// loggedInUserDM: {
55+
// /* Set your user data here if needed */
56+
// },
57+
58+
// greeting: 'Hello, World!',
59+
// };
60+

0 commit comments

Comments
 (0)