Skip to content

Commit

Permalink
#355 Fix OSI link of MTR style terminal stations
Browse files Browse the repository at this point in the history
  • Loading branch information
@wongchito
wongchito committed May 14, 2022
1 parent e37653f commit b3b3430
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 39 deletions.
179 changes: 158 additions & 21 deletions src/svgs/mtr/station-icon.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,177 @@ import { screen } from '@testing-library/react';
import StationIcon from './station-icon';
import { render } from '../../test-utils';

const setup = (within: number, outStation: number, isTerminal: boolean = false) =>
render(
<svg>
<StationIcon
withinTransfer={within}
outStationTransfer={outStation}
isTerminal={isTerminal}
isPassed={false}
/>
</svg>
);

describe('MTR StationIcon', () => {
describe('MTR StationIcon - OSI link', () => {
const osiLinkSelector = 'path[stroke-width="2.69"]';

it('Can render OSI link for 0-1 station as expected', () => {
setup(0, 1, false);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('V26');
});

it('Can render OSI link for 0-2 station as expected', () => {
setup(0, 2, false);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('V26');
});

it('Can render OSI link for 0-1 terminal station as expected', () => {
setup(0, 1, true);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('V26');
});

it('Can render OSI link for 0-2 terminal station as expected', () => {
setup(0, 2, true);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('V26');
});

it('Can render OSI link for 1-1 terminal station as expected', () => {
setup(1, 1, true);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('H41');
});

it('Can render OSI link for 1-2 terminal station as expected', () => {
setup(1, 2, true);
const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.querySelector(osiLinkSelector)?.getAttribute('d')).toContain('H41');
});
});

it('Can draw circle for station with 1 within station interchange as expected', () => {
render(
<svg>
<StationIcon withinTransfer={1} outStationTransfer={0} isPassed={false} />
</svg>
);
setup(1, 0);

const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.children).toHaveLength(1);
expect(screen.getByTestId('station-icon-wrapper').querySelector('circle')).toBeInTheDocument();
expect(wrapper.querySelectorAll('path')).toHaveLength(1);
});

it('Can draw pill for station with 3 within station interchange as expected', () => {
render(
<svg>
<StationIcon withinTransfer={3} outStationTransfer={0} isPassed={false} />
</svg>
);
setup(3, 0);

const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.children).toHaveLength(1);
expect(screen.getByTestId('station-icon-wrapper').querySelector('path')).toBeInTheDocument();
expect(wrapper.querySelectorAll('path')).toHaveLength(1);
});

it('Can draw circle for station with 1 out of station interchange as expected', () => {
render(
<svg>
<StationIcon withinTransfer={0} outStationTransfer={1} isPassed={false} />
</svg>
);
setup(0, 1);

const wrapper = screen.getByTestId('station-icon-wrapper');
expect(wrapper.children).toHaveLength(3);
expect(screen.getByTestId('station-icon-wrapper').querySelectorAll('circle')).toHaveLength(2);
expect(wrapper.querySelectorAll('path')).toHaveLength(3);
});

describe('MTR StationIcon - OSI Icon', () => {
const osiIconSelector = 'path:last-of-type';

it('Can render OSI icon for 0-1 station as expected', () => {
setup(0, 1, false);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 0-2 station as expected', () => {
setup(0, 2, false);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 0-1 terminal station as expected', () => {
setup(0, 1, true);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 0-2 terminal station as expected', () => {
setup(0, 2, true);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 1-1 station as expected', () => {
setup(1, 1, false);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 1-2 station as expected', () => {
setup(1, 2, false);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('0');
expect(y).toBe('26');
expect(scaleY).toBe('1');
});

it('Can render OSI icon for 1-1 terminal station as expected', () => {
setup(1, 1, true);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('41');
expect(y).toBe('0');
expect(scaleY).toBe('-1');
});

it('Can render OSI icon for 1-2 terminal station as expected', () => {
setup(1, 2, true);
const [x, y, , scaleY] = screen
.getByTestId('station-icon-wrapper')
.querySelector(osiIconSelector)
?.getAttribute('transform')
?.match(/-?\d+/g)!;
expect(x).toBe('41');
expect(y).toBe('0');
expect(scaleY).toBe('-1');
});
});
});
39 changes: 21 additions & 18 deletions src/svgs/mtr/station-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,40 @@ interface StationIconProps {
export default function StationIcon(props: StationIconProps) {
const { withinTransfer, outStationTransfer, isTerminal, isPassed, isPaidArea } = props;

const transforms = {
icon: {
v: withinTransfer <= 1 ? 0 : 18 * withinTransfer,
},
osiIcon: {
v: 18 * (outStationTransfer - 1),
x: isTerminal && withinTransfer ? 41 : 0,
y: isTerminal && withinTransfer ? 0 : 26,
scaleY: isTerminal && withinTransfer ? -1 : 1,
},
};

return (
<g stroke={isPassed ? 'var(--rmg-grey)' : 'var(--rmg-black)'} data-testid="station-icon-wrapper">
{outStationTransfer && (
<path
d={isTerminal ? 'M0,0H41' : 'M0,0V26'}
d={isTerminal && withinTransfer ? 'M0,0H41' : 'M0,0V26'}
strokeWidth={2.69}
strokeDasharray={isPaidArea ? 0 : 2.5}
/>
)}

{withinTransfer <= 1 ? (
<circle r={8} className="rmg-stn__mtr" />
) : (
<path
d={`M-8,0 v${transforms.icon.v} a8,8 0 0,0 16,0 v-${transforms.icon.v} a8,8 0 0,0 -16,0Z`}
className="rmg-stn__mtr"
/>

{outStationTransfer && (
<path
d={`M-8,0 v${18 * withinTransfer} a8,8 0 0,0 16,0 v-${18 * withinTransfer} a8,8 0 0,0 -16,0Z`}
d={`M-8,0 v${transforms.osiIcon.v} a8,8 0 0,0 16,0 v-${transforms.osiIcon.v} a8,8 0 0,0 -16,0Z`}
className="rmg-stn__mtr"
transform={`translate(${transforms.osiIcon.x},${transforms.osiIcon.y})scale(1,${transforms.osiIcon.scaleY})`}
/>
)}

{outStationTransfer &&
(outStationTransfer === 1 ? (
<circle r={8} cy={26} className="rmg-stn__mtr" />
) : (
<path
d={`M-8,0 v${18 * (outStationTransfer - 1)} a8,8 0 0,0 16,0 v-${
18 * (outStationTransfer - 1)
} a8,8 0 0,0 -16,0Z`}
className="rmg-stn__mtr"
transform={`translate(${isTerminal ? 41 : 0},${isTerminal ? -18 : 26})`}
/>
))}
</g>
);
}

0 comments on commit b3b3430

Please sign in to comment.