feat: 🍰 Hero image height on post page is now set without having to wait for…
Created by: Tirokk
Authored by DriesCruyskens Merged
… the image to load. Vue gives the image aspect ratio to css as a css variable, css then sets the correct height in fuction of the width.
🍰 Pullrequest
The implementation uses CSS to determine the height of the Card image and thus only affects the Post page, whereas a solution using Javascript to explicitly setting the height would need communication between the Post page and the Card component for the aspect ratio to be propagated. I think this would needlessly clutter the card component since the issue is related to the Post component only.
The solution might be seen as a 'CSS hack' to a few people but I think it is the most concise solution for the problem and is mentioned by W3 https://www.w3schools.com/howto/howto_css_aspect_ratio.asp.
Here is a GIF demonstrating the problem, before my pull request:
This is after the PR:
Issues
- fixes #3013 (closed)
Todo
-
None
Test
Solution works using a Neo4j cloud sandbox to simulate real loading times. Using the docker compose setup gives near instant loading times making it difficult too see the fix in action.
- Front-end
✔ ️ - Lint
✔ ️ - Back-end
❔ - End-to-end
❔
TLDR: all test should succeed, but don't on a windows machine. Someone else or CD/CI pipeline should verify.
Both end-to-end and back-end tests don't even work on a clean master git clone while the app works when developing. Since some things have to be done through WSL in order to work (like yarn test .\pages\post\_id\_slug\index.spec.js) I think this might have to do with me developing on a windows machine (windows 10 Pro 1909). This pull request/fix is pretty minimal so it shouldn't break anything end-to-end or back-end wise. If anyone with a working test suite can verify...
This is the error for end-to-end tests:
Running: administration\PinPost.feature (1 of 19)
Pin a post
√ Pinned post always appears on the top of the newsfeed (23921ms)
√ Ordinary users cannot pin a post (15954ms)
1) "before each" hook for "Admins are allowed to pin a post"
2 passing (1m)
1 failing
1) Pin a post "before each" hook for "Admins are allowed to pin a post":
TypeError: Cannot read property 'isAttached' of undefined
Because this error occurred during a 'before each' hook we are skipping all of the remaining tests.
at C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\lib\browsers\firefox-util.js:98:20
at tryCatcher (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
at C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\method.js:15:34
at C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\lib\browsers\firefox-util.js:227:40
at tryCatcher (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:729:18)
at _drainQueueStep (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:93:12)
at _drainQueue (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:86:9)
at Async._drainQueues (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:102:5)
at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\dries\AppData\Local\Cypress\Cache\4.2.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:15:14)
at processImmediate (internal/timers.js:439:21)And these are the failed back-end tests:
Summary of all failing tests
FAIL src/schema/resolvers/reports.spec.js (126.348s)
● file a report on a resource › query for reported resource › unauthenticated › throws authorization error
Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.
at mapper (node_modules/jest-jasmine2/build/queueRunner.js:27:45)
FAIL src/middleware/notifications/notificationsMiddleware.spec.js (61.567s)
● notifications › authenticated › given another user › mentions me in a post › updates the post and
mentions me again › if the notification was marked as read earlier › but the next mention happens after the notification was marked as read › sets the `read` attribute to false again
: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:
378 |
379 | describe('but the next mention happens after the notification was marked as read', () => {
> 380 | it('sets the `read` attribute to false again', async () => {
| ^
381 | await createPostAction()
382 | await markAsReadAction()
383 | const {
at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:380:15)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:379:13)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:367:11)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:307:9)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:253:7)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:108:5)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:103:3)
at Object.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:81:1)
● notifications › authenticated › given another user › mentions me in a post › updates the post and
mentions me again › if the notification was marked as read earlier › but the next mention happens after the notification was marked as read › does not update the `createdAt` attribute
: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:
400 | })
401 |
> 402 | it('does not update the `createdAt` attribute', async () => {
| ^
403 | await createPostAction()
404 | await markAsReadAction()
405 | const {
at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:402:15)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:379:13)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:367:11)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:307:9)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:253:7)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:108:5)
at Suite.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:103:3)
at Object.<anonymous> (src/middleware/notifications/notificationsMiddleware.spec.js:81:1)
Test Suites: 2 failed, 38 passed, 40 total
Tests: 3 failed, 1 skipped, 1 todo, 455 passed, 460 total
Snapshots: 0 total
Time: 1342.549s, estimated 1356s