Skip to content
This repository was archived by the owner on Oct 1, 2024. It is now read-only.

Commit 1dfcc4f

Browse files
author
george
committed
put components and helpers into folders to allow better data sharing + separation of concerns between components, dependencies, and test suites
1 parent 334e85b commit 1dfcc4f

37 files changed

+327
-344
lines changed

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const modules = {
77
emotion: "emotion",
88
}
99

10-
const libIgnore = ["src/js/__tests__", "src/js/index.bundle.js"]
10+
const libIgnore = ["src/js/**/__tests__", "src/js/index.bundle.js", "src/js/helpers/test"]
1111

1212
module.exports = api => {
1313
const test = api.env("test")

src/js/__tests__/__snapshots__/accordion.spec.js.snap renamed to src/js/accordion/__tests__/__snapshots__/accordion.spec.js.snap

File renamed without changes.

src/js/__tests__/accordion.spec.js renamed to src/js/accordion/__tests__/accordion.spec.js

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Undernet from "../"
2-
import { find, renderDOM } from "./helpers"
1+
import Undernet from "../.."
2+
import { find, renderDOM } from "../../helpers/test"
3+
import { Messages } from "../constants"
34

45
const dom = `
56
<div data-accordion="accordion-id" class="accordion">
@@ -47,7 +48,7 @@ describe("Accordion", () => {
4748

4849
it("sets attributes on collapsibles", () => {
4950
Undernet.Accordions.start()
50-
expect(wrapper()).toMatchSnapshot()
51+
expect(wrapper).toMatchSnapshot()
5152
})
5253

5354
it("can open multiple collapsibles initially", () => {
@@ -56,7 +57,7 @@ describe("Accordion", () => {
5657
// When
5758
Undernet.Accordions.start()
5859
// Then
59-
expect(wrapper()).toMatchSnapshot()
60+
expect(wrapper).toMatchSnapshot()
6061
})
6162
})
6263

@@ -70,7 +71,7 @@ describe("Accordion", () => {
7071
Undernet.Accordions.stop()
7172
trigger.click()
7273
// Then
73-
expect(wrapper()).toMatchSnapshot()
74+
expect(wrapper).toMatchSnapshot()
7475
})
7576
})
7677

@@ -83,7 +84,7 @@ describe("Accordion", () => {
8384
Undernet.Accordions.start()
8485
trigger.click()
8586
// Then
86-
expect(wrapper()).toMatchSnapshot()
87+
expect(wrapper).toMatchSnapshot()
8788
})
8889

8990
it("closes open collapsible", () => {
@@ -94,7 +95,7 @@ describe("Accordion", () => {
9495
Undernet.Accordions.start()
9596
trigger.click()
9697
// Then
97-
expect(wrapper()).toMatchSnapshot()
98+
expect(wrapper).toMatchSnapshot()
9899
})
99100

100101
describe("Multiple visible by default", () => {
@@ -113,7 +114,7 @@ describe("Accordion", () => {
113114
// When
114115
trigger.click()
115116
// Then
116-
expect(wrapper()).toMatchSnapshot()
117+
expect(wrapper).toMatchSnapshot()
117118
})
118119
})
119120

@@ -128,7 +129,7 @@ describe("Accordion", () => {
128129
// re-open collapsible
129130
trigger.click()
130131
// Then
131-
expect(wrapper()).toMatchSnapshot()
132+
expect(wrapper).toMatchSnapshot()
132133
})
133134
})
134135
})
@@ -138,13 +139,13 @@ describe("Accordion", () => {
138139
it("retains visible state of unselected collapsibles on click", () => {
139140
// Given
140141
const wrapper = renderDOM(dom)
141-
wrapper().setAttribute("data-toggle-multiple", null)
142+
wrapper.setAttribute("data-toggle-multiple", null)
142143
const trigger = find("[data-target='collapsible-id-2']")
143144
Undernet.Accordions.start()
144145
// When
145146
trigger.click()
146147
// Then
147-
expect(wrapper()).toMatchSnapshot()
148+
expect(wrapper).toMatchSnapshot()
148149
})
149150
})
150151
})
@@ -187,37 +188,34 @@ describe("Accordion Warnings", () => {
187188

188189
it("prints console warning if accordion id can't be found", () => {
189190
// Given
190-
const noIdWarning =
191-
"Could not initialize accordion; you must include a value for the 'data-accordion' attribute."
192191
renderDOM(errorDom("accordion-id", ""))
193192
const trigger = find("[data-target='collapsible-id-1']")
194193
// When
195194
Undernet.Accordions.start()
196195
trigger.click()
197196
// Then
198-
expect(console.error).toBeCalledWith(noIdWarning)
197+
expect(console.error).toBeCalledWith(Messages.NO_ACCORDION_ID_ERROR)
199198
})
200199

201200
it("prints console warning if there is a mismatch between the number of triggers and collapsibles when trapping focus", () => {
202201
// Given
203-
const noIdWarning =
204-
"Your accordion with id 'accordion-id' has 1 triggers and 2 collapsibles; make sure there is a trigger for each collapsible!"
205202
renderDOM(errorDom("accordion-id", ""))
206203
// When
207204
Undernet.Accordions.start()
208205
// Then
209-
expect(console.warn).toBeCalledWith(noIdWarning)
206+
expect(console.warn).toBeCalledWith(
207+
Messages.TRIGGERS_TO_COLLAPSIBLES_LENGTH_WARNING("accordion-id", 1, 2)
208+
)
210209
})
211210

212-
it("prints console warning if accordion element can't be found", () => {
211+
it("prints console error if accordion element can't be found", () => {
213212
// Given
214-
const noAccordionWarning = "Could not find element matching [data-accordion='accordion-id']"
215213
renderDOM(errorDom("", "accordion-id"))
216214
const trigger = find("[data-target='collapsible-id-1']")
217215
// When
218216
Undernet.Accordions.start()
219217
trigger.click()
220218
// Then
221-
expect(console.error).toBeCalledWith(noAccordionWarning)
219+
expect(console.error).toBeCalledWith(Messages.NO_ACCORDION_ERROR("accordion-id"))
222220
})
223221
})

src/js/accordion.js renamed to src/js/accordion/accordion.js

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,6 @@
1-
import Collapsible from "./collapsible"
2-
import { dom, createFocusTrap, isBrowserEnv, setComponents, log } from "./utils"
3-
4-
const Selectors = {
5-
// unique
6-
DATA_ACCORDION: "data-accordion",
7-
DATA_COLLAPSIBLE: "data-collapsible",
8-
DATA_TOGGLE_MULTIPLE: "data-toggle-multiple",
9-
// common
10-
DATA_PARENT: "data-parent",
11-
DATA_VISIBLE: "data-visible",
12-
DATA_TARGET: "data-target",
13-
// accessibility
14-
ARIA_EXPANDED: "aria-expanded",
15-
ARIA_HIDDEN: "aria-hidden",
16-
}
17-
18-
const Messages = {
19-
NO_ACCORDION_ID_ERROR:
20-
"Could not initialize accordion; you must include a value for the 'data-accordion' attribute.",
21-
NO_ACCORDION_ERROR: id => `Could not find element matching [data-accordion='${id}']`,
22-
NO_SCOPE_PARENT_ERROR: id => `Could not find parent with selector string: '${id}'.`,
23-
TRIGGERS_TO_COLLAPSIBLES_LENGTH_WARNING: (id, triggersLength, collapsiblesLength) =>
24-
`Your accordion with id '${id}' has ${triggersLength} triggers and ${collapsiblesLength} collapsibles; make sure there is a trigger for each collapsible!`,
25-
}
1+
import Collapsible from "../collapsible"
2+
import { dom, createFocusTrap, isBrowserEnv, setComponents, log } from "../helpers"
3+
import { Selectors, Messages } from "./constants"
264

275
/**
286
* Class that instantiates or destroys all instances of accordion components on a page.

‎src/js/accordion/constants.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const Selectors = {
2+
// unique
3+
DATA_ACCORDION: "data-accordion",
4+
DATA_COLLAPSIBLE: "data-collapsible",
5+
DATA_TOGGLE_MULTIPLE: "data-toggle-multiple",
6+
// common
7+
DATA_PARENT: "data-parent",
8+
DATA_VISIBLE: "data-visible",
9+
DATA_TARGET: "data-target",
10+
// accessibility
11+
ARIA_EXPANDED: "aria-expanded",
12+
ARIA_HIDDEN: "aria-hidden",
13+
}
14+
15+
export const Messages = {
16+
NO_ACCORDION_ID_ERROR:
17+
"Could not initialize accordion; you must include a value for the 'data-accordion' attribute.",
18+
NO_ACCORDION_ERROR: id => `Could not find element matching [data-accordion='${id}']`,
19+
TRIGGERS_TO_COLLAPSIBLES_LENGTH_WARNING: (id, triggersLength, collapsiblesLength) =>
20+
`Your accordion with id '${id}' has ${triggersLength} triggers and ${collapsiblesLength} collapsibles; make sure there is a trigger for each collapsible!`,
21+
}

‎src/js/accordion/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./accordion"

src/js/__tests__/__snapshots__/collapsible.spec.js.snap renamed to src/js/collapsible/__tests__/__snapshots__/collapsible.spec.js.snap

File renamed without changes.

src/js/__tests__/collapsible.spec.js renamed to src/js/collapsible/__tests__/collapsible.spec.js

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Undernet from "../"
2-
import { find, renderDOM } from "./helpers"
1+
import Undernet from "../.."
2+
import { find, renderDOM } from "../../helpers/test"
3+
import { Messages } from "../constants"
34

45
const dom = `
56
<div class="collapsible" data-collapsible="collapsible-id">
@@ -35,15 +36,15 @@ describe("Collapsible", () => {
3536
// When
3637
Undernet.Collapsibles.start()
3738
// Then
38-
expect(wrapper()).toMatchSnapshot()
39+
expect(wrapper).toMatchSnapshot()
3940
})
4041

4142
it("does not open collapsible by default if [data-visible='false'] is set", () => {
4243
find("[data-collapsible]").setAttribute("data-visible", "false")
4344
// When
4445
Undernet.Collapsibles.start()
4546
// Then
46-
expect(wrapper()).toMatchSnapshot()
47+
expect(wrapper).toMatchSnapshot()
4748
})
4849
})
4950

