diff --git a/app/components/table-of-contents.hbs b/app/components/table-of-contents.hbs
index 5785aa49..b013ac04 100644
--- a/app/components/table-of-contents.hbs
+++ b/app/components/table-of-contents.hbs
@@ -1,7 +1,7 @@
- -
- Packages
-
+ -
+ Packages
+
{{#each @moduleIDs as |moduleID|}}
{{#if (not-eq moduleID '@ember/object/computed')}}
@@ -15,9 +15,9 @@
{{#if @isShowingNamespaces}}
- -
- Namespaces
-
+ -
+ Namespaces
+
{{#each @namespaceIDs as |namespaceID|}}
-
{{namespaceID}}
@@ -27,9 +27,9 @@
{{/if}}
- -
- Classes
-
+ -
+ Classes
+
{{#each @classesIDs as |classID|}}
-
{{classID}}
diff --git a/app/components/table-of-contents.js b/app/components/table-of-contents.js
deleted file mode 100644
index fbbf7ab7..00000000
--- a/app/components/table-of-contents.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-
-export default class TableOfContents extends Component {
- @action
- toggle(type) {
- const tableElement = document.querySelector(
- `ul.sub-table-of-contents.${type}`
- );
- tableElement.classList.toggle('selected');
- }
-}
diff --git a/app/components/table-of-projects.hbs b/app/components/table-of-projects.hbs
index 5eaa5dc7..7a8139e1 100644
--- a/app/components/table-of-projects.hbs
+++ b/app/components/table-of-projects.hbs
@@ -1,8 +1,8 @@
-
+
-
Home
- - Projects
+ - Projects
- Ember
- EmberData
diff --git a/app/styles/app.css b/app/styles/app.css
index 3c700eb2..2214580b 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -79,6 +79,7 @@ main a.edit-icon {
.table-of-contents li {
margin: 3px 0;
list-style-type: none;
+ color: var(--color-gray-600);
}
li.toc-heading {
diff --git a/tests/integration/components/table-of-contents-test.js b/tests/integration/components/table-of-contents-test.js
index 7217b981..59089fed 100644
--- a/tests/integration/components/table-of-contents-test.js
+++ b/tests/integration/components/table-of-contents-test.js
@@ -1,16 +1,15 @@
-import { module, test, skip } from 'qunit';
+import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, click } from '@ember/test-helpers';
+import { render, findAll } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
-const TIMEOUT_FOR_ANIMATION = 600;
const CLASSES = ['Descriptor', 'Ember'];
const MODULES = ['@ember/application', '@ember/array'];
module('Integration | Component | table of contents', function (hooks) {
setupRenderingTest(hooks);
- test('it renders', async function (assert) {
+ test('it renders classes', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
this.set('emberVersion', '2.4.3');
this.set('classesIDs', CLASSES);
@@ -29,7 +28,7 @@ module('Integration | Component | table of contents', function (hooks) {
);
const contentReference = '.sub-table-of-contents';
- assert.dom(contentTitle).hasText('Classes');
+ assert.dom(contentTitle).includesText('Classes');
assert
.dom(`${contentReference} li`)
.exists({ count: 2 }, 'We have two items to display');
@@ -37,7 +36,7 @@ module('Integration | Component | table of contents', function (hooks) {
assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
});
- test('Starts with underlying content visible', async function (assert) {
+ test('it renders packages', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
this.set('emberVersion', '2.4.3');
this.set('moduleIDs', MODULES);
@@ -54,11 +53,10 @@ module('Integration | Component | table of contents', function (hooks) {
const contentReference = '.sub-table-of-contents';
const content = document.querySelector(contentReference);
const contentTitle = document.querySelector(
- '[data-test-toc-title="classes"]'
+ '[data-test-toc-title="packages"]'
);
- assert.dom(contentTitle).hasText('Classes');
- assert.dom(content).hasClass('selected');
+ assert.dom(contentTitle).includesText('Packages');
assert
.dom(`${contentReference} li`)
.exists({ count: 2 }, 'We have two items to display');
@@ -66,84 +64,4 @@ module('Integration | Component | table of contents', function (hooks) {
assert.dom(findAll(`${contentReference} li`)[0]).hasText(MODULES[0]);
assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
});
-
- skip('Underlying content hides once clicked', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
- this.set('emberVersion', '2.4.3');
- this.set('moduleIDs', MODULES);
-
- await render(hbs`
-
- `);
-
- const contentTitle = document.querySelector(
- '[data-test-toc-title="packages"]'
- );
- const contentReference = '.sub-table-of-content';
- const content = document.querySelector(contentReference);
-
- assert.dom(contentTitle).hasText('Packages');
- assert.dom(content).hasClass('selected');
- assert.dom(content).isVisible();
-
- await click(contentTitle);
-
- const done = assert.async();
- setTimeout(() => {
- assert.dom(content).isNotVisible();
- assert.dom(content).doesNotHaveClass('selected');
- done();
- }, TIMEOUT_FOR_ANIMATION);
- });
-
- skip('Underlying content should be visible after 2 clicks', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
- this.set('emberVersion', '2.4.3');
- this.set('moduleIDs', MODULES);
-
- await render(hbs`
-
- `);
-
- const titleButton = document.querySelector(
- '[data-test-toc-title="packages"]'
- );
- const contentReference = '.sub-table-of-contents';
- const content = document.querySelector(contentReference);
-
- assert.dom(titleButton).hasText('Packages');
- assert.dom(content).hasClass('selected');
- assert.dom(content).isVisible();
-
- await click(titleButton);
-
- const done1 = assert.async();
-
- setTimeout(async () => {
- assert.dom(content).isNotVisible();
- assert.dom(content).doesNotHaveClass('selected');
-
- await click(titleButton);
-
- const done2 = assert.async();
-
- setTimeout(() => {
- assert.dom(content).isVisible();
- assert.dom(content).hasClass('selected');
- done2();
- }, TIMEOUT_FOR_ANIMATION);
-
- done1();
- }, TIMEOUT_FOR_ANIMATION);
- });
});