From d12a6c5e1a5ec4d236a29113bbe095da14d8fa7a Mon Sep 17 00:00:00 2001
From: wenincode <tyler.wendlandt@hashicorp.com>
Date: Thu, 13 Oct 2022 10:21:56 -0600
Subject: [PATCH] Add tests for agentless-notice-banner

---
 .../consul/node/agentless-notice/index.hbs    | 20 +++---
 .../consul/node/agentless-notice/index.js     |  6 +-
 .../consul-ui/mock-api/v1/internal/ui/nodes   |  3 +-
 .../consul/node/agentless-notice-test.js      | 65 +++++++++++++++++++
 4 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 ui/packages/consul-ui/tests/integration/components/consul/node/agentless-notice-test.js

diff --git a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.hbs b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.hbs
index 3f764e97a8..6ee6a31777 100644
--- a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.hbs
@@ -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>
diff --git a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js
index fc41ca8342..3bcba47b50 100644
--- a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js
+++ b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js
@@ -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
diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/nodes b/ui/packages/consul-ui/mock-api/v1/internal/ui/nodes
index 26a2ac5016..8b63b7997d 100644
--- a/ui/packages/consul-ui/mock-api/v1/internal/ui/nodes
+++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/nodes
@@ -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":[
                 ${
diff --git a/ui/packages/consul-ui/tests/integration/components/consul/node/agentless-notice-test.js b/ui/packages/consul-ui/tests/integration/components/consul/node/agentless-notice-test.js
new file mode 100644
index 0000000000..6f42c102c7
--- /dev/null
+++ b/ui/packages/consul-ui/tests/integration/components/consul/node/agentless-notice-test.js
@@ -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'
+      );
+  });
+});