Merge pull request #50 from hashicorp/breadcrumbs-tests

Add breadcrumbs ui/core component integration tests

addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss

@@ -11,6 +11,7 @@
     color: var(--color);
     text-decoration: none;
     cursor: pointer;
+    display: inline-flex;
 
     &:hover {
       --color: var(--action);

ui/core/tests/acceptance/bread-crumbs-test.js

@@ -0,0 +1,82 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click, find, findAll } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+
+module('Acceptance | breadcrumbs', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  let project;
+  let hostCatalog;
+  let projectsURL;
+  let newProjectURL;
+  let projectURL;
+  let hostCatalogsURL;
+  let newHostCatalogURL;
+  let hostCatalogURL;
+
+  let crumbPath;
+
+  hooks.beforeEach(function () {
+    project = this.server.create('project');
+    hostCatalog = this.server.create('host-catalog');
+    projectsURL = `/orgs/1/projects`;
+    newProjectURL = `${projectsURL}/new`;
+    projectURL = `${projectsURL}/${project.id}`;
+    hostCatalogsURL = `${projectURL}/host-catalogs`;
+    newHostCatalogURL = `${hostCatalogsURL}/new`;
+    hostCatalogURL = `${hostCatalogsURL}/${hostCatalog.id}`;
+  });
+
+  test('can navigate via breadcrumbs to projects from project', async function (assert) {
+    assert.expect(3);
+    await visit(projectURL);
+    assert.equal(currentURL(), projectURL, 'We begin on th expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, projectURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), '/orgs/1/projects', 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to projects from new project', async function (assert) {
+    assert.expect(3);
+    await visit(newProjectURL);
+    assert.equal(currentURL(), newProjectURL, 'We begin on th expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, newProjectURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), '/orgs/1/projects', 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to project from host catalogs', async function (assert) {
+    assert.expect(3);
+    await visit(hostCatalogsURL);
+    assert.equal(currentURL(), hostCatalogsURL, 'We begin on th expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, hostCatalogsURL, 'Last crumb has expected URL.');
+    await click(findAll('.rose-nav-breadcrumbs-link')[1]);
+    assert.equal(currentURL(), projectURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to host catalogs from host catalog', async function (assert) {
+    assert.expect(3);
+    await visit(hostCatalogURL);
+    assert.equal(currentURL(), hostCatalogURL, 'We begin on th expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, hostCatalogURL, 'Last crumb has expected URL.');
+    await click(findAll('.rose-nav-breadcrumbs-link')[2]);
+    assert.equal(currentURL(), hostCatalogsURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to host catalogs from new host catalog', async function (assert) {
+    assert.expect(3);
+    await visit(newHostCatalogURL);
+    assert.equal(currentURL(), newHostCatalogURL, 'We begin on th expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, newHostCatalogURL, 'Last crumb has expected URL.');
+    await click(findAll('.rose-nav-breadcrumbs-link')[2]);
+    assert.equal(currentURL(), hostCatalogsURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+});

ui/core/tests/integration/components/bread-crumbs-test.js

@@ -1,13 +1,47 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-//import { render } from '@ember/test-helpers';
-//import { hbs } from 'ember-cli-htmlbars';
+import { render, find, findAll } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | bread-crumbs', function(hooks) {
   setupRenderingTest(hooks);
 
-  // TODO:  need bread crumbs tests
   test('it renders', async function(assert) {
-    assert.ok(true);
+    this.set('breadCrumbs', [{label: 'Level 1'}]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    // Default index route
+    assert.ok(find('.rose-nav-breadcrumbs a').href.match(/#$/));
+    assert.equal(find('.rose-nav-breadcrumbs').textContent.trim(), 'Level 1');
+  });
+
+  test('it renders with model', async function(assert) {
+    let store = this.owner.lookup('service:store');
+    let project = store.createRecord('project', {id: '1234'});
+
+    this.set('breadCrumbs', [{
+      label: 'Level 2',
+      path: 'orgs.org.projects.project',
+      model: project
+    }]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    assert.equal(find('.rose-nav-breadcrumbs').textContent.trim(), 'Level 2');
+  });
+
+  test('it renders multiple breadCrumbs', async function(assert) {
+    this.set('breadCrumbs', [{
+      label: 'Level 1'
+    },{
+      label: 'Level 2'
+    }, {
+      label: 'Level 3'
+    }]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    assert.equal(findAll('a').length, 3);
+    assert.equal(findAll('a')[0].textContent.trim(), 'Level 1');
+    assert.equal(findAll('a')[1].textContent.trim(), 'Level 2');
+    assert.equal(findAll('a')[2].textContent.trim(), 'Level 3');
   });
 });