@@ -23,7 +23,7 @@ module(
2323
2424 test ( 'it should render the component as a <li> element with a CSS class that matches the component name' , async function ( assert ) {
2525 await render (
26- hbs `<Hds::Dropdown::ListItem::Interactive @text=" interactive" / >` ,
26+ hbs `<Hds::Dropdown::ListItem::Interactive> interactive</Hds::Dropdown::ListItem::Interactive >` ,
2727 ) ;
2828 assert . dom ( '.hds-dropdown-list-item' ) . hasTagName ( 'li' ) ;
2929 assert
@@ -35,19 +35,19 @@ module(
3535
3636 test ( 'it should render the "list-item" with a button by default"' , async function ( assert ) {
3737 await render (
38- hbs `<Hds::Dropdown::ListItem::Interactive @text=" interactive" / >` ,
38+ hbs `<Hds::Dropdown::ListItem::Interactive> interactive</Hds::Dropdown::ListItem::Interactive >` ,
3939 ) ;
4040 assert . dom ( '.hds-dropdown-list-item > button' ) . exists ( ) ;
4141 } ) ;
4242 test ( 'it should render the "list-item" with a link if it has a @route parameter"' , async function ( assert ) {
4343 await render (
44- hbs `<Hds::Dropdown::ListItem::Interactive @text="interactive" @ route="index" / >` ,
44+ hbs `<Hds::Dropdown::ListItem::Interactive @route="index">interactive</Hds::Dropdown::ListItem::Interactive >` ,
4545 ) ;
4646 assert . dom ( '.hds-dropdown-list-item > a' ) . exists ( ) ;
4747 } ) ;
4848 test ( 'it should render the "list-item" with a link if it has a @href argument"' , async function ( assert ) {
4949 await render (
50- hbs `<Hds::Dropdown::ListItem::Interactive @text="interactive" @ href="#" / >` ,
50+ hbs `<Hds::Dropdown::ListItem::Interactive @href="#">interactive</Hds::Dropdown::ListItem::Interactive >` ,
5151 ) ;
5252 assert . dom ( '.hds-dropdown-list-item > a' ) . exists ( ) ;
5353 } ) ;
@@ -56,15 +56,15 @@ module(
5656
5757 test ( 'it should render the "action" color as the default if no color is declared"' , async function ( assert ) {
5858 await render (
59- hbs `<Hds::Dropdown::ListItem::Interactive @text=" interactive" / >` ,
59+ hbs `<Hds::Dropdown::ListItem::Interactive> interactive</Hds::Dropdown::ListItem::Interactive >` ,
6060 ) ;
6161 assert
6262 . dom ( '.hds-dropdown-list-item' )
6363 . hasClass ( 'hds-dropdown-list-item--color-action' ) ;
6464 } ) ;
6565 test ( 'it should render the correct CSS color class if the @color prop is declared' , async function ( assert ) {
6666 await render (
67- hbs `<Hds::Dropdown::ListItem::Interactive @color="critical" @text="interactive" @ icon="trash" / >` ,
67+ hbs `<Hds::Dropdown::ListItem::Interactive @color="critical" @icon="trash">interactive</Hds::Dropdown::ListItem::Interactive >` ,
6868 ) ;
6969 assert
7070 . dom ( '.hds-dropdown-list-item' )
@@ -75,32 +75,26 @@ module(
7575
7676 test ( 'if an `@icon` is declared a leading icon should be rendered' , async function ( assert ) {
7777 await render (
78- hbs `<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @text=" interactive" / >` ,
78+ hbs `<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy"> interactive</Hds::Dropdown::ListItem::Interactive >` ,
7979 ) ;
8080 assert . dom ( '.hds-icon.hds-icon-clipboard-copy' ) . exists ( ) ;
8181 } ) ;
8282 test ( 'if an `@trailingIcon` is declared a trailing icon should be rendered' , async function ( assert ) {
8383 await render (
84- hbs `<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" @text=" interactive" / >` ,
84+ hbs `<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link"> interactive</Hds::Dropdown::ListItem::Interactive >` ,
8585 ) ;
8686 assert . dom ( '.hds-icon.hds-icon-external-link' ) . exists ( ) ;
8787 } ) ;
8888 test ( 'if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered' , async function ( assert ) {
8989 await render (
90- hbs `<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text=" interactive" / >` ,
90+ hbs `<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link"> interactive</Hds::Dropdown::ListItem::Interactive >` ,
9191 ) ;
9292 assert . dom ( '.hds-icon.hds-icon-clipboard-copy' ) . exists ( ) ;
9393 assert . dom ( '.hds-icon.hds-icon-external-link' ) . exists ( ) ;
9494 } ) ;
9595
9696 // CONTENT
9797
98- test ( 'it should render the text passed as @text prop' , async function ( assert ) {
99- await render (
100- hbs `<Hds::Dropdown::ListItem::Interactive @text="interactive text" />` ,
101- ) ;
102- assert . dom ( '.hds-dropdown-list-item' ) . hasText ( 'interactive text' ) ;
103- } ) ;
10498 test ( 'it should render the yielded content' , async function ( assert ) {
10599 await render ( hbs `
106100 <Hds::Dropdown::ListItem::Interactive>
@@ -109,29 +103,9 @@ module(
109103 ` ) ;
110104 assert . dom ( '.hds-dropdown-list-item' ) . hasText ( 'interactive' ) ;
111105 } ) ;
112- test ( 'it should render the text passed as @text prop if content is yielded' , async function ( assert ) {
113- await render ( hbs `
114- <Hds::Dropdown::ListItem::Interactive @text="erroneous">
115- interactive
116- </Hds::Dropdown::ListItem::Interactive>
117- ` ) ;
118- assert . dom ( '.hds-dropdown-list-item' ) . doesNotContainText ( 'erroneous' ) ;
119- } ) ;
120106
121107 // ASSERTIONS
122108
123- test ( 'it should throw an assertion if @text is missing/has no value and the component does not yield content' , async function ( assert ) {
124- const errorMessage =
125- '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value' ;
126- assert . expect ( 2 ) ;
127- setupOnerror ( function ( error ) {
128- assert . strictEqual ( error . message , `Assertion Failed: ${ errorMessage } ) ;
129- } ) ;
130- await render ( hbs `<Hds::Dropdown::ListItem::Interactive />` ) ;
131- assert . throws ( function ( ) {
132- throw new Error ( errorMessage ) ;
133- } ) ;
134- } ) ;
135109 test ( 'it should throw an assertion if an incorrect value for @color is provided' , async function ( assert ) {
136110 const errorMessage =
137111 '@color for "Hds::Dropdown::ListItem::Interactive" must be one of the following: action, critical; received: foo' ;
@@ -140,7 +114,7 @@ module(
140114 assert . strictEqual ( error . message , `Assertion Failed: ${ errorMessage } ) ;
141115 } ) ;
142116 await render (
143- hbs `<Hds::Dropdown::ListItem::Interactive @color="foo" @text=" interactive text" / >` ,
117+ hbs `<Hds::Dropdown::ListItem::Interactive @color="foo"> interactive text</Hds::Dropdown::ListItem::Interactive >` ,
144118 ) ;
145119 assert . throws ( function ( ) {
146120 throw new Error ( errorMessage ) ;
0 commit comments