feat(dashrate): add single-file lite companion with test coverage#103
Conversation
Adds dashrate-lite.html, a no-build, CDN-loaded standalone page that demonstrates the same read-only count/query SDK patterns as the React app, for readers who want a minimal reference without a toolchain. Adds a Playwright spec exercising it against real testnet.
📝 WalkthroughWalkthroughAdds a new single-file "DashRate Lite" static HTML page (example-apps/dashrate/public/dashrate-lite.html) that connects to Dash Platform testnet to browse and filter review documents, computing aggregate ratings and rendering recent reviews. Adds a corresponding Playwright e2e test spec covering connection, filtering, and refresh flows. ChangesDashRate Lite Page and Tests
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant UI as dashrate-lite.html UI
participant SDK as EvoSDK
participant Platform as Dash Platform Testnet
User->>UI: load page
UI->>SDK: EvoSDK.testnetTrusted().connect()
SDK->>Platform: establish connection
Platform-->>SDK: connection established
SDK-->>UI: connected status
UI-->>User: enable controls, show "Connected to testnet"
User->>UI: select resource / change rating filter / click refresh
UI->>SDK: sdk.documents.count (total, grouped by rating)
UI->>SDK: sdk.documents.query (where rating, orderBy, limit)
SDK->>Platform: fetch counts and documents
Platform-->>SDK: query results
SDK-->>UI: counts and review documents
UI->>UI: normalize results, compute average score
UI-->>User: render aggregate panel and recent reviews
Related PRs: None found. Suggested labels: documentation, example-app, e2e-tests Suggested reviewers: None determined from provided context. 🐰 A rabbit hops through star-filled code, 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
example-apps/dashrate/test/e2e/lite.spec.tsESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
example-apps/dashrate/test/e2e/lite.spec.ts (1)
1-99: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winDouble quotes violate repo Prettier guideline.
The file consistently uses double quotes (e.g. Line 1, Line 3, Lines 9-11), but the project's Prettier config for
**/*.{js,mjs,ts,tsx,json}mandates single quotes.As per coding guidelines, "Prettier formatting must use single quotes, 2-space indentation, and trailing commas."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example-apps/dashrate/test/e2e/lite.spec.ts` around lines 1 - 99, The Playwright test file formatting is inconsistent with the repo’s Prettier rule because it uses double quotes instead of single quotes. Update the literals and string-based selectors in the dashrate-lite e2e spec to match the project style, keeping the existing structure and behavior of test.describe, test, and page.locator/getByRole calls unchanged.Source: Coding guidelines
🧹 Nitpick comments (3)
example-apps/dashrate/test/e2e/lite.spec.ts (1)
6-98: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract repeated navigation/connection setup into a
beforeEachhook.Every test repeats
page.goto(LITE_URL)followed by the same#status"Connected to testnet" assertion (Lines 7-11, 21-24, 39-42, 58-61, 74-77). Hoisting this intotest.beforeEachwould reduce duplication.♻️ Proposed refactor
test.describe("dashrate-lite (single-file companion)", () => { + test.beforeEach(async ({ page }) => { + await page.goto(LITE_URL); + await expect(page.locator("`#status`")).toHaveText(/Connected to testnet/, { + timeout: 60_000, + }); + }); + test("connects to testnet and enables controls on load", async ({ page }) => { - await page.goto(LITE_URL); - - await expect(page.locator("`#status`")).toHaveText(/Connected to testnet/, { - timeout: 60_000, - }); await expect(page.locator("`#refresh-btn`")).toBeEnabled({ timeout: 60_000, }); await expect(page.locator("`#rating-filter`")).toBeEnabled(); });(similarly remove the duplicated goto/status block from the remaining tests)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example-apps/dashrate/test/e2e/lite.spec.ts` around lines 6 - 98, The lite.spec.ts e2e tests repeat the same page.goto(LITE_URL) and "`#status`" Connected to testnet wait in every test, so hoist that shared setup into a test.beforeEach hook. Update the tests in the suite to rely on the shared beforeEach, and keep the per-test assertions/actions focused on their specific behavior while preserving references like LITE_URL, `#status`, and the existing test(...) cases.example-apps/dashrate/public/dashrate-lite.html (2)
378-387: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider
aria-currentfor the active resource nav button.Selected state is conveyed only via the
.activeCSS class; addingaria-current="page"(oraria-selectedif treated as a tablist) would let assistive tech announce the current selection.♿ Proposed tweak
const button = document.createElement('button'); button.type = 'button'; button.className = resource.id === selectedResourceId ? 'active' : ''; + if (resource.id === selectedResourceId) button.setAttribute('aria-current', 'page'); button.dataset.resourceId = resource.id;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example-apps/dashrate/public/dashrate-lite.html` around lines 378 - 387, The active state in renderResourceNav is only exposed via the active CSS class, so assistive tech cannot identify the current resource. Update the button creation in renderResourceNav to set an appropriate ARIA state on the selected item, using aria-current="page" for the active resource (or aria-selected if you convert this pattern to a tablist), and ensure non-selected buttons do not carry that attribute.
242-267: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winRedundant round-trip: total count can be derived from the distribution.
getRatingCountandgetRatingDistributionboth hit the network, butgetRatingDistributionalready covers all valid ratings (1-5) via thebetweenfilter, so its sum equals the total count.renderAggregateeven falls back tosummary.count(derived from distribution) whentotalCountis missing — suggesting the separategetRatingCountcall is unnecessary overhead on everyloadResource().♻️ Proposed fix to drop the extra query
async function loadResource() { ... - const [totalCount, distribution, reviews] = await Promise.all([ - getRatingCount(sdk, resource.id), - getRatingDistribution(sdk, resource.id), - listResourceReviews(sdk, resource.id, ratingFilter), - ]); - renderAggregate(totalCount, distribution); + const [distribution, reviews] = await Promise.all([ + getRatingDistribution(sdk, resource.id), + listResourceReviews(sdk, resource.id, ratingFilter), + ]); + renderAggregate(null, distribution);Also applies to: 396-404
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example-apps/dashrate/public/dashrate-lite.html` around lines 242 - 267, Remove the redundant network call by deriving the total rating count from the existing distribution query. Update the rating-loading flow around getRatingCount, getRatingDistribution, and loadResource so the total is computed from the grouped counts returned by sdk.documents.count instead of making a second request, and keep renderAggregate using that derived total/count summary fallback.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@example-apps/dashrate/public/dashrate-lite.html`:
- Around line 459-500: `loadResource()` can overwrite the UI with stale data if
`selectedResourceId` or the filter changes before its async `Promise.all`
resolves. Add a request guard inside `loadResource()` (using
`currentResource()`, `selectedResourceId`, and the current
`filterEl.value`/`ratingFilter`) so the function only renders results when the
response still matches the latest requested resource/filter. Ensure the click
and change handlers still call `loadResource()` normally, but ignore any
late-arriving response from an older invocation before calling
`renderAggregate()` and `renderReviews()`.
---
Outside diff comments:
In `@example-apps/dashrate/test/e2e/lite.spec.ts`:
- Around line 1-99: The Playwright test file formatting is inconsistent with the
repo’s Prettier rule because it uses double quotes instead of single quotes.
Update the literals and string-based selectors in the dashrate-lite e2e spec to
match the project style, keeping the existing structure and behavior of
test.describe, test, and page.locator/getByRole calls unchanged.
---
Nitpick comments:
In `@example-apps/dashrate/public/dashrate-lite.html`:
- Around line 378-387: The active state in renderResourceNav is only exposed via
the active CSS class, so assistive tech cannot identify the current resource.
Update the button creation in renderResourceNav to set an appropriate ARIA state
on the selected item, using aria-current="page" for the active resource (or
aria-selected if you convert this pattern to a tablist), and ensure non-selected
buttons do not carry that attribute.
- Around line 242-267: Remove the redundant network call by deriving the total
rating count from the existing distribution query. Update the rating-loading
flow around getRatingCount, getRatingDistribution, and loadResource so the total
is computed from the grouped counts returned by sdk.documents.count instead of
making a second request, and keep renderAggregate using that derived total/count
summary fallback.
In `@example-apps/dashrate/test/e2e/lite.spec.ts`:
- Around line 6-98: The lite.spec.ts e2e tests repeat the same
page.goto(LITE_URL) and "`#status`" Connected to testnet wait in every test, so
hoist that shared setup into a test.beforeEach hook. Update the tests in the
suite to rely on the shared beforeEach, and keep the per-test assertions/actions
focused on their specific behavior while preserving references like LITE_URL,
`#status`, and the existing test(...) cases.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 949a778b-5b39-40a2-b8e4-64948a12c8b9
📒 Files selected for processing (2)
example-apps/dashrate/public/dashrate-lite.htmlexample-apps/dashrate/test/e2e/lite.spec.ts
1 participant
Adds dashrate-lite.html, a no-build, CDN-loaded standalone page that demonstrates the same read-only count/query SDK patterns as the React app, for readers who want a minimal reference without a toolchain.
Adds a Playwright spec exercising it against real testnet.
Summary by CodeRabbit