paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 51 Packages Projects Releases Wiki Activity

Improve Differ component & add tests

Browse Source 
Signed-off-by: Erik Engervall <erik.engervall@gmail.com>
This commit is contained in:
Erik Engervall
2021-04-18 11:54:48 +02:00
parent ee982f591e
commit fe3f6f7028
12 changed files with 180 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/github-release-manager/src/cards/createRc/CreateRc.test.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import {
mockApiClient,
mockCalverProject,
mockNextGitHubInfo,
mockReleaseCandidate,
mockReleaseCandidateCalver,
mockReleaseBranch,
mockReleaseVersionCalver,
mockSemverProject,
@@ -46,7 +46,7 @@ describe('CreateRc', () => {
const { getByTestId } = render(
<CreateRc
defaultBranch="mockDefaultBranch"
latestRelease={mockReleaseCandidate}
latestRelease={mockReleaseCandidateCalver}
releaseBranch={mockReleaseBranch}
/>,
);
plugins/github-release-manager/src/cards/createRc/CreateRc.tsx
+2 -2
View File
@@ -121,7 +121,7 @@ export const CreateRc = ({
<Typography>
<Differ
icon="branch"
prev={releaseBranch?.name}
current={releaseBranch?.name}
next={nextGitHubInfo.rcBranch}
/>
</Typography>
@@ -129,7 +129,7 @@ export const CreateRc = ({
<Typography>
<Differ
icon="tag"
prev={latestRelease?.tagName}
current={latestRelease?.tagName}
next={nextGitHubInfo.rcReleaseTag}
/>
</Typography>
plugins/github-release-manager/src/cards/patchRc/PatchBody.test.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import {
mockApiClient,
mockBumpedTag,
mockCalverProject,
mockReleaseCandidate,
mockReleaseCandidateCalver,
mockReleaseBranch,
mockReleaseVersionCalver,
mockTagParts,
@@ -48,7 +48,7 @@ describe('PatchBody', () => {
const { getByTestId } = render(
<PatchBody
bumpedTag={mockBumpedTag}
latestRelease={mockReleaseCandidate}
latestRelease={mockReleaseCandidateCalver}
releaseBranch={mockReleaseBranch}
tagParts={mockTagParts}
/>,
plugins/github-release-manager/src/cards/patchRc/PatchBody.tsx
+1 -1
View File
@@ -142,7 +142,7 @@ export const PatchBody = ({
)}
<Typography className={classes.paragraph}>
<Differ icon="tag" prev={latestRelease.tagName} next={bumpedTag} />
<Differ icon="tag" current={latestRelease.tagName} next={bumpedTag} />
</Typography>
</>
);
plugins/github-release-manager/src/cards/promoteRc/PromoteRc.test.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import React from 'react';
import { render } from '@testing-library/react';
import {
mockReleaseCandidate,
mockReleaseCandidateCalver,
mockReleaseVersionCalver,
} from '../../test-helpers/test-helpers';
import { TEST_IDS } from '../../test-helpers/test-ids';
@@ -50,7 +50,7 @@ describe('PromoteRc', () => {
it('should display PromoteRcBody', () => {
const { getByTestId } = render(
<PromoteRc latestRelease={mockReleaseCandidate} />,
<PromoteRc latestRelease={mockReleaseCandidateCalver} />,
);
expect(
plugins/github-release-manager/src/cards/promoteRc/PromoteRcBody.test.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import { render } from '@testing-library/react';
import {
mockApiClient,
mockCalverProject,
mockReleaseCandidate,
mockReleaseCandidateCalver,
} from '../../test-helpers/test-helpers';
import { TEST_IDS } from '../../test-helpers/test-ids';
@@ -36,7 +36,7 @@ import { PromoteRcBody } from './PromoteRcBody';
describe('PromoteRcBody', () => {
it('should display CTA', () => {
const { getByTestId } = render(
<PromoteRcBody rcRelease={mockReleaseCandidate} />,
<PromoteRcBody rcRelease={mockReleaseCandidateCalver} />,
);
expect(getByTestId(TEST_IDS.promoteRc.cta)).toBeInTheDocument();
plugins/github-release-manager/src/cards/promoteRc/PromoteRcBody.tsx
+5 -1
View File
@@ -63,7 +63,11 @@ export const PromoteRcBody = ({ rcRelease, successCb }: PromoteRcBodyProps) => {
</Typography>
<Typography className={classes.paragraph}>
<Differ icon="tag" prev={rcRelease.tagName} next={releaseVersion} />
<Differ
icon="tag"
current={rcRelease.tagName}
next={releaseVersion}
/>
</Typography>
</>
);
plugins/github-release-manager/src/cards/promoteRc/sideEffects/promoteRc.test.ts
+2 -2
View File
@@ -16,7 +16,7 @@
import {
mockApiClient,
mockReleaseCandidate,
mockReleaseCandidateCalver,
mockSemverProject,
} from '../../../test-helpers/test-helpers';
import { promoteRc } from './promoteRc';
@@ -27,7 +27,7 @@ describe('promoteRc', () => {
it('should work', async () => {
const result = await promoteRc({
pluginApiClient: mockApiClient,
rcRelease: mockReleaseCandidate,
rcRelease: mockReleaseCandidateCalver,
releaseVersion: 'version-1.2.3',
project: mockSemverProject,
})();
plugins/github-release-manager/src/components/Differ.test.tsx
+72
View File
@@ -0,0 +1,72 @@
/*
* Copyright 2021 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render } from '@testing-library/react';
import { Differ } from './Differ';
import { TEST_IDS } from '../test-helpers/test-ids';
import {
mockReleaseCandidateCalver,
mockReleaseVersionCalver,
mockReleaseVersionSemver,
} from '../test-helpers/test-helpers';
describe('Differ', () => {
it('should render icon and `none` for missing current & next', () => {
const { getByTestId, queryByTestId } = render(<Differ icon="branch" />);
const icon = getByTestId(TEST_IDS.components.differ.icons.branch);
const current = getByTestId(TEST_IDS.components.differ.current);
const next = queryByTestId(TEST_IDS.components.differ.next);
expect(icon).toBeInTheDocument();
expect(current.innerHTML).toMatchInlineSnapshot(`"None"`);
expect(next).not.toBeInTheDocument();
});
it('should render icon & current for missing next', () => {
const { getByTestId, queryByTestId } = render(
<Differ icon="branch" current={mockReleaseVersionSemver.tagName} />,
);
const icon = getByTestId(TEST_IDS.components.differ.icons.branch);
const current = getByTestId(TEST_IDS.components.differ.current);
const next = queryByTestId(TEST_IDS.components.differ.next);
expect(icon).toBeInTheDocument();
expect(current.innerHTML).toMatchInlineSnapshot(`"version-1.2.3"`);
expect(next).not.toBeInTheDocument();
});
it('should render icon & current & next (with seperator)', () => {
const { getByTestId, queryByTestId } = render(
<Differ
icon="branch"
current={mockReleaseCandidateCalver.tagName}
next={mockReleaseVersionCalver.tagName}
/>,
);
const icon = getByTestId(TEST_IDS.components.differ.icons.branch);
const current = getByTestId(TEST_IDS.components.differ.current);
const next = queryByTestId(TEST_IDS.components.differ.next);
expect(icon).toBeInTheDocument();
expect(current.innerHTML).toMatchInlineSnapshot(`"rc-2020.01.01_1"`);
expect(next?.innerHTML).toMatchInlineSnapshot(`"version-2020.01.01_1"`);
});
});
plugins/github-release-manager/src/components/Differ.tsx
+78 -41
View File
@@ -22,44 +22,16 @@ import DynamicFeedIcon from '@material-ui/icons/DynamicFeed';
import GitHubIcon from '@material-ui/icons/GitHub';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import { GitHubReleaseManagerError } from '../errors/GitHubReleaseManagerError';
import { TEST_IDS } from '../test-helpers/test-ids';
interface DifferProps {
icon: 'tag' | 'branch' | 'github' | 'slack' | 'versioning';
current?: string;
next?: string | ReactNode;
prev?: string;
prefix?: string;
icon?: 'tag' | 'branch' | 'github' | 'slack' | 'versioning';
}
const Icon = ({ icon }: { icon: DifferProps['icon'] }) => {
switch (icon) {
case 'tag':
return (
<LocalOfferIcon style={{ verticalAlign: 'middle' }} fontSize="small" />
);
case 'branch':
return (
<CallSplitIcon style={{ verticalAlign: 'middle' }} fontSize="small" />
);
case 'github':
return (
<GitHubIcon style={{ verticalAlign: 'middle' }} fontSize="small" />
);
case 'slack':
return <ChatIcon style={{ verticalAlign: 'middle' }} fontSize="small" />;
case 'versioning':
return (
<DynamicFeedIcon style={{ verticalAlign: 'middle' }} fontSize="small" />
);
default:
return null;
}
};
export const Differ = ({ prev, next, prefix, icon }: DifferProps) => {
export const Differ = ({ current, next, icon }: DifferProps) => {
return (
<>
{icon && (
@@ -67,14 +39,79 @@ export const Differ = ({ prev, next, prefix, icon }: DifferProps) => {
<Icon icon={icon} />{' '}
</span>
)}
{prefix && <span>{prefix}: </span>}
{prev && (
<>
<span style={{ color: grey[700] }}>{prev}</span>
<span>{' → '}</span>
</>
<span
data-testid={TEST_IDS.components.differ.current}
style={{ color: grey[700] }}
>
{current ?? 'None'}
</span>
{next && <span>{' → '}</span>}
{next && (
<span
data-testid={TEST_IDS.components.differ.next}
style={{ fontWeight: 'bold' }}
>
{next}
</span>
)}
<b>{next ?? 'None'}</b>
</>
);
};
interface IconProps {
icon: DifferProps['icon'];
}
function Icon({ icon }: IconProps) {
switch (icon) {
case 'tag':
return (
<LocalOfferIcon
data-testid={TEST_IDS.components.differ.icons.tag}
style={{ verticalAlign: 'middle' }}
fontSize="small"
/>
);
case 'branch':
return (
<CallSplitIcon
data-testid={TEST_IDS.components.differ.icons.branch}
style={{ verticalAlign: 'middle' }}
fontSize="small"
/>
);
case 'github':
return (
<GitHubIcon
data-testid={TEST_IDS.components.differ.icons.github}
style={{ verticalAlign: 'middle' }}
fontSize="small"
/>
);
case 'slack':
return (
<ChatIcon
data-testid={TEST_IDS.components.differ.icons.slack}
style={{ verticalAlign: 'middle' }}
fontSize="small"
/>
);
case 'versioning':
return (
<DynamicFeedIcon
data-testid={TEST_IDS.components.differ.icons.versioning}
style={{ verticalAlign: 'middle' }}
fontSize="small"
/>
);
default:
throw new GitHubReleaseManagerError('Invalid Differ icon');
}
}
plugins/github-release-manager/src/test-helpers/test-helpers.ts
+1 -1
View File
@@ -72,7 +72,7 @@ const createMockRelease = ({
targetCommitish: 'rc/1.2.3',
...rest,
});
export const mockReleaseCandidate = createMockRelease({
export const mockReleaseCandidateCalver = createMockRelease({
prerelease: true,
tagName: 'rc-2020.01.01_1',
targetCommitish: 'rc/1.2.3',
plugins/github-release-manager/src/test-helpers/test-ids.ts
+11
View File
@@ -51,5 +51,16 @@ export const TEST_IDS = {
'grm--response-step-list-item--item-icon--link',
responseStepListItemIconDefault:
'grm--response-step-list-item--item-icon--default',
differ: {
current: 'grm--differ-current',
next: 'grm--differ-next',
icons: {
tag: 'grm--differ--icons--tag',
branch: 'grm--differ--icons--branch',
github: 'grm--differ--icons--github',
slack: 'grm--differ--icons--slack',
versioning: 'grm--differ--icons--versioning',
},
},
},
};