Skip to content

Commit

Permalink
rename toggle icon component
Browse files Browse the repository at this point in the history
Signed-off-by: Huong Nguyen <huongg1409@gmail>
  • Loading branch information
Huong Nguyen committed Oct 17, 2024
1 parent ca8b72c commit 65382f8
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 62 deletions.
44 changes: 0 additions & 44 deletions src/components/node-list-row-toggle/node-list-row-toggle.test.js

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/node-list/filter-row.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import classnames from 'classnames';
import { replaceAngleBracketMatches } from '../../utils';
import VisibleIcon from '../icons/visible';
import InvisibleIcon from '../icons/invisible';
import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';

// The exact fixed height of a row as measured by getBoundingClientRect()
export const nodeListRowHeight = 32;
Expand Down Expand Up @@ -66,7 +66,7 @@ export const FilterRow = ({
{count}
</span>
{VisibilityIcon && (
<NodeListRowToggle
<ToggleIcon
allUnchecked={allUnchecked}
className={'node-list-row__icon'}
IconComponent={VisibilityIcon}
Expand Down
6 changes: 3 additions & 3 deletions src/components/node-list/node-list-row.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import NodeIcon from '../icons/node-icon';
import VisibleIcon from '../icons/visible';
import InvisibleIcon from '../icons/invisible';
import FocusModeIcon from '../icons/focus-mode';
import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';

// The exact fixed height of a row as measured by getBoundingClientRect()
export const nodeListRowHeight = 32;
Expand Down Expand Up @@ -138,7 +138,7 @@ export const NodeListRow = memo(
</span>
)}
{VisibilityIcon && (
<NodeListRowToggle
<ToggleIcon
allUnchecked={allUnchecked}
className={'node-list-row__icon'}
isParent={Boolean(children)}
Expand All @@ -154,7 +154,7 @@ export const NodeListRow = memo(
/>
)}
{FocusIcon && (
<NodeListRowToggle
<ToggleIcon
allUnchecked={allUnchecked}
className={'node-list-row__icon'}
isParent={Boolean(children)}
Expand Down
10 changes: 5 additions & 5 deletions src/components/node-list/row.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import NodeIcon from '../icons/node-icon';
import VisibleIcon from '../icons/visible';
import InvisibleIcon from '../icons/invisible';
import FocusModeIcon from '../icons/focus-mode';
import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';

// The exact fixed height of a row as measured by getBoundingClientRect()
export const nodeListRowHeight = 32;
Expand Down Expand Up @@ -106,8 +106,8 @@ export const Row = ({
/>
</TextButton>
{VisibilityIcon && (
<NodeListRowToggle
allUnchecked={allUnchecked}
<ToggleIcon
// allUnchecked={allUnchecked}
className={'node-list-row__icon'}
disabled={isModularPipeline ? focused : disabled}
focusChecked={isModularPipeline ? false : focused}
Expand All @@ -121,8 +121,8 @@ export const Row = ({
/>
)}
{FocusIcon && (
<NodeListRowToggle
allUnchecked={allUnchecked}
<ToggleIcon
// allUnchecked={allUnchecked}
className={'node-list-row__icon'}
disabled={disabled}
focusChecked={focused}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import classnames from 'classnames';
import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
import { getDataTestAttribute } from '../../../utils/get-data-test-attribute';

import './node-list-row-toggle.scss';
import './toggle-icon.scss';

export const NodeListRowToggle = ({
export const ToggleIcon = ({
allUnchecked,
className,
disabled,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use '../../styles/mixins' as mixins;
@use '../../styles/variables' as colors;
@use '../node-list/styles/variables';
@use '../../../styles/mixins' as mixins;
@use '../../../styles/variables' as colors;
@use '../../node-list/styles/variables';

.node-list-row-toggle {
cursor: pointer;
Expand Down Expand Up @@ -177,7 +177,7 @@ $filter-icon-opacity-3: 1;
}
}

// --- Toggle (kind=filter) icon fills and strokes ---//
// --- Toggle (kind=filter) icon fills and strokes ---//

&.node-list-row-toggle--icon--checked {
fill: var(--color-nodelist-filter-indicator-on);
Expand All @@ -194,4 +194,4 @@ $filter-icon-opacity-3: 1;
fill: colors.$blue-300;
stroke: colors.$blue-300;
}
}
}
94 changes: 94 additions & 0 deletions src/components/ui/toggle-icon/toggle-icon.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import { shallow } from 'enzyme';
import { ToggleIcon } from './node-list-row-toggle';

describe('ToggleIcon', () => {
const baseProps = {
name: 'Test Node',
onChange: jest.fn(),
onToggleHoveredFocusMode: jest.fn(),
};

it('applies "all-unchecked" class when allUnchecked is true', () => {
const props = { ...baseProps, allUnchecked: true };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--all-unchecked')).toBe(
true
);
});

it('applies "disabled" class when disabled is true', () => {
const props = { ...baseProps, disabled: true };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--disabled')).toBe(true);
});

it('applies "checked" class when isChecked is true', () => {
const props = { ...baseProps, isChecked: true };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--checked')).toBe(true);
});

it('applies "parent" class when isParent is true', () => {
const props = { ...baseProps, isParent: true };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--parent')).toBe(true);
});

it('applies correct class for kind prop', () => {
const kinds = ['modularPipeline', 'data', 'task'];
kinds.forEach((kind) => {
const props = { ...baseProps, kind };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass(`node-list-row-toggle--kind-${kind}`)).toBe(true);
});
});

it('does not apply "all-unchecked" class when allUnchecked is false', () => {
const props = { ...baseProps, allUnchecked: false };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--all-unchecked')).toBe(
false
);
});

it('does not apply "disabled" class when disabled is false', () => {
const props = { ...baseProps, disabled: false };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--disabled')).toBe(false);
});

it('does not apply "checked" class when isChecked is false', () => {
const props = { ...baseProps, isChecked: false };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--checked')).toBe(false);
});

it('does not apply "parent" class when isParent is false', () => {
const props = { ...baseProps, isParent: false };
const wrapper = shallow(<ToggleIcon {...props} />);
expect(wrapper.hasClass('node-list-row-toggle--icon--parent')).toBe(false);
});

it('triggers onChange callback when clicked', () => {
const props = { ...baseProps };
const wrapper = shallow(<ToggleIcon {...props} />);
wrapper.simulate('click');
expect(props.onChange).toHaveBeenCalled();
});

it('does not trigger onToggleHoveredFocusMode when not provided', () => {
const props = { ...baseProps, onToggleHoveredFocusMode: undefined };
const wrapper = shallow(<ToggleIcon {...props} />);
wrapper.simulate('click');
// Since onToggleHoveredFocusMode is not provided, it should not throw an error
expect(() => wrapper.simulate('click')).not.toThrow();
});

it('triggers onToggleHoveredFocusMode when provided and clicked', () => {
const props = { ...baseProps };
const wrapper = shallow(<ToggleIcon {...props} />);
wrapper.simulate('click');
expect(props.onToggleHoveredFocusMode).toHaveBeenCalled();
});
});

0 comments on commit 65382f8

Please sign in to comment.