Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/#832 space in classnames #889

Closed
wants to merge 3 commits into from
Closed

Fix/#832 space in classnames #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e02e422
add support for multi classes contains check
Matth10 Aug 12, 2020
a267dc9
add multi classes support for components
Matth10 Aug 12, 2020
e0ad686
add multiclasses support for template
Matth10 Aug 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 29 additions & 18 deletions src/scripts/components/container.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,29 @@ import { expect } from 'chai';
import { stub } from 'sinon';
import Container from './container';
import { DEFAULT_CLASSNAMES } from '../constants';
import { containsClassNames } from '../lib/utils';

describe('components/container', () => {
let instance;
let element;
let classNames;

beforeEach(() => {
element = document.createElement('div');
element.id = 'container';
classNames = {
...DEFAULT_CLASSNAMES,
openState: `${DEFAULT_CLASSNAMES.openState} other`,
loadingState: `${DEFAULT_CLASSNAMES.loadingState} other`,
flippedState: `${DEFAULT_CLASSNAMES.flippedState} other`,
disabledState: `${DEFAULT_CLASSNAMES.disabledState} other`,
focusState: `${DEFAULT_CLASSNAMES.focusState} other`,
};

document.body.appendChild(element);
instance = new Container({
element: document.getElementById('container') as HTMLElement,
classNames: DEFAULT_CLASSNAMES,
classNames,
position: 'auto',
type: 'text',
});
Expand All @@ -24,6 +34,7 @@ describe('components/container', () => {
document.body.innerHTML = '';
element = null;
instance = null;
classNames = null;
});

describe('constructor', () => {
Expand All @@ -32,7 +43,7 @@ describe('components/container', () => {
});

it('assigns classnames to class', () => {
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
expect(instance.classNames).to.eql(classNames);
});
});

Expand Down Expand Up @@ -163,7 +174,7 @@ describe('components/container', () => {

it('adds open state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.openState),
containsClassNames(instance.element, classNames.openState),
).to.equal(true);
});

Expand All @@ -190,7 +201,7 @@ describe('components/container', () => {

it('adds adds flipped state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.flippedState),
containsClassNames(instance.element, classNames.flippedState),
).to.equal(true);
});

Expand All @@ -207,7 +218,7 @@ describe('components/container', () => {

it('adds open state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.openState),
containsClassNames(instance.element, classNames.openState),
).to.equal(false);
});

Expand All @@ -227,7 +238,7 @@ describe('components/container', () => {

it('removes adds flipped state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.flippedState),
containsClassNames(instance.element, classNames.flippedState),
).to.equal(false);
});

Expand Down Expand Up @@ -272,11 +283,11 @@ describe('components/container', () => {

it('adds focus state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState),
containsClassNames(instance.element, classNames.focusState),
).to.equal(false);
instance.addFocusState();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState),
containsClassNames(instance.element, classNames.focusState),
).to.equal(true);
});
});
Expand All @@ -288,11 +299,11 @@ describe('components/container', () => {

it('removes focus state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState),
containsClassNames(instance.element, classNames.focusState),
).to.equal(true);
instance.removeFocusState();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState),
containsClassNames(instance.element, classNames.focusState),
).to.equal(false);
});
});
Expand All @@ -304,11 +315,11 @@ describe('components/container', () => {

it('removes disabled state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState),
containsClassNames(instance.element, classNames.disabledState),
).to.equal(true);
instance.enable();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState),
containsClassNames(instance.element, classNames.disabledState),
).to.equal(false);
});

Expand Down Expand Up @@ -342,11 +353,11 @@ describe('components/container', () => {

it('removes disabled state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState),
containsClassNames(instance.element, classNames.disabledState),
).to.equal(false);
instance.disable();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState),
containsClassNames(instance.element, classNames.disabledState),
).to.equal(true);
});

Expand Down Expand Up @@ -434,11 +445,11 @@ describe('components/container', () => {

it('adds loading state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState),
containsClassNames(instance.element, classNames.loadingState),
).to.equal(false);
instance.addLoadingState();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState),
containsClassNames(instance.element, classNames.loadingState),
).to.equal(true);
});

Expand All @@ -462,11 +473,11 @@ describe('components/container', () => {

it('removes loading state class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState),
containsClassNames(instance.element, classNames.loadingState),
).to.equal(true);
instance.removeLoadingState();
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState),
containsClassNames(instance.element, classNames.loadingState),
).to.equal(false);
});

Expand Down
20 changes: 10 additions & 10 deletions src/scripts/components/container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,25 +78,25 @@ export default class Container {
}

open(dropdownPos: number): void {
this.element.classList.add(this.classNames.openState);
this.element.classList.add(...this.classNames.openState.split(' '));
this.element.setAttribute('aria-expanded', 'true');
this.isOpen = true;

if (this.shouldFlip(dropdownPos)) {
this.element.classList.add(this.classNames.flippedState);
this.element.classList.add(...this.classNames.flippedState.split(' '));
this.isFlipped = true;
}
}

close(): void {
this.element.classList.remove(this.classNames.openState);
this.element.classList.remove(...this.classNames.openState.split(' '));
this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant();
this.isOpen = false;

// A dropdown flips if it does not have space within the page
if (this.isFlipped) {
this.element.classList.remove(this.classNames.flippedState);
this.element.classList.remove(...this.classNames.flippedState.split(' '));
this.isFlipped = false;
}
}
Expand All @@ -108,15 +108,15 @@ export default class Container {
}

addFocusState(): void {
this.element.classList.add(this.classNames.focusState);
this.element.classList.add(...this.classNames.focusState.split(' '));
}