@@ -55,7 +56,7 @@ describe("Collapsible", () => {
5556
Undernet.Collapsibles.stop()
5657
trigger.click()
5758
// Then
58-
expect(wrapper()).toMatchSnapshot()
59+
expect(wrapper).toMatchSnapshot()
5960
})
6061
})
6162

@@ -66,7 +67,7 @@ describe("Collapsible", () => {
6667
Undernet.Collapsibles.start()
6768
trigger.click()
6869
// Then
69-
expect(wrapper()).toMatchSnapshot()
70+
expect(wrapper).toMatchSnapshot()
7071
})
7172
})
7273
})
@@ -88,55 +89,51 @@ const errorDom = (collapsibleId, collapsibleTriggerId, triggerId, contentId) =>
8889
`
8990

9091
describe("Collapsible Warnings", () => {
91-
const collapsibleId = "collapsible-id"
92-
const unMatchedCollapsibleId = "collapsible-id-no-match"
93-
const triggerId = "collapsible-trigger-id"
92+
const COLLAPSIBLE_ID = "collapsible-id"
93+
const UNMATCHED_COLLAPSIBLE_ID = "collapsible-id-no-match"
94+
const COLLAPSIBLE_TRIGGER_ID = "collapsible-trigger-id"
9495

9596
afterEach(() => {
9697
Undernet.Collapsibles.stop()
9798
})
9899

99100
it("prints console error if [data-collapsible] attribute is missing its value", () => {
100101
// Given
101-
renderDOM(errorDom("", unMatchedCollapsibleId, triggerId, collapsibleId))
102+
renderDOM(errorDom("", UNMATCHED_COLLAPSIBLE_ID, COLLAPSIBLE_TRIGGER_ID, COLLAPSIBLE_ID))
102103
// When
103104
Undernet.Collapsibles.start()
104105
// Then
105-
expect(console.error).toBeCalledWith(
106-
"Could not initialize collapsible; you must include a value for the 'data-collapsible' attribute."
107-
)
106+
expect(console.error).toBeCalledWith(Messages.NO_COLLAPSIBLE_ID_ERROR)
108107
})
109108

110109
it("prints console error if [data-trigger] attribute can't be found", () => {
111110
// Given
112-
renderDOM(errorDom(collapsibleId, unMatchedCollapsibleId, triggerId, collapsibleId))
111+
renderDOM(
112+
errorDom(COLLAPSIBLE_ID, UNMATCHED_COLLAPSIBLE_ID, COLLAPSIBLE_TRIGGER_ID, COLLAPSIBLE_ID)
113+
)
113114
// When
114115
Undernet.Collapsibles.start()
115116
// Then
116-
expect(console.error).toBeCalledWith(
117-
`Could not find collapsible trigger with [data-target='${collapsibleId}']; you can't have a collapsible without a trigger.`
118-
)
117+
expect(console.error).toBeCalledWith(Messages.NO_TRIGGER_ERROR(COLLAPSIBLE_ID))
119118
})
120119

