Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preview fixes #257

Merged
merged 7 commits into from
Apr 22, 2022
Merged

Preview fixes #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ba33389
feat(): previews template customization
locinus Feb 11, 2022
0f7a13c
test(): previews template customization
locinus Apr 3, 2022
c24cf42
fix(): previews template - css fix
locinus Apr 7, 2022
b3c56da
refactor(): previews template example
locinus Apr 7, 2022
f819fcb
Merge branch 'Ks89:develop' into develop
locinus Apr 22, 2022
352598a
fix(): previews indexes calculation
locinus Apr 13, 2022
13b82b6
fix(): previews arrows in infinite mode
locinus Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 139 additions & 1 deletion projects/ks89/angular-modal-gallery/src/lib/components/previews/previews.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,15 @@ describe('PreviewsComponent', () => {

previews = element.queryAll(By.css('img'));

previews[1].nativeElement.click();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addresses: 1. clicking the right image arrow always shifts the displayed previews, even in cases where it shouldn't, for instance for nbPreviews>=3 and current=0

// previews[1].nativeElement.click();
comp.ngOnChanges({
currentImage: {
previousValue: IMAGES[0],
currentValue: IMAGES[1],
firstChange: false,
isFirstChange: () => false
}
} as SimpleChanges);
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[1], 0, 3, 1);
// images = IMAGES.slice(0, 3);
// for (let i = 0; i < images.length; i++) {
Expand Down Expand Up @@ -853,6 +861,136 @@ describe('PreviewsComponent', () => {
checkPreview(previews[i], previewImages[i], i === 0, DEFAULT_PREVIEW_SIZE);
}
});

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addresses: 2. the number of previews oscillate between n (number of requested previews) and n-1/n+1, for example when n=4 or n=5

[4, 5].forEach((previewNumber: number) => {
it(`should display a constant number of previews (${previewNumber}), independent of current image index`, waitForAsync(() => {
const configService = fixture.debugElement.injector.get(ConfigService);
const previewConfig = Object.assign({}, PREVIEWS_CONFIG_VISIBLE, { number: previewNumber }) as PreviewConfig;
configService.setConfig(GALLERY_ID, {
previewConfig,
accessibilityConfig: KS_DEFAULT_ACCESSIBILITY_CONFIG,
slideConfig: SLIDE_CONFIG
});
comp.id = GALLERY_ID;
comp.currentImage = IMAGES[0];
comp.images = IMAGES;
comp.ngOnInit();
expect(comp.previews.length).toBe(previewNumber);

// click on the second picture
comp.currentImage = IMAGES[1]; // set component input
comp.ngOnChanges({ // trigger changes manually (not done automatically in tests)
currentImage: {
previousValue: IMAGES[0],
currentValue: IMAGES[1],
firstChange: false,
isFirstChange: () => false
}
} as SimpleChanges);
// at the time of writing this test, a change is detected within 'images', yet with the same value
comp.ngOnChanges({
images: {
previousValue: IMAGES,
currentValue: IMAGES,
firstChange: false,
isFirstChange: () => false
}
} as SimpleChanges);
expect(comp.previews.length).toBe(previewNumber);

// click on the third picture
comp.currentImage = IMAGES[2]; // set component input
comp.ngOnChanges({ // trigger changes manually (not done automatically in tests)
currentImage: {
previousValue: IMAGES[1],
currentValue: IMAGES[2],
firstChange: false,
isFirstChange: () => false
}
} as SimpleChanges);
// at the time of writing this test, a change is detected within 'images', yet with the same value
comp.ngOnChanges({
images: {
previousValue: IMAGES,
currentValue: IMAGES,
firstChange: false,
isFirstChange: () => false
}
} as SimpleChanges);
expect(comp.previews.length).toBe(previewNumber);
}));
});

it('should allow to navigate previews from first to last and back', () => {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addresses: when opening the modal and navigating to the last preview by clicking on the right preview arrow, it's impossible to then click on the left preview arrow: isPreventSliding() prevents it

const configService = fixture.debugElement.injector.get(ConfigService);
configService.setConfig(GALLERY_ID, {
previewConfig: PREVIEWS_CONFIG_VISIBLE,
accessibilityConfig: KS_DEFAULT_ACCESSIBILITY_CONFIG,
slideConfig: SLIDE_CONFIG
});
comp.id = GALLERY_ID;
comp.currentImage = IMAGES[0];
comp.images = IMAGES;
comp.ngOnInit();
fixture.detectChanges();
const element: DebugElement = fixture.debugElement;
let previews: DebugElement[] = element.queryAll(By.css('img'));

const leftArrow = element.query(By.css('a.nav-left')).nativeElement as HTMLAnchorElement;
const rightArrow = element.query(By.css('a.nav-right')).nativeElement as HTMLAnchorElement;
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 0, 3, 0);

// click right until the last preview is reached
rightArrow.click();
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 1, 4, 0);
rightArrow.click();
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 2, 5, 0);
// click left until the first preview is reached
leftArrow.click();
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 1, 4, 0);
leftArrow.click();
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 0, 3, 0);
// click right again and check previews have changed accordingly
rightArrow.click();
checkPreviewStateAfterClick(previews, IMAGES[0], IMAGES[0], 1, 4, 0);

});

it('should always display previews navigation arrows, in infinite sliding mode (nbPreviews < nbImages)', () => {
const configService = fixture.debugElement.injector.get(ConfigService);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addresses: 4. in infinite sliding, the left and right preview arrows should be always visible (like the left and right image arrows), except if nbPreviews < images.length

configService.setConfig(GALLERY_ID, {
previewConfig: PREVIEWS_CONFIG_VISIBLE,
accessibilityConfig: KS_DEFAULT_ACCESSIBILITY_CONFIG,
slideConfig: SLIDE_CONFIG_INFINITE
});
comp.id = GALLERY_ID;
comp.currentImage = IMAGES[0];
comp.images = IMAGES;
comp.ngOnInit();
fixture.detectChanges();
const element: DebugElement = fixture.debugElement;
const leftArrow = element.query(By.css('a.nav-left')).nativeElement as HTMLAnchorElement;
const rightArrow = element.query(By.css('a.nav-right')).nativeElement as HTMLAnchorElement;
let leftArrowDiv = element.query(By.css('a.nav-left > div')).nativeElement as HTMLAnchorElement;
let rightArrowDiv = element.query(By.css('a.nav-right > div')).nativeElement as HTMLAnchorElement;
// check that arrows are initially visible
expect(leftArrowDiv.classList).toContain('left-arrow-preview-image');
expect(rightArrowDiv.classList).toContain('right-arrow-preview-image');
// click right until the last preview is reached, each time check that arrows are visible
rightArrow.click();
fixture.detectChanges();
leftArrowDiv = element.query(By.css('a.nav-left > div')).nativeElement as HTMLAnchorElement;
rightArrowDiv = element.query(By.css('a.nav-right > div')).nativeElement as HTMLAnchorElement;
expect(leftArrowDiv.classList).toContain('left-arrow-preview-image');
expect(rightArrowDiv.classList).toContain('right-arrow-preview-image');
rightArrow.click();
fixture.detectChanges();
leftArrowDiv = element.query(By.css('a.nav-left > div')).nativeElement as HTMLAnchorElement;
rightArrowDiv = element.query(By.css('a.nav-right > div')).nativeElement as HTMLAnchorElement;
expect(leftArrowDiv.classList).toContain('left-arrow-preview-image');
expect(rightArrowDiv.classList).toContain('right-arrow-preview-image');
});

});

describe('---NO---', () => {
Expand Down
Loading