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.
|
||
|---|---|---|
| .. | ||
| app | ||
| config | ||
| lib | ||
| mirage | ||
| public/assets | ||
| tests | ||
| .editorconfig | ||
| .ember-cli | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .lint-todo | ||
| .lint-todorc.js | ||
| .template-lintrc.js | ||
| .watchmanconfig | ||
| ember-cli-build.js | ||
| ember-cli-update.json | ||
| jsconfig.json | ||
| package.json | ||
| README.md | ||
| testem.js | ||
Ghost-Admin
This is the home of the Ember.js-based Admin app that ships with Ghost.
Running tests
Build and run tests once:
TZ=UTC yarn test
Note the TZ=UTC environment variable which is currently required to get tests working if your system timezone doesn't match UTC.
If you are serving the admin app (e.g., when running yarn serve, or when running yarn dev in the main Ghost project), you can also run the tests in your browser by going to http://localhost:4200/tests.
This has the additional benefit that you can use await this.pauseTest() in your tests to temporarily pause tests (best to also add this.timeout(0); to avoid timeouts). This allows you to inspect the DOM in your browser to debug tests. You can resume tests by running resumeTest() in your browser console.
Writing tests
When writing tests and not using the http://localhost:4200/tests browser tests, it can be easier to have a separate watching build that builds the project for the test environment (this drastically reduces the time you have to wait when running tests):
yarn build --environment=test -w -o="dist-test"
After that, you can easily run tests locally:
Run all tests:
TZ=UTC yarn test 1 --path="dist-test"
To have a cleaner output:
TZ=UTC yarn test 1 --reporter dot --path="dist-test"
This shows a dot (.) for every successful test, and F for every failed test. At the end, it will only show the output of the failed tests.
To run a specific test file:
TZ=UTC yarn test 1 --reporter dot --path="dist-test" -mp=tests/acceptance/settings/newsletters-test.js
Hint: you can easily copy the path of a test in VSCode by right clicking on the test file and choosing Copy Relative Path.
To have a full list of the available options, run
ember exam --help
Copyright & License
Copyright (c) 2013-2023 Ghost Foundation - Released under the MIT license. Ghost and the Ghost Logo are trademarks of Ghost Foundation Ltd. Please see our trademark policy for info on acceptable usage.