121120
it("prints console error if trigger id can't be found", () => {
122121
// Given
123-
renderDOM(errorDom(collapsibleId, collapsibleId, "", collapsibleId))
122+
renderDOM(errorDom(COLLAPSIBLE_ID, COLLAPSIBLE_ID, "", COLLAPSIBLE_ID))
124123
// When
125124
Undernet.Collapsibles.start()
126125
// Then
127-
expect(console.error).toBeCalledWith(
128-
`Could not find id on collapsible trigger with [data-target='${collapsibleId}'].`
129-
)
126+
expect(console.error).toBeCalledWith(Messages.NO_TRIGGER_ID_ERROR(COLLAPSIBLE_ID))
130127
})
131128

132129
it("prints console error if collapsible content can't be found", () => {
133130
// Given
134-
renderDOM(errorDom(collapsibleId, collapsibleId, triggerId, unMatchedCollapsibleId))
131+
renderDOM(
132+
errorDom(COLLAPSIBLE_ID, COLLAPSIBLE_ID, COLLAPSIBLE_TRIGGER_ID, UNMATCHED_COLLAPSIBLE_ID)
133+
)
135134
// When
136135
Undernet.Collapsibles.start()
137136
// Then
138-
expect(console.error).toBeCalledWith(
139-
`Could not find collapsible content with id '${collapsibleId}'; you can't have a collapsible without content.`
140-
)
137+
expect(console.error).toBeCalledWith(Messages.NO_CONTENT_ERROR(COLLAPSIBLE_ID))
141138
})
142139
})

