9339364dce
no issue
- Copied over the Unsplash Component from Koenig to AdminX and converted
it to Typescript.
- Changed the business logic to follow a bit of dependency injection to
make it more testable and easier to maintain.
- Ideally we move this out of Admin X Settings and perhaps into it's own
library so we don't need to deal with a duplicate code between Koenig
and Admin X.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at a40bf5b</samp>
This pull request adds support for selecting images from Unsplash in the
admin settings UI. It introduces a new `UnsplashService` class that
handles the Unsplash API requests and a new `MasonryService` class that
handles the masonry layout of the images. It also adds several new
custom components, such as `UnsplashButton`, `UnsplashGallery`,
`UnsplashImage`, `UnsplashSelector`, `UnsplashZoomed`, and
`UnsplashSearchModal`, that render the Unsplash modal and its elements.
It modifies the existing `ImageUpload`, `App`, `ServicesProvider`, and
`BrandSettings` components to integrate the Unsplash feature and pass
the necessary props. It also adds some new types, constants, and assets
related to the Unsplash data and UI. Finally, it adds some unit tests
for the `UnsplashService` and `MasonryService` classes.
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import MasonryService from '../../../src/utils/unsplash/masonry/MasonryService';
|
|
import {Photo} from '../../../src/utils/unsplash/UnsplashTypes';
|
|
import {fixturePhotos} from '../../../src/utils/unsplash/api/unsplashFixtures';
|
|
|
|
describe('MasonryService', () => {
|
|
let service: MasonryService;
|
|
let mockPhotos: Photo[];
|
|
|
|
beforeEach(() => {
|
|
service = new MasonryService(3);
|
|
mockPhotos = fixturePhotos;
|
|
});
|
|
|
|
it('should initialize with default column count', () => {
|
|
expect(service.columnCount).toEqual(3);
|
|
});
|
|
|
|
describe('reset', () => {
|
|
it('should reset columns and columnHeights', () => {
|
|
service.reset();
|
|
expect(service.columns.length).toEqual(3);
|
|
expect(service.columnHeights!.length).toEqual(3);
|
|
});
|
|
});
|
|
|
|
describe('addPhotoToColumns', () => {
|
|
it('should add photo to columns with the minimum height)', () => {
|
|
service.reset();
|
|
service.addPhotoToColumns(mockPhotos[0]);
|
|
expect(service.columns![0]).toContain(mockPhotos[0]);
|
|
});
|
|
});
|
|
|
|
describe('getColumns', () => {
|
|
it('should return the columns', () => {
|
|
service.reset();
|
|
const columns = service.getColumns();
|
|
expect(columns).toEqual(service.columns);
|
|
});
|
|
});
|
|
|
|
describe('changeColumnCount', () => {
|
|
it('should change the column count and reset', () => {
|
|
service.changeColumnCount(4);
|
|
expect(service.columnCount).toEqual(4);
|
|
expect(service.columns.length).toEqual(4);
|
|
expect(service.columnHeights!.length).toEqual(4);
|
|
});
|
|
|
|
it('should not reset if the column count is not changed', () => {
|
|
const prevColumns = service.getColumns();
|
|
service.changeColumnCount(3);
|
|
expect(service.getColumns()).toEqual(prevColumns);
|
|
});
|
|
});
|
|
});
|