Add tests for agentless-notice-banner

This commit is contained in:
wenincode 2022-10-13 10:21:56 -06:00
parent 5fc979ee6e
commit eb2cdcfb94
4 changed files with 81 additions and 13 deletions

View File

@ -1,22 +1,26 @@
{{#if isVisible}}
<Notice @type="info" class="agentless-node-notice" as |notice|>
<Notice data-test-node-agentless-notice @type='info' class='agentless-node-notice' as |notice|>
<notice.Header>
<h3>
{{t "routes.dc.nodes.index.agentless.notice.header"}}
{{t 'routes.dc.nodes.index.agentless.notice.header'}}
</h3>
<button type="button" aria-label="Dismiss notice" {{on "click" this.dismissAgentlessNotice}}>
<FlightIcon @name="x" />
<button type='button' aria-label='Dismiss notice' {{on 'click' this.dismissAgentlessNotice}}>
<FlightIcon @name='x' />
</button>
</notice.Header>
<notice.Body>
<p>
{{t "routes.dc.nodes.index.agentless.notice.body"}}
{{t 'routes.dc.nodes.index.agentless.notice.body'}}
</p>
</notice.Body>
<notice.Footer>
<p class="docs-link">
<a href="{{env 'CONSUL_DOCS_DEVELOPER_URL'}}/connect/dataplane" target="_blank" rel="noopener noreferrer">
{{t "routes.dc.nodes.index.agentless.notice.footer"}}
<p class='docs-link'>
<a
href='{{env "CONSUL_DOCS_DEVELOPER_URL"}}/connect/dataplane'
target='_blank'
rel='noopener noreferrer'
>
{{t 'routes.dc.nodes.index.agentless.notice.footer'}}
</a>
</p>
</notice.Footer>

View File

@ -8,9 +8,9 @@ export default class AgentlessNotice extends Component {
get isVisible() {
const { items, filteredItems } = this.args;
console.log(this.consulNodesAgentlessNoticeDismissed !== 'true' && items.length > filteredItems.length);
console.log('tracked prop: ', this.consulNodesAgentlessNoticeDismissed);
return this.consulNodesAgentlessNoticeDismissed !== 'true' && items.length > filteredItems.length;
return (
this.consulNodesAgentlessNoticeDismissed !== 'true' && items.length > filteredItems.length
);
}
@action

View File

@ -24,8 +24,7 @@
"wan":"${fake.internet.ip()}"
},
"Meta": {
"consul-network-segment":"",
"synthetic-node": "${fake.helpers.randomize(["true", "false", "false", "false"])}"
"consul-network-segment":""
},
"Services":[
${

View File

@ -0,0 +1,65 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { click, render } from '@ember/test-helpers';
module('Integration | Component | consul node agentless-notice', function (hooks) {
setupRenderingTest(hooks);
test('it does not display the notice if the filtered nodes are the same as the regular nodes', async function (assert) {
this.set('nodes', [
{
Meta: {
'synthetic-node': false,
},
},
]);
this.set('filteredNodes', [
{
Meta: {
'synthetic-node': false,
},
},
]);
await render(
hbs`<Consul::Node::AgentlessNotice @items={{this.nodes}} @filteredItems={{this.filteredNodes}} />`
);
assert
.dom('[data-test-node-agentless-notice]')
.doesNotExist(
'The agentless notice should not display if the items are the same as the filtered items'
);
});
test('it does display the notice when the filtered items are smaller then the regular items', async function (assert) {
this.set('nodes', [
{
Meta: {
'synthetic-node': false,
},
},
]);
this.set('filteredNodes', []);
await render(
hbs`<Consul::Node::AgentlessNotice @items={{this.nodes}} @filteredItems={{this.filteredNodes}} />`
);
assert
.dom('[data-test-node-agentless-notice]')
.exists(
'The agentless notice should display if their are less items then the filtered items'
);
await click('button');
assert
.dom('[data-test-node-agentless-notice]')
.doesNotExist(
'The agentless notice be dismissed'
);
});
});