⬆️ Upgrade DaisyUI v4 #405
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
moved tailwindcss, postcss, autoprefixer, and daisyui to dev deps list given they are strictly build-time.
Added accessibility-driven, automated Playwright test to verify main user story: enter GitHub repo, obtain preview URL, and see preview. Updated yarn testing scripts in package.json. Made repo.tsx more accessible.
Updated landing page UI to be compatible with DaisyUI v4. Also proposing minor simplifications for best migration compatibility.
🦋 Changeset detectedLatest commit: 65bb644 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
| Name | Link |
|---|---|
| 🔨 Latest commit | 718e1fc |
|
@wei Also adding myself as a contributor in "contributors": [
{
"name": "Keming He",
"email": "[email protected]",
"url": "https://linkedin.com/in/keminghe"
}
], |
Resolved all visual diffs caused by original code bumping to DaisyUI v4, including but not limited to: landing page, error (404) page, config page, download success toast, etc. Confirmed app behavior maintained same as before via Playwrite e2e test on main user story.
added playwright test suite (allowed 2% pixel diff due to how NextJS dev server loads pages) for landing, preview config, and error pages.
@wei You might want to trigger a re-deploy to see the latest changes, given Netlify doesn't insta-rebuild per commit update like Vercel used to. 🌻 |
also updated all ui test suites (Jest and Playwright)
This was referenced Dec 3, 2024
Closed
|
Hi @wei , new heads-up: before you review this one, I have a few final best practice clean-ups on my own changes so far I want to implement. Will be done by end of day Thur. 12/05. Will keep you posted! Best, K.H |
wei
reviewed
Dec 5, 2024
also updated full playwright test suite, taking into consideration stars for repo changes but description doesn't. also updated success toaster color to v2 color.
Success ToasterAlso updated success toaster to v2 color. Plus, now comes with Playwright screenshot as well:
|
|
@wei there's still a lot of rooms to improve Playwright for Socialify, i.e. testing all the different styling and attribute combinations (though this is inconsistent as Stars, Issues, and PR numbers change). Simpler areas improvement include adding a GitHub Action and debugging and enabling the Safari tests. I can certainly come back to this after we get much of the other well-deserved feature/upgrade implemented. Just keep it mind and let me know. ☀️ |
|
Excellent will review and get these awesome improvements merged later this week! |
Added appropriate NextJS dev server config and Playwright waitFor statements to ensure 100% consistent UI loading, interactivity, and transitions. Updated snapshots to ensure and enforce future consistency. Dropped the previous 2% buffer.
KemingHe
changed the title
|
Hi @wei , just eliminated the last 2% pixel diff buffer using // Wait for the page to load/hydrate completely.
await page.waitForLoadState('networkidle', customPageLoadTimeout)and // Wait for the component transition/animation to finish completely.
await page.waitForTimeout(customTransitionTimeout.timeout)in We can now always be 100% confident that the UI is visually AND functionally consistent once these tests are merged and enforced. Hear from your review soon! |
wei
reviewed
Dec 9, 2024
package.json
Outdated
| "email": "[email protected]", | ||
| "url": "https://linkedin.com/in/keminghe" | ||
| } | ||
| ], |
There was a problem hiding this comment.
I like your email address hehe! Great idea~ What do you think about using all contributors spec or similar in README.md so it's easier to maintain and more visible, instead of ballooning the package.json?
KemingHe
added a commit
to KemingHe/contrib-socialify
that referenced
this pull request
Dec 11, 2024
selectively checked out wei#405 's updated working 100% passing Playwright tests and config to current branch. Resovled to not including stargazers issue mentioned in wei#404 comments. Updated all snapshots to reflect this new config. Also only using Chrome and Mobile Chrome to ensure small testing footprint while covering responsiveness of the app.
Merged
wei
added a commit
that referenced
this pull request
Dec 12, 2024
* 🔧 Moved build-only deps to dev-deps list moved tailwindcss, postcss, autoprefixer, and daisyui to dev deps list given they are strictly build-time. * 📝 Updated changeset with info on latest commit. * ✅ Added Playwright test to main user story, updated scripts Added accessibility-driven, automated Playwright test to verify main user story: enter GitHub repo, obtain preview URL, and see preview. Updated yarn testing scripts in package.json. Made repo.tsx more accessible. * 📝 Updated changeset following last playwright commit * ⬆️ Bump nanoid in the npm_and_yarn group across 1 directory Bumps the npm_and_yarn group with 1 update in the / directory: [nanoid](https://github.com/ai/nanoid). Updates `nanoid` from 3.3.7 to 3.3.8 - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](ai/nanoid@3.3.7...3.3.8) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> * ✅ Updated Playwright tests, config, and snapshots selectively checked out #405 's updated working 100% passing Playwright tests and config to current branch. Resovled to not including stargazers issue mentioned in #404 comments. Updated all snapshots to reflect this new config. Also only using Chrome and Mobile Chrome to ensure small testing footprint while covering responsiveness of the app. * 📝 Added contrib instructions and credits to devs in readme added detailed project setup, forking, local dev server, and testing and contributing instructions in readme. also added "community" section crediting all contributors to socialify so far. * 📝 Generated changeset to reflect latest commits. * 👷 Configured Playwright for the build.yml CI script. Given that GITHUB_TOKEN is a reserved env var, testing if renaming the secret to SOCIALIFY_GITHUB_TOKEN and mapping it to the GITHUB_TOKEN env is a viable workaround. * 👷 Reverted back to using default GITHUB_TOKEN to test fix. Previous commit of using a separate SOCIALIFY_GITHUB_TOKEN didn't work. Reverting back to using the default {{ secrets.GITHUB_TOKEN }} auto-assigned by GitHub Actions per run to test the fix. * 💚 Used step-scoped env rewrite to ensure GITHUB_TOKEN is valid for ci. GITHUB_TOKEN is reserved for GitHub Actions. Since Socialify uses the same named env, we must rewrite it only for the `yarn verify` step in the `build.yml` script. Requires repo-level actions secret ${{ secrets.SOCIALIFY_GITHUB_TOKEN }}. * 💚 Added PROJECT_URL env to ci script. Previous CI script might also be missing the PROJECT_URL env, added as a secret accessible at the same step level as the SOCIALIFY_GITHUB_TOKEN. * 👷 Added upload playwright artifact to help debug behavior diff. * 👷 Added continue-on-error: true to ci to ensure debugging artifact upload * 👷 Reconfig ci Playwright artifact upload. * 📝 Clarified changeset requirements in README.md. * 👷 Added --frozen-lockfile to yarn install in build.yml * 📝 Updated README.md contrib instr per owner's comments. * ✅ Specified font usage for Socialify to maintain Playwright consistency. * 💄 Updated to using the Inter variable font for best prod UI match. * 👷 Testing if fixed weight Inter improves CI Playwright * ✅ Added +1s to Playwright animation waiting to ensure consistency in CI. * ✅ Gave UI transition timeout a total of 5s to try improving consistency. Add multi-line, detailed description * ✅ Added 1% allowed buffer to UI test, kept user story test 100%. * ✅ Revised Playwright threshold: 99% for UI and 100% for output/user story Due to known GitHub Actions CI Playwright inconsistency issue not resolvable by waiting longer nor changing fonts, I propose 99% threshold for UI tests while keeping output/user story tests threshold at 100%. * 📝 Update README.md * 💚 Fix CI Build --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Wei He <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Wei He <[email protected]>
wei
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
DaisyUI v4 Bump Success
@wei No drastic changes, everything is able to be bumped just fine.
Plus I added a full UI screenshot test suite for all major pages:
index.tsx, 404.tsx, and the dynamic preview onein/.playwright/mainUIConsistency.spec.ts.Please understand that DaisyUI made drastic changes to its
primarycolor from v2 to v4; thus allbtn-primaryare hard-coded withbg-[#661AE6] text-white, more see below:All screenshots are auto-generated by Playwright.
Landing Page
Preview Config Page
Error Page