Skip to content

Commit 42d72f8

Browse files
WindvisWindvis
committed
Add Glint support to the AuAccordion component
1 parent 75e54ed commit 42d72f8

File tree

4 files changed

+107
-52
lines changed

4 files changed

+107
-52
lines changed

‎addon/components/au-accordion.gjs ‎addon/components/au-accordion.gts

+23-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1-
import {
2-
AuButton,
3-
AuContent,
4-
AuIcon,
5-
AuLoader,
6-
AuToolbar,
7-
} from '@appuniversum/ember-appuniversum';
81
import { on } from '@ember/modifier';
92
import { action } from '@ember/object';
103
import Component from '@glimmer/component';
114
import { tracked } from '@glimmer/tracking';
125
import { modifier } from 'ember-modifier';
6+
import AuButton from './au-button';
7+
import AuContent from './au-content';
8+
import AuIcon from './au-icon';
9+
import AuLoader from './au-loader';
10+
import AuToolbar from './au-toolbar';
1311

14-
const autofocus = modifier(function autofocus(element) {
12+
const autofocus = modifier(function autofocus(element: HTMLElement) {
1513
element.focus();
1614
});
1715

18-
export default class AuAccordion extends Component {
16+
export interface AuAccordionSignature {
17+
Args: {
18+
buttonLabel?: string;
19+
iconClosed?: string;
20+
iconOpen?: string;
21+
loading?: boolean;
22+
reverse?: boolean;
23+
skin?: 'border';
24+
subtitle?: string;
25+
};
26+
Blocks: {
27+
default: [];
28+
};
29+
Element: HTMLDivElement;
30+
}
31+
32+
export default class AuAccordion extends Component<AuAccordionSignature> {
1933
@tracked isOpen = false;
2034

2135
get loading() {

‎addon/template-registry.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Components
2+
import type AuAccordion from '@appuniversum/ember-appuniversum/components/au-accordion';
23
import type AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
34
import type AuApp from '@appuniversum/ember-appuniversum/components/au-app';
45
import type AuBadge from '@appuniversum/ember-appuniversum/components/au-badge';
@@ -25,6 +26,7 @@ import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers
2526

2627
export default interface AppuniversumRegistry {
2728
// Components
29+
AuAccordion: typeof AuAccordion;
2830
AuAlert: typeof AuAlert;
2931
AuApp: typeof AuApp;
3032
AuBadge: typeof AuBadge;

‎tests/integration/components/au-accordion-test.js ‎tests/integration/components/au-accordion-test.gts

+74-43
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { module, test } from 'qunit';
1+
import AuAccordion from '@appuniversum/ember-appuniversum/components/au-accordion';
2+
import { click, settled, render } from '@ember/test-helpers';
3+
import { tracked } from '@glimmer/tracking';
24
import { setupRenderingTest } from 'ember-qunit';
3-
import { click, render } from '@ember/test-helpers';
4-
import { hbs } from 'ember-cli-htmlbars';
5+
import { module, test } from 'qunit';
56

67
const ACCORDION = {
78
TOGGLE: '[data-test-accordion-toggle]',
@@ -13,25 +14,35 @@ const ACCORDION = {
1314
LOADER: '[data-test-accordion-loader]',
1415
};
1516

17+
class TestState {
18+
@tracked iconClosed?: string;
19+
@tracked iconOpen?: string;
20+
@tracked isLoading?: boolean;
21+
}
22+
1623
module('Integration | Component | au-accordion', function (hooks) {
1724
setupRenderingTest(hooks);
1825

1926
test("it doesn't render any content when initially rendered", async function (assert) {
20-
await render(hbs`
21-
<AuAccordion>
22-
Content
23-
</AuAccordion>
24-
`);
27+
await render(
28+
<template>
29+
<AuAccordion>
30+
Content
31+
</AuAccordion>
32+
</template>,
33+
);
2534

2635
assert.dom(ACCORDION.CONTENT).doesNotExist();
2736
});
2837

2938
test('it toggles its content rendering when clicking it', async function (assert) {
30-
await render(hbs`
31-
<AuAccordion>
32-
Some content
33-
</AuAccordion>
34-
`);
39+
await render(
40+
<template>
41+
<AuAccordion>
42+
Some content
43+
</AuAccordion>
44+
</template>,
45+
);
3546

3647
await toggleAccordion();
3748
assert.dom(ACCORDION.CONTENT).exists().hasText('Some content');
@@ -41,31 +52,37 @@ module('Integration | Component | au-accordion', function (hooks) {
4152
});
4253

4354
test('it can display a subtitle', async function (assert) {
44-
await render(hbs`
45-
<AuAccordion @subtitle="Foo">
46-
Some content
47-
</AuAccordion>
48-
`);
55+
await render(
56+
<template>
57+
<AuAccordion @subtitle="Foo">
58+
Some content
59+
</AuAccordion>
60+
</template>,
61+
);
4962

5063
assert.dom(ACCORDION.SUBTITLE).exists().hasText('Foo');
5164
});
5265

5366
test('it supports changing the label of the toggle button', async function (assert) {
54-
await render(hbs`
55-
<AuAccordion @buttonLabel="Foo button">
56-
Some content
57-
</AuAccordion>
58-
`);
67+
await render(
68+
<template>
69+
<AuAccordion @buttonLabel="Foo button">
70+
Some content
71+
</AuAccordion>
72+
</template>,
73+
);
5974

6075
assert.dom(ACCORDION.BUTTON).exists().hasText('Foo button');
6176
});
6277

6378
test('it shows a different icon depending on the open state', async function (assert) {
64-
await render(hbs`
65-
<AuAccordion>
66-
Some content
67-
</AuAccordion>
68-
`);
79+
await render(
80+
<template>
81+
<AuAccordion>
82+
Some content
83+
</AuAccordion>
84+
</template>,
85+
);
6986

7087
assert.dom(ACCORDION.ICON_OPEN).doesNotExist();
7188
assert.dom(ACCORDION.ICON_CLOSED).exists();
@@ -76,17 +93,24 @@ module('Integration | Component | au-accordion', function (hooks) {
7693
});
7794

7895
test('it supports choosing different icons', async function (assert) {
79-
await render(hbs`
80-
<AuAccordion @iconOpen={{this.iconOpen}} @iconClosed={{this.iconClosed}}>
81-
Some content
82-
</AuAccordion>
83-
`);
96+
const state = new TestState();
97+
await render(
98+
<template>
99+
<AuAccordion
100+
@iconOpen={{state.iconOpen}}
101+
@iconClosed={{state.iconClosed}}
102+
>
103+
Some content
104+
</AuAccordion>
105+
</template>,
106+
);
84107

85108
assert
86109
.dom(ACCORDION.ICON_CLOSED)
87110
.hasAttribute('data-test-accordion-icon-closed', 'nav-right');
88111

89-
this.set('iconClosed', 'other-closed-icon');
112+
state.iconClosed = 'other-closed-icon';
113+
await settled();
90114

91115
assert
92116
.dom(ACCORDION.ICON_CLOSED)
@@ -97,35 +121,42 @@ module('Integration | Component | au-accordion', function (hooks) {
97121
.dom(ACCORDION.ICON_OPEN)
98122
.hasAttribute('data-test-accordion-icon-open', 'nav-down');
99123

100-
this.set('iconOpen', 'other-open-icon');
124+
state.iconOpen = 'other-open-icon';
125+
await settled();
101126

102127
assert
103128
.dom(ACCORDION.ICON_OPEN)
104129
.hasAttribute('data-test-accordion-icon-open', 'other-open-icon');
105130
});
106131

107132
test('it can show a loading indicator instead of content', async function (assert) {
108-
this.isLoading = true;
133+
const state = new TestState();
134+
state.isLoading = true;
109135

110-
await render(hbs`
111-
<AuAccordion @loading={{this.isLoading}}>Some content</AuAccordion>
112-
`);
136+
await render(
137+
<template>
138+
<AuAccordion @loading={{state.isLoading}}>Some content</AuAccordion>
139+
</template>,
140+
);
113141

114142
assert.dom(ACCORDION.LOADER).doesNotExist();
115143

116144
await toggleAccordion();
117145
assert.dom(ACCORDION.LOADER).exists();
118146
assert.dom(ACCORDION.CONTENT).doesNotContainText('Some content');
119147

120-
this.set('isLoading', false);
148+
state.isLoading = false;
149+
await settled();
121150
assert.dom(ACCORDION.LOADER).doesNotExist();
122151
assert.dom(ACCORDION.CONTENT).containsText('Some content');
123152
});
124153

125154
test("it's possible to add extra html attributes", async function (assert) {
126-
await render(hbs`
127-
<AuAccordion class="test" data-test-accordion-external></AuAccordion>
128-
`);
155+
await render(
156+
<template>
157+
<AuAccordion class="test" data-test-accordion-external />
158+
</template>,
159+
);
129160

130161
assert.dom('[data-test-accordion-external]').exists().hasClass('test');
131162
});

‎tests/integration/components/loose-mode-test.ts

+8
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import { hbs } from 'ember-cli-htmlbars';
88
module('Integration | Component | Loose mode', function (hooks) {
99
setupRenderingTest(hooks);
1010

11+
test('`<AuAccordion>` resolves in loose mode', async function (assert) {
12+
await render(hbs`
13+
<AuAccordion data-test-accordion-external></AuAccordion>
14+
`);
15+
16+
assert.dom('[data-test-accordion-external]').exists();
17+
});
18+
1119
test('`<AuAlert>` resolves in loose mode', async function (assert) {
1220
await render(hbs`<AuAlert data-test-alert />`);
1321

0 commit comments

Comments
 (0)