11import * as React from 'react' ;
2+ import { render , screen } from '@testing-library/react' ;
23
34import { ComponentClassNames } from '../../shared' ;
45import { Rating } from '../Rating' ;
5- import { render , screen } from '@testing-library/react' ;
66
7- describe ( 'Rating: ' , ( ) => {
8- let customIcon ;
9- beforeEach ( ( ) => {
10- customIcon = ( className ) => {
11- return < svg className = { className } > </ svg > ;
12- } ;
13- } ) ;
7+ const CustomIcon = ( { className } : { className : string } ) => (
8+ < svg className = { className } > </ svg >
9+ ) ;
1410
11+ describe ( 'Rating' , ( ) => {
1512 it ( 'should render a classname for Rating' , async ( ) => {
1613 render ( < Rating testId = "testId" className = "my-rating-component" /> ) ;
1714
@@ -53,27 +50,27 @@ describe('Rating: ', () => {
5350 expect ( rating . dataset [ 'size' ] ) . toBe ( 'small' ) ;
5451 } ) ;
5552
56- it ( 'should render the empty icon color' , async ( ) => {
53+ it ( 'should render the empty icon color' , ( ) => {
5754 const { container } = render ( < Rating testId = "testId" emptyColor = "red" /> ) ;
5855
5956 const emptyIcon = container . getElementsByClassName (
6057 'amplify-rating-icon-empty'
6158 ) [ 0 ] ;
62- expect ( emptyIcon [ 'style' ] . color ) . toBe ( 'red' ) ;
59+ expect ( ( emptyIcon [ 'style' ] as React . CSSProperties ) . color ) . toBe ( 'red' ) ;
6360 } ) ;
6461
65- it ( 'should render the filled icon color' , async ( ) => {
62+ it ( 'should render the filled icon color' , ( ) => {
6663 const { container } = render (
6764 < Rating testId = "testId" value = { 2 } fillColor = "blue" />
6865 ) ;
6966
7067 const filledIcon = container . getElementsByClassName (
7168 'amplify-rating-icon-filled'
7269 ) [ 0 ] ;
73- expect ( filledIcon [ 'style' ] . color ) . toBe ( 'blue' ) ;
70+ expect ( ( filledIcon [ 'style' ] as React . CSSProperties ) . color ) . toBe ( 'blue' ) ;
7471 } ) ;
7572
76- it ( 'should render filled icons when the value prop is used' , async ( ) => {
73+ it ( 'should render filled icons when the value prop is used' , ( ) => {
7774 const { container } = render ( < Rating testId = "testId" value = { 2 } /> ) ;
7875
7976 const filledIcons = container . getElementsByClassName (
@@ -82,7 +79,7 @@ describe('Rating: ', () => {
8279 expect ( filledIcons . length ) . toBe ( 2 ) ;
8380 } ) ;
8481
85- it ( 'should render 2 filled and 3 empty icons' , async ( ) => {
82+ it ( 'should render 2 filled and 3 empty icons' , ( ) => {
8683 const { container } = render ( < Rating value = { 2 } /> ) ;
8784 const filledIcons = container . getElementsByClassName (
8885 'amplify-rating-icon-filled'
@@ -94,33 +91,40 @@ describe('Rating: ', () => {
9491 expect ( emptyIcons . length ) . toBe ( 3 ) ;
9592 } ) ;
9693
97- it ( 'should render 7 icons when the maxValue is set to 7' , async ( ) => {
94+ it ( 'should render 7 icons when the maxValue is set to 7' , ( ) => {
9895 const { container } = render ( < Rating maxValue = { 7 } /> ) ;
9996 const emptyIcons = container . getElementsByClassName (
10097 'amplify-rating-icon-empty'
10198 ) ;
10299 expect ( emptyIcons . length ) . toBe ( 7 ) ;
103100 } ) ;
104101
105- it ( 'should render the passed in icon component' , async ( ) => {
106- const icon = customIcon ( 'my-custom-component' ) ;
107- const { container } = render ( < Rating icon = { icon } /> ) ;
102+ it ( 'should render the passed in icon component' , ( ) => {
103+ const { container } = render (
104+ < Rating icon = { < CustomIcon className = "my-custom-component" /> } />
105+ ) ;
108106 const emptyIcons = container . getElementsByClassName ( 'my-custom-component' ) ;
109107 expect ( emptyIcons . length ) . toBe ( 5 ) ;
110108 } ) ;
111109
112- it ( 'should render the passed in empty icon' , async ( ) => {
113- const emptyIcon = customIcon ( 'my-custom-empty-icon' ) ;
114- const { container } = render ( < Rating emptyIcon = { emptyIcon } value = { 3 } /> ) ;
110+ it ( 'should render the passed in empty icon' , ( ) => {
111+ const { container } = render (
112+ < Rating
113+ emptyIcon = { < CustomIcon className = "my-custom-empty-icon" /> }
114+ value = { 3 }
115+ />
116+ ) ;
115117 const emptyIcons = container . getElementsByClassName ( 'my-custom-empty-icon' ) ;
116118 expect ( emptyIcons . length ) . toBe ( 2 ) ;
117119 } ) ;
118120
119- it ( 'should render both the passed in icon and empty icons' , async ( ) => {
120- const filledIcon = customIcon ( 'my-custom-filled-icon' ) ;
121- const emptyIcon = customIcon ( 'my-custom-empty-icon' ) ;
121+ it ( 'should render both the passed in icon and empty icons' , ( ) => {
122122 const { container } = render (
123- < Rating icon = { filledIcon } emptyIcon = { emptyIcon } value = { 3 } />
123+ < Rating
124+ icon = { < CustomIcon className = "my-custom-filled-icon" /> }
125+ emptyIcon = { < CustomIcon className = "my-custom-empty-icon" /> }
126+ value = { 3 }
127+ />
124128 ) ;
125129 const emptyIcons = container . getElementsByClassName ( 'my-custom-empty-icon' ) ;
126130 const filledIcons = container . getElementsByClassName (
0 commit comments