CareEvolution / MyDataHelpsUI

MyDataHelps UI React Component Library
MIT License
1 stars 2 forks source link

Update Storybook & Start using jest #334

Closed reneefromhold closed 1 month ago

reneefromhold commented 1 month ago

In short, this repo would benefit from more testing. -Update storybook from 7.0 to 8.5 -Introduce Jest -Add unit tests for Custom and ExternalAccount activities for use in BasicPointsForBadges -Add jsdoc comment at the component level to BasicPointsForBadges -Render the previously mentioned jsdoc comment as the description of the Default story for BasicPointsForBadges. These descriptions will export as part of the npm package

Security

REMINDER: All file contents are public.

Describe briefly what security risks you considered, why they don't apply, or how they've been mitigated.

Checklist

Testing

Documentation

Consider "Squash and merge" as needed to keep the commit history reasonable on main.

Reviewers

Assign to the appropriate reviewer(s). Minimally, a second set of eyes is needed ensure no non-public information is published. Consider also including:

Summary by CodeRabbit

coderabbitai[bot] commented 1 month ago

Walkthrough

The pull request introduces several updates primarily focused on enhancing the Storybook configuration and TypeScript support across various components and files. Key changes include modifications to the .storybook/main.js and .storybook/preview.js files, the addition of new testing configurations in .vscode/launch.json, and updates to the package.json file for dependency management. Several component story files have been refactored to align with the latest Storybook API, improving type safety and documentation. Additionally, new mock data structures and test suites have been introduced to ensure comprehensive testing of functionality related to external account connections and custom activities.

Changes

File Change Summary
.storybook/main.js Updated stories array, expanded addons, modified docs, and added typescript property.
.storybook/preview.js Added tags export and removed actions property from parameters.
.vscode/launch.json Introduced new "Unit Tests" configuration for debugging Jest tests.
package.json Updated version, added test script, and modified devDependencies for Storybook and Jest.
src/components/container/BasicPointsForBadges/BasicPointsForBadges.stories.tsx Enhanced imports, changed default export to typed constant, and updated story types.
src/components/container/BasicPointsForBadges/BasicPointsForBadges.tsx Added JSDoc comment and renamed default export for clarity.
src/helpers/BasicPointsAndBadges/ConnectExternalAccountActivity.ts Introduced ConnectExternalActivityType and updated filtering logic for connected accounts.
src/helpers/BasicPointsAndBadges/CustomActivity.ts Removed activityState parameter from awardCustomActivityPoints function signature.
src/helpers/BasicPointsAndBadges/PointsAndBadges.ts Updated awardPointsForActivity to remove activityState parameter.
src/stories/Introduction.mdx Updated import statement and restructured CSS styles.
tsconfig.json Added new compiler options for React and modern JavaScript features.
__tests__/helpers/BasicPointsAndBadges/ConnectExternalAccountActivity.test.ts Introduced comprehensive test suite for awarding points.
__tests__/helpers/BasicPointsAndBadges/CustomActivity.test.ts Added new test suite for CustomActivity functionality.
amplify.yml Added npm run test command to the build phase.
__tests__/fixtures/participantInfo.ts Introduced mockParticipantInfo structure for testing purposes.
jest.config.js Added testPathIgnorePatterns to ignore tests in /fixtures/.
src/components/container/ConnectEhr/ConnectEhr.stories.tsx Removed ComponentMeta and ComponentStory imports, updated story structure.
src/components/container/ConnectFitbit/ConnectFitbit.stories.tsx Updated imports and restructured stories to use Meta and StoryObj.
src/components/step/ConnectDeviceAccountStepContainer/ConnectDeviceAccountStepContainer.stories.tsx Updated to new Storybook API with meta and Story types.
src/components/step/ConnectEhrStepContainer/ConnectEhrStepContainer.stories.tsx Transitioned to new Meta and StoryObj types for story definitions.
src/components/step/ConnectDeviceAccountStepContainer/ConnectDeviceAccountStepContainer.tsx Added JSDoc comment and renamed default export for clarity.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Storybook
    participant Component
    participant Jest

    User->>Storybook: Access stories
    Storybook->>Component: Render component
    Component-->>Storybook: Return rendered output
    Storybook-->>User: Display stories

    User->>Jest: Run tests
    Jest->>Component: Execute test cases
    Component-->>Jest: Return test results
    Jest-->>User: Display test results

πŸ“œ Recent review details **Configuration used: CodeRabbit UI** **Review profile: CHILL**
πŸ“₯ Commits Files that changed from the base of the PR and between 6bf1a7e979d5eea4a07574a1776f99f5f3c0484b and 54c84a0f0e4d5d8cdad40db3fdfc5438cd1dc706.
πŸ“’ Files selected for processing (1) * __tests__/helpers/BasicPointsAndBadges/ConnectExternalAccountActivity.test.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1) * __tests__/helpers/BasicPointsAndBadges/ConnectExternalAccountActivity.test.ts
--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
❀️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
πŸͺ§ Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` or `@coderabbitai title` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
reneefromhold commented 1 month ago

Maybe others feel differently, but I find having tests in a separate tests folder to be a less cluttered

I appreciate that feedback. I do like the tests within the same folder as the component bc it encourages creating it as part of component/helper completion and makes the tests easy to find/reference. I am interested in hearing others thoughts too.

greinard commented 1 month ago

Maybe others feel differently, but I find having tests in a separate tests folder to be a less cluttered

I appreciate that feedback. I do like the tests within the same folder as the component bc it encourages creating it as part of component/helper completion and makes the tests easy to find/reference. I am interested in hearing others thoughts too.

I tend to prefer a separate tests folder as well. I agree that the co-location can make it easier to find the test for a given component, but it can also make it more difficult to tell which files in the folder are test related and which are not. The .test.ts suffix helps with the actual test files, but if there are other .ts files to support the .test.ts files, then it can be trickier.

We'll also want to make sure that the tests and other test related files are not included in the published builds. That'll probably be easiest if we can just exclude (or not include) the tests folder vs using a regex or wildcard string and naming conventions for tests (and related) files that are part of the src directory tree.

greinard commented 1 month ago

Just putting this here so we don't forget, but the existing PR about upgrading the Storybook can probably go away once this one gets merged.

https://github.com/CareEvolution/MyDataHelpsUI/pull/234