src/js/collapsible.js renamed to src/js/collapsible/collapsible.js

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,9 @@ import {
55
getPageBaseFontSize,
66
log,
77
setComponents,
8-
} from "./utils"
9-
10-
const Selectors = {
11-
// unique
12-
DATA_COLLAPSIBLE: "data-collapsible",
13-
// common
14-
DATA_VISIBLE: "data-visible",
15-
DATA_TARGET: "data-target",
16-
DATA_PARENT: "data-parent",
17-
// accessibility
18-
ARIA_EXPANDED: "aria-expanded",
19-
ARIA_CONTROLS: "aria-controls",
20-
ARIA_HIDDEN: "aria-hidden",
21-
ARIA_LABELLEDBY: "aria-labelledby",
22-
TABINDEX: "tabindex",
23-
}
24-
25-
const CssProperties = {
26-
MAX_HEIGHT: "maxHeight",
27-
}
8+
} from "../helpers"
289

29-
const Events = {
30-
CLICK: "click",
31-
}
32-
33-
const Messages = {
34-
NO_COLLAPSIBLE_ID_ERROR:
35-
"Could not initialize collapsible; you must include a value for the 'data-collapsible' attribute.",
36-
NO_TRIGGER_ERROR: id =>
37-
`Could not find collapsible trigger with [data-target='${id}']; you can't have a collapsible without a trigger.`,
38-
NO_TRIGGER_ID_ERROR: id => `Could not find id on collapsible trigger with [data-target='${id}'].`,
39-
NO_CONTENT_ERROR: id =>
40-
`Could not find collapsible content with id '${id}'; you can't have a collapsible without content.`,
41-
}
10+
import { Selectors, CssProperties, Events, Messages } from "./constants"
4211

4312
// COMPONENT_ROLE is described using `aria-controls` for the collapsible UI pattern.
4413

‎src/js/collapsible/constants.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const Selectors = {
2+
// unique
3+
DATA_COLLAPSIBLE: "data-collapsible",
4+
// common
5+
DATA_VISIBLE: "data-visible",
6+
DATA_TARGET: "data-target",
7+
DATA_PARENT: "data-parent",
8+
// accessibility
9+
ARIA_EXPANDED: "aria-expanded",
10+
ARIA_CONTROLS: "aria-controls",
11+
ARIA_HIDDEN: "aria-hidden",
12+
ARIA_LABELLEDBY: "aria-labelledby",
13+
TABINDEX: "tabindex",
14+
}
15+
16+
export const CssProperties = {
17+
MAX_HEIGHT: "maxHeight",
18+
}
19+
20+
export const Events = {
21+
CLICK: "click",
22+
}
23+
24+
export const Messages = {
25+
NO_COLLAPSIBLE_ID_ERROR:
26+
"Could not initialize collapsible; you must include a value for the 'data-collapsible' attribute.",
27+
NO_TRIGGER_ERROR: id =>
28+
`Could not find collapsible trigger with [data-target='${id}']; you can't have a collapsible without a trigger.`,
29+
NO_TRIGGER_ID_ERROR: id => `Could not find id on collapsible trigger with [data-target='${id}'].`,
30+
NO_CONTENT_ERROR: id =>
31+
`Could not find collapsible content with id '${id}'; you can't have a collapsible without content.`,
32+
}

0 commit comments

Comments
 (0)