Skip to content

Commit 831ceeb

Browse files
thisisdanothisisdano
authored
Merge pull request #3950 from uswds/accelerator/3935-sortable-table
Add table sorting
2 parents b449e33 + 96c7aee commit 831ceeb

File tree

50 files changed

+1640
-717
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1640
-717
lines changed

‎spec/unit/accordion/accordion.spec.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ describe("accordion behavior", () => {
5151
});
5252

5353
it('toggles button aria-expanded="true"', () => {
54-
assert.equal(button.getAttribute(EXPANDED), "true");
54+
assert.strictEqual(button.getAttribute(EXPANDED), "true");
5555
});
5656

5757
it('toggles content "hidden" off', () => {
@@ -66,7 +66,7 @@ describe("accordion behavior", () => {
6666
});
6767

6868
it('toggles button aria-expanded="false"', () => {
69-
assert.equal(button.getAttribute(EXPANDED), "false");
69+
assert.strictEqual(button.getAttribute(EXPANDED), "false");
7070
});
7171

7272
it('toggles content "hidden" on', () => {
@@ -81,10 +81,10 @@ describe("accordion behavior", () => {
8181
const target = document.getElementById(second.getAttribute(CONTROLS));
8282
second.click();
8383
// first button and section should be collapsed
84-
assert.equal(button.getAttribute(EXPANDED), "false");
84+
assert.strictEqual(button.getAttribute(EXPANDED), "false");
8585
assert(content.hasAttribute(HIDDEN));
8686
// second should be expanded
87-
assert.equal(second.getAttribute(EXPANDED), "true");
87+
assert.strictEqual(second.getAttribute(EXPANDED), "true");
8888
assert(target.getAttribute(HIDDEN) !== true);
8989
});
9090

@@ -95,10 +95,10 @@ describe("accordion behavior", () => {
9595
second.click();
9696
button.click();
9797

98-
assert.equal(button.getAttribute(EXPANDED), "true");
98+
assert.strictEqual(button.getAttribute(EXPANDED), "true");
9999
assert(content.getAttribute(HIDDEN) !== true);
100100
// second should be expanded
101-
assert.equal(second.getAttribute(EXPANDED), "true");
101+
assert.strictEqual(second.getAttribute(EXPANDED), "true");
102102
assert(content.getAttribute(HIDDEN) !== true);
103103
});
104104
});

‎spec/unit/banner/banner.spec.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@ describe("banner", () => {
3131
});
3232

3333
it("initializes closed", () => {
34-
assert.equal(header.classList.contains(EXPANDED_CLASS), false);
35-
assert.equal(button.getAttribute(EXPANDED), "false");
34+
assert.strictEqual(header.classList.contains(EXPANDED_CLASS), false);
35+
assert.strictEqual(button.getAttribute(EXPANDED), "false");
3636
assert(content.hasAttribute(HIDDEN));
3737
});
3838

3939
it("opens when you click the button", () => {
4040
button.click();
41-
assert.equal(header.classList.contains(EXPANDED_CLASS), true);
42-
assert.equal(button.getAttribute(EXPANDED), "true");
41+
assert.strictEqual(header.classList.contains(EXPANDED_CLASS), true);
42+
assert.strictEqual(button.getAttribute(EXPANDED), "true");
4343
assert(content.getAttribute(HIDDEN) !== true);
4444
});
4545

4646
it("closes when you click the button again", () => {
4747
button.click();
4848
button.click();
49-
assert.equal(header.classList.contains(EXPANDED_CLASS), false);
50-
assert.equal(button.getAttribute(EXPANDED), "false");
49+
assert.strictEqual(header.classList.contains(EXPANDED_CLASS), false);
50+
assert.strictEqual(button.getAttribute(EXPANDED), "false");
5151
assert(content.hasAttribute(HIDDEN));
5252
});
5353
});

