test: add TypeScript compiler verification suite for SectionLabel component props#8092
Open
TanCodeX wants to merge 4 commits into
Open
test: add TypeScript compiler verification suite for SectionLabel component props#8092TanCodeX wants to merge 4 commits into
TanCodeX wants to merge 4 commits into
Conversation
|
This PR adds important type safety measures for the SectionLabel component by implementing a TypeScript compiler verification suite. Similar approaches have been successfully applied in past PRs, such as for the AdvancedSettingsPanel and ContributorsSearch components, which focused on ensuring type safety and preventing regressions. This consistency in testing practices helps maintain the integrity of our codebase. Thank you for your contribution, and I look forward to your updates! |
retenta-bot
Bot
changed the title
github-actions
Bot
added
the
status:blocked
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a dedicated TypeScript “type-compiler” test suite for SectionLabel to lock in its prop type contract and reduce the risk of type regressions during future API changes (per #6882).
Changes:
- Introduces a new
SectionLabel.type-compiler.test.tsxfile underapp/customize/components/. - Adds 5 type-focused test cases intended to validate
SectionLabel’s prop typing and related constraints.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1
to
+10
| import { describe, it, expect, expectTypeOf } from 'vitest'; | ||
| import React from 'react'; | ||
| import { SectionLabel } from './SectionLabel'; | ||
|
|
||
| // --- STRICT TYPE DEFINITIONS --- | ||
| // We define the expected structural contract for the component. | ||
| interface ExpectedSectionLabelProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
Comment on lines
+12
to
+17
| it('1. imports the interfaces, types, or validation schemas associated with the file', () => { | ||
| // Validate that the module successfully imports and exists in the TS environment | ||
| expect(SectionLabel).toBeDefined(); | ||
| // React layout components evaluate as functions | ||
| expectTypeOf(SectionLabel).toBeFunction(); | ||
| }); |
Comment on lines
+19
to
+24
| it('2. uses type-testing assertions (expectTypeOf) to enforce field property configurations', () => { | ||
| // Enforce strict property constraints on the expected props schema | ||
| expectTypeOf<ExpectedSectionLabelProps>() | ||
| .toHaveProperty('children') | ||
| .toEqualTypeOf<React.ReactNode>(); | ||
| }); |
Comment on lines
+26
to
+36
| it('3. asserts that invalid prop parameters are blocked during static type checking', () => { | ||
| // @ts-expect-error - missing the universally required 'children' property | ||
| const missingProps: ExpectedSectionLabelProps = {}; | ||
|
|
||
| // @ts-expect-error - 'children' requires a valid ReactNode, assigning an arbitrary un-renderable object fails compilation | ||
| const invalidProps: ExpectedSectionLabelProps = { children: { invalid: 'object' } }; | ||
|
|
||
| // Runtime assertions to ensure the variables are evaluated by the test runner | ||
| expect(missingProps).toBeDefined(); | ||
| expect(invalidProps).toBeDefined(); | ||
| }); |
Comment on lines
+38
to
+58
| it('4. verifies custom types accept optional values without compile errors', () => { | ||
| // The component only has 'children'. We extend the props to verify custom types accept optional values. | ||
| type ExtendedSectionLabelProps = ExpectedSectionLabelProps & { id?: string }; | ||
|
|
||
| const propsWithOptional: ExtendedSectionLabelProps = { | ||
| children: <span>Label</span>, | ||
| id: 'section-1', | ||
| }; | ||
|
|
||
| const propsWithoutOptional: ExtendedSectionLabelProps = { | ||
| children: <span>Label</span>, | ||
| }; | ||
|
|
||
| // Asserting the types dynamically using the correct union type | ||
| expectTypeOf(propsWithOptional.id).toEqualTypeOf<string | undefined>(); | ||
| expectTypeOf(propsWithoutOptional.id).toEqualTypeOf<string | undefined>(); | ||
|
|
||
| // Runtime validation | ||
| expect(propsWithOptional.id).toBeDefined(); | ||
| expect(propsWithoutOptional.id).toBeUndefined(); | ||
| }); |
Comment on lines
+60
to
+84
| it('5. verifies schema validation constraints return strict validation reports', () => { | ||
| // Simulating a strict schema validation guard for incoming props | ||
| const validateProps = (props: unknown): props is ExpectedSectionLabelProps => { | ||
| if (typeof props !== 'object' || props === null) return false; | ||
| const typed = props as ExpectedSectionLabelProps; | ||
| return 'children' in typed; | ||
| }; | ||
|
|
||
| // Simulate incoming data as 'unknown' to properly test the type guard's narrowing ability | ||
| const incomingData: unknown = { | ||
| children: <span>Label</span>, | ||
| }; | ||
| const invalidData: unknown = { title: 'Missing Children' }; | ||
|
|
||
| // The compiler should correctly narrow the types based on the validation report | ||
| const isValid = validateProps(incomingData); | ||
| expect(isValid).toBe(true); | ||
|
|
||
| if (validateProps(incomingData)) { | ||
| // If the block is reached, TS correctly narrows `incomingData` from `unknown` to `ExpectedSectionLabelProps` | ||
| expectTypeOf(incomingData).toEqualTypeOf<ExpectedSectionLabelProps>(); | ||
| } | ||
|
|
||
| expect(validateProps(invalidData)).toBe(false); | ||
| }); |
…w configuration properties
…conds until midnight
github-actions
Bot
removed
the
status:blocked
Contributor
📦 Next.js Bundle Size Report (Gzipped Sizes)✨ No significant bundle size changes detected. 📊 Summary of Totals
|
This file contains hidden or 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
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.
Description
Adds isolated TypeScript compiler and schema validation tests for
SectionLabelto improve type safety and prevent regressions during API updates.Changes
Created
app/customize/components/SectionLabel.type-compiler.test.tsxAdded test coverage for:
expectTypeOfassertions for field property configurationsFixes #6882
Pillar
Visual Preview
N/A (test-only changes)
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.