project?: {
analysisDate?: string,
key: string,
+ leakPeriodDate?: string,
name: string,
tags: Array<string>,
isFavorite?: boolean,
- organization?: string
+ organization?: string,
+ visibility?: boolean
},
type?: string
};
}
const isProjectAnalyzed = project.analysisDate != null;
+ const isPrivate = project.visibility === 'private';
+ const hasLeakPeriodStart = project.leakPeriodDate != null;
+ const hasTags = project.tags.length > 0;
const isLeakView = type === 'leak';
let areProjectMeasuresLoaded;
return (
<div data-key={project.key} className={className}>
-
- <div className="boxed-group-actions text-right">
- {project.visibility === 'private' &&
- <PrivateBadge className="spacer-left" tooltipPlacement="left" />}
- {project.tags.length > 0 && <TagsList tags={project.tags} customClass="spacer-left" />}
- {isLeakView &&
- isProjectAnalyzed &&
- <div className="little-spacer-top spacer-left note">
- {translateWithParameters(
- 'overview.last_analysis_on_x',
- moment(project.analysisDate).format('LLL')
- )}
- </div>}
- </div>
-
- <div className="boxed-group-header">
+ <div className="boxed-group-header clearfix">
{project.isFavorite != null &&
<FavoriteContainer className="spacer-right" componentKey={project.key} />}
<h2 className="project-card-name">
<Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
</h2>
{displayQualityGate && <ProjectCardQualityGate status={measures['alert_status']} />}
+ <div className="pull-right text-right">
+ {isPrivate && <PrivateBadge className="spacer-left" tooltipPlacement="left" />}
+ {hasTags && <TagsList tags={project.tags} customClass="spacer-left" />}
+ </div>
+ {isLeakView &&
+ isProjectAnalyzed &&
+ <div
+ className={classNames('project-card-dates note text-right pull-right', {
+ 'width-100': isPrivate || hasTags
+ })}>
+ {hasLeakPeriodStart &&
+ <span>
+ {translateWithParameters(
+ 'projects.leak_period_x',
+ moment(project.leakPeriodDate).fromNow()
+ )}
+ </span>}
+ {isProjectAnalyzed &&
+ <span className="big-spacer-left">
+ {translateWithParameters(
+ 'projects.last_analysis_on_x',
+ moment(project.analysisDate).format('LLL')
+ )}
+ </span>}
+ </div>}
</div>
{isProjectAnalyzed
import { shallow } from 'enzyme';
import ProjectCard from '../ProjectCard';
-const PROJECT = { analysisDate: '2017-01-01', key: 'foo', name: 'Foo', tags: [] };
-const MEASURES = {};
-
-it('should not display analysis date', () => {
- expect(
- shallow(<ProjectCard measures={MEASURES} project={PROJECT} />).find(
- '.project-card-analysis-date'
- )
- ).toMatchSnapshot();
-});
+const PROJECT = {
+ analysisDate: '2017-01-01',
+ leakPeriodDate: '2016-12-01',
+ key: 'foo',
+ name: 'Foo',
+ tags: []
+};
+const MEASURES = {
+ alert_status: 'OK',
+ reliability_rating: '1.0',
+ sqale_rating: '1.0',
+ new_bugs: 12
+};
-it('should NOT display analysis date', () => {
- const project = { ...PROJECT, analysisDate: undefined };
- expect(
- shallow(<ProjectCard measures={MEASURES} project={project} />)
- .find('.project-card-analysis-date')
- .exists()
- ).toBeFalsy();
-});
+jest.mock('moment', () => () => ({
+ format: () => 'March 1, 2017 9:36 AM',
+ fromNow: () => 'a month ago'
+}));
+
+describe('overall status project card', () => {
+ it('should never display analysis date', () => {
+ expect(
+ shallow(<ProjectCard measures={{}} project={PROJECT} />).find('.project-card-dates').exists()
+ ).toBeFalsy();
+ });
+
+ it('should display loading', () => {
+ const measures = { ...MEASURES, sqale_rating: undefined };
+ expect(
+ shallow(<ProjectCard project={PROJECT} />)
+ .find('.boxed-group')
+ .hasClass('boxed-group-loading')
+ ).toBeTruthy();
+ expect(
+ shallow(<ProjectCard measures={measures} project={PROJECT} />)
+ .find('.boxed-group')
+ .hasClass('boxed-group-loading')
+ ).toBeTruthy();
+ });
+
+ it('should not display the quality gate', () => {
+ const project = { ...PROJECT, analysisDate: undefined };
+ expect(
+ shallow(<ProjectCard measures={MEASURES} project={project} />)
+ .find('ProjectCardQualityGate')
+ .exists()
+ ).toBeFalsy();
+ });
+
+ it('should display tags', () => {
+ const project = { ...PROJECT, tags: ['foo', 'bar'] };
+ expect(shallow(<ProjectCard project={project} />).find('TagsList').exists()).toBeTruthy();
+ });
-it('should display loading', () => {
- expect(shallow(<ProjectCard project={PROJECT} />)).toMatchSnapshot();
+ it('should private badge', () => {
+ const project = { ...PROJECT, visibility: 'private' };
+ expect(
+ shallow(<ProjectCard type="overall" project={project} />).find('PrivateBadge').exists()
+ ).toBeTruthy();
+ });
+
+ it('should display the overall measures and quality gate', () => {
+ expect(shallow(<ProjectCard measures={MEASURES} project={PROJECT} />)).toMatchSnapshot();
+ });
});
-it('should display tags', () => {
- const project = { ...PROJECT, tags: ['foo', 'bar'] };
- expect(shallow(<ProjectCard project={project} />)).toMatchSnapshot();
+describe('leak project card', () => {
+ it('should display analysis date and leak start date', () => {
+ const project = { ...PROJECT, leakPeriodDate: undefined, visibility: 'private' };
+ const card = shallow(<ProjectCard type="leak" measures={MEASURES} project={PROJECT} />);
+ const card2 = shallow(<ProjectCard type="leak" measures={MEASURES} project={project} />);
+ expect(card.find('.project-card-dates').exists()).toBeTruthy();
+ expect(card.find('.project-card-dates').find('span').getNodes()).toHaveLength(2);
+ expect(card.find('.project-card-dates').hasClass('width-100')).toBeFalsy();
+ expect(card2.find('.project-card-dates').find('span').getNodes()).toHaveLength(1);
+ expect(card2.find('.project-card-dates').hasClass('width-100')).toBeTruthy();
+ });
+
+ it('should not display analysis date or leak start date', () => {
+ const project = { ...PROJECT, analysisDate: undefined };
+ const card = shallow(<ProjectCard type="leak" measures={MEASURES} project={project} />);
+ expect(card.find('.project-card-dates').exists()).toBeFalsy();
+ });
+
+ it('should display loading', () => {
+ const measures = { ...MEASURES, new_bugs: undefined };
+ expect(
+ shallow(<ProjectCard type="leak" measures={measures} project={PROJECT} />)
+ .find('.boxed-group')
+ .hasClass('boxed-group-loading')
+ ).toBeTruthy();
+ });
+
+ it('should display tags', () => {
+ const project = { ...PROJECT, tags: ['foo', 'bar'] };
+ expect(
+ shallow(<ProjectCard type="leak" project={project} />).find('TagsList').exists()
+ ).toBeTruthy();
+ });
+
+ it('should private badge', () => {
+ const project = { ...PROJECT, visibility: 'private' };
+ expect(
+ shallow(<ProjectCard type="leak" project={project} />).find('PrivateBadge').exists()
+ ).toBeTruthy();
+ });
+
+ it('should display the leak measures and quality gate', () => {
+ expect(
+ shallow(<ProjectCard type="leak" measures={MEASURES} project={PROJECT} />)
+ ).toMatchSnapshot();
+ });
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should display loading 1`] = `
+exports[`leak project card should display the leak measures and quality gate 1`] = `
<div
- className="boxed-group project-card boxed-group-loading"
+ className="boxed-group project-card"
data-key="foo"
>
<div
- className="boxed-group-actions text-right"
- />
- <div
- className="boxed-group-header"
+ className="boxed-group-header clearfix"
>
<h2
className="project-card-name"
Foo
</Link>
</h2>
+ <ProjectCardQualityGate
+ status="OK"
+ />
+ <div
+ className="pull-right text-right"
+ />
+ <div
+ className="project-card-dates note text-right pull-right"
+ >
+ <span>
+ projects.leak_period_x.a month ago
+ </span>
+ <span
+ className="big-spacer-left"
+ >
+ projects.last_analysis_on_x.March 1, 2017 9:36 AM
+ </span>
+ </div>
</div>
<div
className="boxed-group-inner"
>
- <ProjectCardMeasures />
+ <ProjectCardLeakMeasures
+ measures={
+ Object {
+ "alert_status": "OK",
+ "new_bugs": 12,
+ "reliability_rating": "1.0",
+ "sqale_rating": "1.0",
+ }
+ }
+ />
</div>
</div>
`;
-exports[`should display tags 1`] = `
+exports[`overall status project card should display the overall measures and quality gate 1`] = `
<div
- className="boxed-group project-card boxed-group-loading"
+ className="boxed-group project-card"
data-key="foo"
>
<div
- className="boxed-group-actions text-right"
- >
- <TagsList
- allowUpdate={false}
- customClass="spacer-left"
- tags={
- Array [
- "foo",
- "bar",
- ]
- }
- />
- </div>
- <div
- className="boxed-group-header"
+ className="boxed-group-header clearfix"
>
<h2
className="project-card-name"
Foo
</Link>
</h2>
+ <ProjectCardQualityGate
+ status="OK"
+ />
+ <div
+ className="pull-right text-right"
+ />
</div>
<div
className="boxed-group-inner"
>
- <ProjectCardMeasures />
+ <ProjectCardOverallMeasures
+ measures={
+ Object {
+ "alert_status": "OK",
+ "new_bugs": 12,
+ "reliability_rating": "1.0",
+ "sqale_rating": "1.0",
+ }
+ }
+ />
</div>
</div>
`;
-
-exports[`should not display analysis date 1`] = `undefined`;
projects / sonarqube.git / commitdiff