Update Profile TrackSwitcher Icon onChange #830
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { render, fireEvent, act, screen, within } from '@testing-library/react' | ||
| import '@testing-library/jest-dom/extend-expect' | ||
|
|
||
| import { TrackSwitcher } from '../../../../../app/javascript/components/profile/contributions-summary/TrackSwitcher' | ||
|
|
||
| import { | ||
| createTrack, | ||
| totalTrackReputation, | ||
| } from '../../../factories/ContributionSummaryFactory' | ||
|
|
||
| const setup = () => { | ||
| const tracks = [ | ||
| createTrack(), | ||
| createTrack({ | ||
| id: 'elixir', | ||
| title: 'Elixir', | ||
| iconUrl: '/icons/elixir.svg', | ||
| }), | ||
| ] | ||
|
|
||
| return { | ||
| tracks, | ||
| } | ||
| } | ||
|
|
||
| describe('TrackSwitcher', () => { | ||
| test('shows value on render', () => { | ||
| const { tracks } = setup() | ||
|
|
||
| const currentTrack = tracks[0] | ||
|
|
||
| render( | ||
| <TrackSwitcher tracks={tracks} value={currentTrack} setValue={() => {}} /> | ||
| ) | ||
|
|
||
| screen.getByAltText(`icon for ${currentTrack.title} track`) | ||
| screen.getByText(currentTrack.title) | ||
| screen.getByText(`${totalTrackReputation(currentTrack)} rep`) | ||
| }) | ||
|
|
||
| test('shows dropdown on click', async () => { | ||
| const { tracks } = setup() | ||
|
|
||
| const currentTrack = tracks[0] | ||
|
|
||
| render( | ||
| <TrackSwitcher tracks={tracks} value={currentTrack} setValue={() => {}} /> | ||
| ) | ||
|
|
||
| const button = screen.getByLabelText('Open the track switcher') | ||
|
|
||
| await act(async () => { | ||
| await fireEvent.click(button) | ||
|
There was a problem hiding this comment. I usually use There was a problem hiding this comment. I use fireEvent because that's what I know, but looking for a reference to think points out that using userEvent might be a better way to go about this. Reference: testing-library/eslint-plugin-testing-library#162 (comment) There was a problem hiding this comment. @neenjaw Want to change or should I merge? :) There was a problem hiding this comment. They are essentially the same thing, so this works and covers it, but if I'm in this piece of code again I would change it. I think good to merge |
||
| }) | ||
|
|
||
| const menu = screen.getByRole('menu') | ||
| const menuItems = within(menu).queryAllByRole('menuitem') | ||
| expect(menuItems).toHaveLength(tracks.length) | ||
| menuItems.forEach((menuItem, index) => { | ||
| within(menuItem).getByAltText(`icon for ${tracks[index].title} track`) | ||
| within(menuItem).getByText(tracks[index].title) | ||
| }) | ||
| }) | ||
| }) | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { RepresenterFeedback } from '../../../app/javascript/components/mentoring/session/RepresenterFeedback' | ||
|
There was a problem hiding this comment. Nice :) I should do something like this from now on. |
||
| import { | ||
| Category, | ||
| CategoryId, | ||
| Track, | ||
| } from '../../../app/javascript/components/profile/ContributionsSummary' | ||
|
|
||
| export const createCategoryId = (categoryId?: CategoryId): CategoryId => | ||
| categoryId ? categoryId : 'publishing' | ||
|
|
||
| export const createCategory = (category?: Partial<Category>): Category => ({ | ||
| id: createCategoryId(), | ||
| reputation: 140, | ||
| metricFull: '1 solution published', | ||
| metricShort: '1 solution', | ||
| ...category, | ||
| }) | ||
|
|
||
| export const createTrack = (track?: Partial<Track>): Track => ({ | ||
| id: 'javascript', | ||
| title: 'JavaScript', | ||
| iconUrl: '/icons/javascript.svg', | ||
| categories: [ | ||
| { | ||
| id: 'publishing', | ||
| metricFull: 'No solutions published', | ||
| metricShort: 'No solutions', | ||
| reputation: 0, | ||
| }, | ||
| { | ||
| id: 'mentoring', | ||
| metricFull: 'No students mentored', | ||
| metricShort: 'No students', | ||
| reputation: 0, | ||
| }, | ||
| { | ||
| id: 'authoring', | ||
| metricFull: '3 exercises contributed', | ||
| metricShort: '3 exercises', | ||
| reputation: 50, | ||
| }, | ||
| { | ||
| id: 'building', | ||
| metricFull: '2 PRs accepted', | ||
| metricShort: '2 PRs accepted', | ||
| reputation: 24, | ||
| }, | ||
| { | ||
| id: 'maintaining', | ||
| metricFull: '6 PRs reviewed', | ||
| metricShort: '6 PRs reviewed', | ||
| reputation: 35, | ||
| }, | ||
| { | ||
| id: 'other', | ||
| reputation: 0, | ||
| }, | ||
| ], | ||
| ...track, | ||
| }) | ||
|
|
||
| export const totalTrackReputation = (track: Track): number => { | ||
| return track.categories.reduce((sum: number, category: Category) => { | ||
| return sum + category.reputation | ||
| }, 0) | ||
| } | ||
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop-types aren't used in typescript. I think this is raising an error just because we have a mix of js and ts in the project