removeFocusState(): void {
this.element.classList.remove(this.classNames.focusState);
this.element.classList.remove(...this.classNames.focusState.split(' '));
}

enable(): void {
this.element.classList.remove(this.classNames.disabledState);
this.element.classList.remove(...this.classNames.disabledState.split(' '));
this.element.removeAttribute('aria-disabled');
if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '0');
Expand All @@ -125,7 +125,7 @@ export default class Container {
}

disable(): void {
this.element.classList.add(this.classNames.disabledState);
this.element.classList.add(...this.classNames.disabledState.split(' '));
this.element.setAttribute('aria-disabled', 'true');
if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '-1');
Expand All @@ -147,13 +147,13 @@ export default class Container {
}

addLoadingState(): void {
this.element.classList.add(this.classNames.loadingState);
this.element.classList.add(...this.classNames.loadingState.split(' '));
this.element.setAttribute('aria-busy', 'true');
this.isLoading = true;
}

removeLoadingState(): void {
this.element.classList.remove(this.classNames.loadingState);
this.element.classList.remove(...this.classNames.loadingState.split(' '));
this.element.removeAttribute('aria-busy');
this.isLoading = false;
}
Expand Down
15 changes: 11 additions & 4 deletions src/scripts/components/dropdown.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,31 @@ import { expect } from 'chai';
import sinon from 'sinon';
import Dropdown from './dropdown';
import { DEFAULT_CLASSNAMES } from '../constants';
import { containsClassNames } from '../lib/utils';

describe('components/dropdown', () => {
let instance;
let choicesElement;
let classNames;

beforeEach(() => {
choicesElement = document.createElement('div');
document.body.appendChild(choicesElement);
classNames = {
...DEFAULT_CLASSNAMES,
activeState: `${DEFAULT_CLASSNAMES.activeState} other`,
};
instance = new Dropdown({
element: choicesElement,
type: 'text',
classNames: DEFAULT_CLASSNAMES,
classNames,
});
});

afterEach(() => {
document.body.innerHTML = '';
instance = null;
classNames = null;
});

describe('constructor', () => {
Expand All @@ -28,7 +35,7 @@ describe('components/dropdown', () => {
});

it('assigns classnames to instance', () => {
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
expect(instance.classNames).to.eql(classNames);
});
});

Expand Down Expand Up @@ -94,7 +101,7 @@ describe('components/dropdown', () => {

it('adds active class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState),
containsClassNames(instance.element, classNames.activeState),
).to.equal(true);
});

Expand Down Expand Up @@ -124,7 +131,7 @@ describe('components/dropdown', () => {

it('adds active class', () => {
expect(
instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState),
containsClassNames(instance.element, classNames.activeState),
).to.equal(false);
});

Expand Down
4 changes: 2 additions & 2 deletions src/scripts/components/dropdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class Dropdown {
* Show dropdown to user by adding active state class
*/
show(): this {
this.element.classList.add(this.classNames.activeState);
this.element.classList.add(...this.classNames.activeState.split(' '));
this.element.setAttribute('aria-expanded', 'true');
this.isActive = true;

Expand All @@ -47,7 +47,7 @@ export default class Dropdown {
* Hide dropdown from user
*/
hide(): this {
this.element.classList.remove(this.classNames.activeState);
this.element.classList.remove(...this.classNames.activeState.split(' '));
this.element.setAttribute('aria-expanded', 'false');
this.isActive = false;

Expand Down
23 changes: 15 additions & 8 deletions src/scripts/components/wrapped-element.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
import { expect } from 'chai';
import WrappedElement from './wrapped-element';
import { DEFAULT_CLASSNAMES } from '../constants';
import { containsClassNames } from '../lib/utils';

describe('components/wrappedElement', () => {
let instance;
let element;
let classNames;

beforeEach(() => {
element = document.createElement('select');
classNames = {
...DEFAULT_CLASSNAMES,
input: `${DEFAULT_CLASSNAMES.input} other`,
};
instance = new WrappedElement({
element,
classNames: DEFAULT_CLASSNAMES,
classNames,
});
});

afterEach(() => {
document.body.innerHTML = '';
instance = null;
classNames = null;
});

describe('constructor', () => {
Expand All @@ -25,7 +32,7 @@ describe('components/wrappedElement', () => {
});

it('assigns classnames to class', () => {
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
expect(instance.classNames).to.eql(classNames);
});

it('sets isDisabled flag to false', () => {
Expand Down Expand Up @@ -79,9 +86,9 @@ describe('components/wrappedElement', () => {
it('hides element', () => {
instance.conceal();
expect(instance.element.tabIndex).to.equal(-1);
expect(
instance.element.classList.contains(instance.classNames.input),
).to.equal(true);
expect(containsClassNames(instance.element, classNames.input)).to.equal(
true,
);
expect(instance.element.hidden).to.be.true;
expect(instance.element.getAttribute('data-choice')).to.equal('active');
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
Expand All @@ -101,9 +108,9 @@ describe('components/wrappedElement', () => {
it('shows element', () => {
instance.reveal();
expect(instance.element.tabIndex).to.equal(0);
expect(
instance.element.classList.contains(instance.classNames.input),
).to.equal(false);
expect(containsClassNames(instance.element, classNames.input)).to.equal(
false,
);
expect(instance.element.hidden).to.be.false;
expect(instance.element.getAttribute('style')).to.equal(originalStyling);
expect(instance.element.getAttribute('aria-hidden')).to.equal(null);
Expand Down
Loading