‎spec/unit/character-count/character-count.spec.js‎

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
const fs = require('fs');
2-
const path = require('path');
3-
const assert = require('assert');
4-
const CharacterCount = require('../../../src/js/components/character-count');
1+
const fs = require("fs");
2+
const path = require("path");
3+
const assert = require("assert");
4+
const CharacterCount = require("../../../src/js/components/character-count");
55

66
const { VALIDATION_MESSAGE, MESSAGE_INVALID_CLASS } = CharacterCount;
77

8-
const TEMPLATE = fs.readFileSync(path.join(__dirname, '/character-count.template.html'));
8+
const TEMPLATE = fs.readFileSync(
9+
path.join(__dirname, "/character-count.template.html")
10+
);
911

1012
const EVENTS = {};
1113

@@ -14,10 +16,10 @@ const EVENTS = {};
1416
* @param {HTMLElement} el the element to sent the event to
1517
*/
1618
EVENTS.input = (el) => {
17-
el.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
19+
el.dispatchEvent(new KeyboardEvent("input", { bubbles: true }));
1820
};
1921

20-
describe('character count component', () => {
22+
describe("character count component", () => {
2123
const { body } = document;
2224

2325
let root;
@@ -28,76 +30,70 @@ describe('character count component', () => {
2830
body.innerHTML = TEMPLATE;
2931
CharacterCount.on();
3032

31-
root = body.querySelector('.usa-character-count');
32-
input = root.querySelector('.usa-character-count__field');
33-
message = root.querySelector('.usa-character-count__message');
33+
root = body.querySelector(".usa-character-count");
34+
input = root.querySelector(".usa-character-count__field");
35+
message = root.querySelector(".usa-character-count__message");
3436
});
3537

3638
afterEach(() => {
37-
body.textContent = '';
39+
body.textContent = "";
3840
CharacterCount.off(body);
3941
});
4042

41-
it('adds initial message for the character count component', () => {
42-
assert.equal(message.innerHTML, '20 characters allowed');
43+
it("adds initial message for the character count component", () => {
44+
assert.strictEqual(message.innerHTML, "20 characters allowed");
4345
});
4446

45-
it('informs the user how many more characters they are allowed', () => {
46-
input.value = '1';
47+
it("informs the user how many more characters they are allowed", () => {
48+
input.value = "1";
4749

4850
EVENTS.input(input);
4951

50-
assert.equal(message.innerHTML, '19 characters left');
52+
assert.strictEqual(message.innerHTML, "19 characters left");
5153
});
5254

53-
it('informs the user they are allowed a single character', () => {
54-
input.value = '1234567890123456789';
55+
it("informs the user they are allowed a single character", () => {
56+
input.value = "1234567890123456789";
5557

5658
EVENTS.input(input);
5759

58-
assert.equal(message.innerHTML, '1 character left');
60+
assert.strictEqual(message.innerHTML, "1 character left");
5961
});
6062

61-
it('informs the user they are over the limit by a single character', () => {
62-
input.value = '123456789012345678901';
63+
it("informs the user they are over the limit by a single character", () => {
64+
input.value = "123456789012345678901";
6365

6466
EVENTS.input(input);
6567

66-
assert.equal(message.innerHTML, '1 character over limit');
68+
assert.strictEqual(message.innerHTML, "1 character over limit");
6769
});
6870

69-
it('informs the user how many characters they will need to remove', () => {
70-
input.value = '1234567890123456789012345';
71+
it("informs the user how many characters they will need to remove", () => {
72+
input.value = "1234567890123456789012345";
7173

7274
EVENTS.input(input);
7375

74-
assert.equal(message.innerHTML, '5 characters over limit');
76+
assert.strictEqual(message.innerHTML, "5 characters over limit");
7577
});
7678

77-
it('should show the component and input as valid when the input is under the limit', () => {
78-
input.value = '1';
79+
it("should show the component and input as valid when the input is under the limit", () => {
80+
input.value = "1";
7981

8082
EVENTS.input(input);
8183

82-
assert.equal(input.validationMessage, '');
83-
assert.equal(
84+
assert.strictEqual(input.validationMessage, "");
85+
assert.strictEqual(
8486
message.classList.contains(MESSAGE_INVALID_CLASS),
85-
false,
87+
false
8688
);
8789
});
8890

89-
it('should show the component and input as invalid when the input is over the limit', () => {
90-
input.value = '123456789012345678901';
91+
it("should show the component and input as invalid when the input is over the limit", () => {
92+
input.value = "123456789012345678901";
9193

9294
EVENTS.input(input);
9395

94-
assert.equal(
95-
input.validationMessage,
96-
VALIDATION_MESSAGE,
97-
);
98-
assert.equal(
99-
message.classList.contains(MESSAGE_INVALID_CLASS),
100-
true,
101-
);
96+
assert.strictEqual(input.validationMessage, VALIDATION_MESSAGE);
97+
assert.strictEqual(message.classList.contains(MESSAGE_INVALID_CLASS), true);
10298
});
10399
});

‎spec/unit/character-count/valid-template-multiple-validators.spec.js‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
const fs = require('fs');
2-
const path = require('path');
3-
const assert = require('assert');
4-
const CharacterCount = require('../../../src/js/components/character-count');
1+
const fs = require("fs");
2+
const path = require("path");
3+
const assert = require("assert");
4+
const CharacterCount = require("../../../src/js/components/character-count");
55

6-
const TEMPLATE = fs.readFileSync(path.join(__dirname, '/valid-template-multiple-validators.template.html'));
6+
const TEMPLATE = fs.readFileSync(
7+
path.join(__dirname, "/valid-template-multiple-validators.template.html")
8+
);
79

810
const EVENTS = {};
911

@@ -12,10 +14,10 @@ const EVENTS = {};
1214
* @param {HTMLElement} el the element to sent the event to
1315
*/
1416
EVENTS.input = (el) => {
15-
el.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
17+
el.dispatchEvent(new KeyboardEvent("input", { bubbles: true }));
1618
};
1719

18-
describe('character count component with multiple validators', () => {
20+
describe("character count component with multiple validators", () => {
1921
const { body } = document;
2022

2123
let root;
@@ -25,60 +27,63 @@ describe('character count component with multiple validators', () => {
2527
body.innerHTML = TEMPLATE;
2628
CharacterCount.on();
2729

28-
root = body.querySelector('.usa-character-count');
29-
input = root.querySelector('.usa-character-count__field');
30+
root = body.querySelector(".usa-character-count");
31+
input = root.querySelector(".usa-character-count__field");
3032
});
3133

3234
afterEach(() => {
33-
body.textContent = '';
35+
body.textContent = "";
3436
CharacterCount.off(body);
3537
});
3638

37-
it('assert that input constraint validation adds a validation message', () => {
38-
input.value = 'abcd5';
39+
it("assert that input constraint validation adds a validation message", () => {
40+
input.value = "abcd5";
3941

4042
EVENTS.input(input);
4143

42-
assert.equal(input.validationMessage, 'Constraints not satisfied');
44+
assert.strictEqual(input.validationMessage, "Constraints not satisfied");
4345
});
4446

45-
it('assert that input constraint validation does not overwrite a custom message', () => {
46-
input.setCustomValidity('There is an error');
47-
input.value = 'abcd5';
47+
it("assert that input constraint validation does not overwrite a custom message", () => {
48+
input.setCustomValidity("There is an error");
49+
input.value = "abcd5";
4850

4951
EVENTS.input(input);
5052

51-
assert.equal(input.validationMessage, 'There is an error');
53+
assert.strictEqual(input.validationMessage, "There is an error");
5254
});
5355

54-
it('should not affect the validation message when a custom error message is already present', () => {
55-
input.setCustomValidity('There is an error');
56-
input.value = 'abcdef';
56+
it("should not affect the validation message when a custom error message is already present", () => {
57+
input.setCustomValidity("There is an error");
58+
input.value = "abcdef";
5759

5860
EVENTS.input(input);
5961

60-
assert.equal(input.validationMessage, 'There is an error');
62+
assert.strictEqual(input.validationMessage, "There is an error");
6163
});
6264

63-
it('should not affect the validation message when the input is already invalid', () => {
64-
input.value = 'abcde5';
65+
it("should not affect the validation message when the input is already invalid", () => {
66+
input.value = "abcde5";
6567

6668
EVENTS.input(input);
6769

68-
assert.equal(input.validationMessage, 'Constraints not satisfied');
70+
assert.strictEqual(input.validationMessage, "Constraints not satisfied");
6971
});
7072

71-
it('should clear the validation message when input is only invalid by character count validation', () => {
72-
input.value = 'abcdef';
73+
it("should clear the validation message when input is only invalid by character count validation", () => {
74+
input.value = "abcdef";
7375

7476
EVENTS.input(input);
7577

76-
assert.equal(input.validationMessage, CharacterCount.VALIDATION_MESSAGE);
78+
assert.strictEqual(
79+
input.validationMessage,
80+
CharacterCount.VALIDATION_MESSAGE
81+
);
7782

78-
input.value = 'abcde';
83+
input.value = "abcde";
7984

8085
EVENTS.input(input);
8186

82-
assert.equal(input.validationMessage, '');
87+
assert.strictEqual(input.validationMessage, "");
8388
});
8489
});

‎spec/unit/character-count/valid-template-no-maxlength.spec.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
const fs = require('fs');
2-
const path = require('path');
3-
const assert = require('assert');
4-
const CharacterCount = require('../../../src/js/components/character-count');
1+
const fs = require("fs");
2+
const path = require("path");
3+
const assert = require("assert");
4+
const CharacterCount = require("../../../src/js/components/character-count");
55

6-
const TEMPLATE = fs.readFileSync(path.join(__dirname, '/valid-template-no-maxlength.template.html'));
6+
const TEMPLATE = fs.readFileSync(
7+
path.join(__dirname, "/valid-template-no-maxlength.template.html")
8+
);
79

810
const EVENTS = {};
911

@@ -12,10 +14,10 @@ const EVENTS = {};
1214
* @param {HTMLElement} el the element to sent the event to
1315
*/
1416
EVENTS.input = (el) => {
15-
el.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
17+
el.dispatchEvent(new KeyboardEvent("input", { bubbles: true }));
1618
};
1719

18-
describe('character count component without maxlength', () => {
20+
describe("character count component without maxlength", () => {
1921
const { body } = document;
2022

2123
let root;
@@ -26,25 +28,25 @@ describe('character count component without maxlength', () => {
2628
body.innerHTML = TEMPLATE;
2729
CharacterCount.on();
2830

29-
root = body.querySelector('.usa-character-count');
30-
input = root.querySelector('.usa-character-count__field');
31-
message = root.querySelector('.usa-character-count__message');
31+
root = body.querySelector(".usa-character-count");
32+
input = root.querySelector(".usa-character-count__field");
33+
message = root.querySelector(".usa-character-count__message");
3234
});
3335

3436
afterEach(() => {
35-
body.textContent = '';
37+
body.textContent = "";
3638
CharacterCount.off(body);
3739
});
3840

39-
it('should not update an initial message for the character count component', () => {
40-
assert.equal(message.innerHTML, '');
41+
it("should not update an initial message for the character count component", () => {
42+
assert.strictEqual(message.innerHTML, "");
4143
});
4244

43-
it('should not inform the user of remaining characters when typing', () => {
44-
input.value = '1';
45+
it("should not inform the user of remaining characters when typing", () => {
46+
input.value = "1";
4547

4648
EVENTS.input(input);
4749

48-
assert.equal(message.innerHTML, '');
50+
assert.strictEqual(message.innerHTML, "");
4951
});
5052
});

0 commit comments

Comments
 (0)