From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Mon, 23 Dec 2019 12:04:09 +0000 (+0100)
Subject: SONAR-12215 Make projects list accessible
X-Git-Tag: 8.2.0.32929~243
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a2c9177fd9e0f72b38cacdba32ab5cf1a9c22fcb;p=sonarqube.git

SONAR-12215 Make projects list accessible
---

diff --git a/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/AutoSizer.ts b/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/AutoSizer.ts
new file mode 100644
index 00000000000..a494f2f12e3
--- /dev/null
+++ b/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/AutoSizer.ts
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+type AutoSizerProps = {
+  children: (props: AutoSizerChildProps) => React.ReactNode;
+  disableHeight?: boolean;
+  disableWidth?: boolean;
+};
+type AutoSizerChildProps = { height?: number; width?: number };
+
+function AutoSizer({ children, disableHeight, disableWidth }: AutoSizerProps) {
+  const props: AutoSizerChildProps = {};
+  if (!disableHeight) {
+    props.height = 200;
+  }
+  if (!disableWidth) {
+    props.width = 200;
+  }
+  return children(props);
+}
+
+module.exports = { AutoSizer };
diff --git a/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/WindowScroller.ts b/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/WindowScroller.ts
new file mode 100644
index 00000000000..641a7d883d9
--- /dev/null
+++ b/server/sonar-web/__mocks__/react-virtualized/dist/commonjs/WindowScroller.ts
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+type WindowScrollerProps = {
+  children: (params: WindowScrollerChildProps) => React.ReactNode;
+};
+type WindowScrollerChildProps = {
+  height: number;
+  isScrolling: boolean;
+  scrollTop: number;
+  onChildScroll: (params: { scrollTop: number }) => void;
+};
+
+function WindowScroller({ children }: WindowScrollerProps) {
+  const props: WindowScrollerChildProps = {
+    height: 200,
+    isScrolling: false,
+    scrollTop: 0,
+    onChildScroll: () => {}
+  };
+  return children(props);
+}
+
+module.exports = { WindowScroller };
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphHistory-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphHistory-test.tsx.snap
index 0c35555fe88..afee3742c9e 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphHistory-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphHistory-test.tsx.snap
@@ -32,12 +32,7 @@ exports[`should correctly render a graph 1`] = `
   <div
     className="project-activity-graph"
   >
-    <AutoSizer
-      disableHeight={false}
-      disableWidth={false}
-      onResize={[Function]}
-      style={Object {}}
-    >
+    <AutoSizer>
       <Component />
     </AutoSizer>
   </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
index a7967ec2bcf..d2347e98c46 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { List, ListRowProps } from 'react-virtualized/dist/commonjs/List';
 import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { OnboardingContext } from '../../../app/components/OnboardingContext';
 import EmptySearch from '../../../components/common/EmptySearch';
 import { Query } from '../query';
@@ -74,16 +75,18 @@ export default class ProjectsList extends React.PureComponent<Props> {
     const project = this.props.projects[index];
     const height = this.getCardHeight();
     return (
-      <div key={key} style={{ ...style, height }}>
-        <ProjectCard
-          currentUser={this.props.currentUser}
-          handleFavorite={this.props.handleFavorite}
-          height={height}
-          key={project.key}
-          organization={this.props.organization}
-          project={project}
-          type={this.props.cardType}
-        />
+      <div key={key} role="row" style={{ ...style, height }}>
+        <div role="gridcell">
+          <ProjectCard
+            currentUser={this.props.currentUser}
+            handleFavorite={this.props.handleFavorite}
+            height={height}
+            key={project.key}
+            organization={this.props.organization}
+            project={project}
+            type={this.props.cardType}
+          />
+        </div>
       </div>
     );
   };
@@ -97,6 +100,7 @@ export default class ProjectsList extends React.PureComponent<Props> {
             {({ width }) => (
               <div>
                 <List
+                  aria-label={translate('project_plural')}
                   autoHeight={true}
                   height={height}
                   isScrolling={isScrolling}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
index 160b343c4bf..2a47a54ce70 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
@@ -19,10 +19,27 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ListRowProps } from 'react-virtualized';
+import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
 import ProjectsList from '../ProjectsList';
 
-it('renders', () => {
-  expect(shallowRender()).toMatchSnapshot();
+jest.mock('react-virtualized/dist/commonjs/AutoSizer');
+jest.mock('react-virtualized/dist/commonjs/WindowScroller');
+
+it('renders correctly', () => {
+  const wrapper = shallowRender();
+  expect(
+    wrapper
+      .find(WindowScroller)
+      .dive()
+      .find(AutoSizer)
+      .dive()
+  ).toMatchSnapshot('list element');
+
+  expect(
+    wrapper.instance().renderRow({ index: 0, key: 'foo-key', style: {} } as ListRowProps)
+  ).toMatchSnapshot('row element');
 });
 
 it('renders different types of "no projects"', () => {
@@ -32,7 +49,7 @@ it('renders different types of "no projects"', () => {
 });
 
 function shallowRender(props?: any) {
-  return shallow(
+  return shallow<ProjectsList>(
     <ProjectsList
       cardType="overall"
       currentUser={{ isLoggedIn: true }}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
index 14bf2862347..beb61d2d3fb 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
@@ -1,19 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders 1`] = `
+exports[`renders correctly: list element 1`] = `
+<div>
+  <List
+    aria-label="project_plural"
+    autoHeight={true}
+    estimatedRowSize={30}
+    height={200}
+    isScrolling={false}
+    noRowsRenderer={[Function]}
+    onRowsRendered={[Function]}
+    onScroll={[Function]}
+    overscanIndicesGetter={[Function]}
+    overscanRowCount={2}
+    rowCount={2}
+    rowHeight={163}
+    rowRenderer={[Function]}
+    scrollToAlignment="auto"
+    scrollToIndex={-1}
+    scrollTop={0}
+    style={
+      Object {
+        "outline": "none",
+      }
+    }
+    width={200}
+  />
+</div>
+`;
+
+exports[`renders correctly: row element 1`] = `
 <div
-  className="projects-list"
+  role="row"
+  style={
+    Object {
+      "height": 143,
+    }
+  }
 >
-  <WindowScroller
-    onResize={[Function]}
-    onScroll={[Function]}
-    scrollElement={[Window]}
-    scrollingResetTimeInterval={150}
-    serverHeight={0}
-    serverWidth={0}
+  <div
+    role="gridcell"
   >
-    <Component />
-  </WindowScroller>
+    <ProjectCard
+      currentUser={
+        Object {
+          "isLoggedIn": true,
+        }
+      }
+      height={143}
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+      type="overall"
+    />
+  </div>
 </div>
 `;