Fix i18n placeholder replacement and make tests robust

[obulat]

Fixes

Follow up fixes after #5261 and #5323

Description

The main reason for this PR was to fix the CI failures. The visual regression tests failed because the locale fallback mechanism broke, so when the locale (Arabic for RTL) string wasn't available, instead of falling back to the English, the i18n keys were used.

The cause was the update of Nuxt i18n and Nuxt in the CI. Playwright tests in CI did not use the locked dependencies from pnpm-lock.yaml, and were resolving dependencies differently. So, instead of the Nuxt 3.15.1 and @nuxtjs/i18n 9.1.1., 3.15.2 and 9.1.2 were being installed (check the installed dependencies in this failed run: https://github.com/WordPress/openverse/actions/runs/12894308773/job/35973352713?pr=5341). This combination somehow broke the fallback mechanism.

In this PR, I added a step to copy pnpm-lock.yaml to the Playwright container to ensure that the locked dependencies are installed.

Other fixes

i18n static placeholders

#5261 has replaced {openverse} placeholders with {'Openverse'}, but failed making the corresponding changes to the pot creation script. So, instead of ###openverse###, GlotPress displayed {'Openverse'}. The converted locale json files contained illegal characters. This was caught by eslint in PRs.

fetchState props

#5323 left out the canLoadMore prop from audio/collection.vue, didn't update the CollectionLink story props, and left a stray console.log statement.

App setup on server request

Locally, sometimes you can get a text stats response from the API instead of json, and this breaks the setup because stats are called on every SSR request. To handle that, I updated the plugin order:

• init plugin only sets up the app using available data (cookies)
• init-stores plugin is moved later in the initialization chain, so that the error handling and analytics plugins are already available.

This PR also makes the Playwright tests more robust by adding the color mode cookies updating the selectors for changing the color mode, and replacing the getter in the watcher with a computed (to make the change faster).

Testing Instructions

The CI should pass.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (ov just catalog/generate-docs for catalog
  PRs) or the media properties generator (ov just catalog/generate-docs media-props
  for the catalog or ov just api/generate-docs for the API) where applicable.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[github-actions]

Latest k6 run output¹

     ✓ status was 200

     checks.........................: 100.00% ✓ 412      ✗ 0   
     data_received..................: 96 MB   397 kB/s
     data_sent......................: 54 kB   225 B/s
     http_req_blocked...............: avg=57.89µs  min=2.2µs    med=4.56µs   max=1.12ms   p(90)=163.07µs p(95)=242.81µs
     http_req_connecting............: avg=30.63µs  min=0s       med=0s       max=1.08ms   p(90)=108.42µs p(95)=167.29µs
     http_req_duration..............: avg=162.37ms min=17.67ms  med=104.92ms max=1s       p(90)=352.79ms p(95)=457.22ms
       { expected_response:true }...: avg=162.37ms min=17.67ms  med=104.92ms max=1s       p(90)=352.79ms p(95)=457.22ms
   ✓ http_req_failed................: 0.00%   ✓ 0        ✗ 412 
     http_req_receiving.............: avg=163.44µs min=52.77µs  med=137.86µs max=2.69ms   p(90)=256.73µs p(95)=311.11µs
     http_req_sending...............: avg=25.09µs  min=8.79µs   med=21.73µs  max=177.65µs p(90)=33.86µs  p(95)=50.7µs  
     http_req_tls_handshaking.......: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s      
     http_req_waiting...............: avg=162.18ms min=17.55ms  med=104.73ms max=1s       p(90)=352.45ms p(95)=456.99ms
     http_reqs......................: 412     1.709126/s
     iteration_duration.............: avg=875.87ms min=374.96ms med=883.03ms max=1.71s    p(90)=1.16s    p(95)=1.49s   
     iterations.....................: 77      0.319424/s
     vus............................: 3       min=0      max=6 
     vus_max........................: 60      min=60     max=60

Footnotes

1. This comment will automatically update with new output each time k6 runs for this PR ↩

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/5343

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

Changed files 🔄:

• https://docs.openverse.org/_preview/5343/frontend/reference/i18n.html

[dhruvkb]

I'm still wrapping my head around the lockfile moving and copying but here are some small nits and questions so far.

[dhruvkb]

How is () => updateRefs() different from updateRefs? Does it fix a problem or is it a stylistic/conventional thing?

[obulat]

I'm not certain. I added this change trying to fix the cases where Playwright would select an option, but the selected option was still the same on the next line. I think the previous way has one more layer of indirection than what is here, and maybe the change happens in a different tick of the event loop so that Playwright sees the not-yet-changed version?

Update: sorry, all of the above refers to changing from ()=>[computed.value] to [computed]

With the function, the change should be reverted. I added it to add logs around it

[dhruvkb]

Nit: Why not remove the line?

[obulat]

Updated to only log if verbose is set to true. This could be very useful for debugging CI failures.

[dhruvkb]

I have one question about the lock-file movement.

[dhruvkb]

Why does this copy pnpm-lock.yaml file from the parent directory when the ci_cd.yml file has copied it into frontend/? Also how is this Dockerfile able to access files from one level up? As per my understanding, it would not be part of the Docker context.

[obulat]

Updated to copy from frontend directory to docker.