Fix unit test

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Layout of proxy settings ([#1502](https://github.com/scm-manager/scm-manager/pull/1502))
 - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
 - Bump google guava version to 30.1-jre
+- Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
 
 ### Fixed
 - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))

Jenkinsfile

@@ -62,7 +62,8 @@ pipeline {
     // in parallel with check?
     stage('Integration Tests') {
       steps {
-        gradle 'integrationTest'
+        // TODO remove obligatory rerun flag when flappy tests have been fixed
+        gradle '-PrerunIntegrationTests integrationTest'
         junit allowEmptyResults: true, testResults: 'scm-it/build/test-results/javaIntegrationTests/*.xml,scm-ui/build/reports/e2e/*.xml'
         archiveArtifacts allowEmptyArchive: true, artifacts: 'scm-ui/e2e-tests/cypress/videos/*.mp4'
         archiveArtifacts allowEmptyArchive: true, artifacts: 'scm-ui/e2e-tests/cypress/screenshots/**/*.png'

scm-it/build.gradle

@@ -78,6 +78,7 @@ task javaIntegrationTests(type: Test) {
   include '**/*ITCase.class'
   exclude '**/*Test.class'
   ignoreFailures = project.isCI
+  outputs.upToDateWhen { !project.hasProperty('rerunIntegrationTests') }
   finalizedBy = ['stopScmServer']
 
   dependsOn 'test', 'startScmServer'

scm-plugins/scm-git-plugin/src/test/java/sonia/scm/web/lfs/LfsBlobStoreFactoryTest.java

@@ -62,7 +62,7 @@ public class LfsBlobStoreFactoryTest {
     // just make sure the right parameter is passed, as properly validating the return value is nearly impossible with 
     // the return value (and should not be part of this test)
     verify(blobStoreFactory).getStore(argThat(blobStoreParameters -> {
-      assertThat(blobStoreParameters.getName()).isEqualTo("the-id-git-lfs");
+      assertThat(blobStoreParameters.getName()).isEqualTo("git-lfs");
       assertThat(blobStoreParameters.getRepositoryId()).isEqualTo("the-id");
       return true;
     }));
@@ -70,5 +70,4 @@ public class LfsBlobStoreFactoryTest {
     // make sure there have been no further usages of the factory
     verify(blobStoreFactory, times(1)).getStore(any());
   }
-  
 }

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -2191,6 +2191,7 @@ exports[`Storyshots Buttons|SubmitButton Default 1`] = `
 >
   <button
     className="button is-primary"
+    data-testid="submit-button"
     onClick={[Function]}
     type="submit"
   >
@@ -47092,6 +47093,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         >
           <i
             className="fas fa-user-circle fa-fw"
+            data-testid="trillian-mcmillian"
           />
            
           Trillian McMillian
@@ -47102,6 +47104,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           <li>
             <a
               className=""
+              data-testid="footer-user-profile"
               href="/me"
               onClick={[Function]}
             >
@@ -47118,6 +47121,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         >
           <i
             className="fas fa-info-circle fa-fw"
+            data-testid="footer.information.title"
           />
            
           footer.information.title
@@ -47144,6 +47148,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         >
           <i
             className="fas fa-life-ring fa-fw"
+            data-testid="footer.support.title"
           />
            
           footer.support.title
@@ -47192,7 +47197,9 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         <div
           className="FooterSection__Title-lx0ikb-0 jtNydW"
         >
-          <div>
+          <div
+            data-testid="trillian-mcmillian"
+          >
             <span
               className="Footer__AvatarContainer-k70cxq-1 iwlTWG image is-rounded"
             >
@@ -47211,6 +47218,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           <li>
             <a
               className=""
+              data-testid="footer-user-profile"
               href="/me"
               onClick={[Function]}
             >
@@ -47236,6 +47244,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         >
           <i
             className="fas fa-info-circle fa-fw"
+            data-testid="footer.information.title"
           />
            
           footer.information.title
@@ -47280,6 +47289,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         >
           <i
             className="fas fa-life-ring fa-fw"
+            data-testid="footer.support.title"
           />
            
           footer.support.title
@@ -47337,7 +47347,9 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         <div
           className="FooterSection__Title-lx0ikb-0 jtNydW"
         >
-          <div>
+          <div
+            data-testid="trillian-mcmillian"
+          >
             <span
               className="Footer__AvatarContainer-k70cxq-1 iwlTWG image is-rounded"
             >
@@ -47356,6 +47368,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           <li>
             <a
               className=""
+              data-testid="footer-user-profile"
               href="/me"
               onClick={[Function]}
             >
@@ -47372,6 +47385,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         >
           <i
             className="fas fa-info-circle fa-fw"
+            data-testid="footer.information.title"
           />
            
           footer.information.title
@@ -47398,6 +47412,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         >
           <i
             className="fas fa-life-ring fa-fw"
+            data-testid="footer.support.title"
           />
            
           footer.support.title
@@ -47448,6 +47463,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         >
           <i
             className="fas fa-user-circle fa-fw"
+            data-testid="trillian-mcmillian"
           />
            
           Trillian McMillian
@@ -47458,6 +47474,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           <li>
             <a
               className=""
+              data-testid="footer-user-profile"
               href="/me"
               onClick={[Function]}
             >
@@ -47483,6 +47500,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         >
           <i
             className="fas fa-info-circle fa-fw"
+            data-testid="footer.information.title"
           />
            
           footer.information.title
@@ -47527,6 +47545,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         >
           <i
             className="fas fa-life-ring fa-fw"
+            data-testid="footer.support.title"
           />
            
           footer.support.title
@@ -63203,7 +63222,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
 
 exports[`Storyshots Table|Table Default 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>
@@ -63292,9 +63311,60 @@ exports[`Storyshots Table|Table Empty 1`] = `
 </div>
 `;
 
+exports[`Storyshots Table|Table Table with Word-Break 1`] = `
+<table
+  className="table content is-hoverable Tablestories__StyledTable-vgb14n-0 hmfYbF"
+>
+  <thead>
+    <tr>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Id
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Name
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        42
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp
+      </td>
+    </tr>
+    <tr>
+      <td>
+        17
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`Storyshots Table|Table TextColumn 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>

scm-ui/ui-components/src/devBuild.test.ts

@@ -53,17 +53,6 @@ describe("devbuild tests", () => {
     });
   });
 
-  describe("createAttributesForTesting in non development mode", () => {
-    beforeAll(() => {
-      setStage("production");
-    });
-
-    it("should return undefined for non development", () => {
-      const attributes = createAttributesForTesting("123");
-      expect(attributes).toBeUndefined();
-    });
-  });
-
   describe("createAttributesForTesting in development mode", () => {
     beforeAll(() => {
       setStage("development");

scm-ui/ui-components/src/table/Table.stories.tsx

@@ -26,6 +26,17 @@ import { storiesOf } from "@storybook/react";
 import Table from "./Table";
 import Column from "./Column";
 import TextColumn from "./TextColumn";
+import styled from "styled-components";
+
+const StyledTable = styled(Table)`
+  width: 400px;
+  border: 1px dashed black;
+  padding: 4px;
+  margin: 4px;
+  td {
+    word-break: break-word;
+  }
+`;
 
 storiesOf("Table|Table", module)
   .add("Default", () => (
@@ -73,4 +84,22 @@ storiesOf("Table|Table", module)
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="name" />
     </Table>
+  ))
+  .add("Table with Word-Break", () => (
+    <StyledTable
+      data={[
+        {
+          id: "42",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp"
+        },
+        {
+          id: "17",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp"
+        }
+      ]}
+      emptyMessage="No data found."
+    >
+      <TextColumn header="Id" dataKey="id" />
+      <TextColumn header="Name" dataKey="name" />
+    </StyledTable>
   ));

scm-ui/ui-components/src/table/Table.tsx

@@ -22,23 +22,20 @@
  * SOFTWARE.
  */
 import React, { FC, ReactElement, useEffect, useState } from "react";
-import styled from "styled-components";
 import { Comparator } from "./types";
 import SortIcon from "./SortIcon";
 import Notification from "../Notification";
-
+import classNames from "classnames";
-const StyledTable = styled.table.attrs(() => ({
-  className: "table content is-hoverable"
-}))``;
 
 type Props = {
   data: any[];
   sortable?: boolean;
   emptyMessage?: string;
   children: Array<ReactElement>;
+  className?: string;
 };
 
-const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
+const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
     setTableData(data);
@@ -107,7 +104,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
   }
 
   return (
-    <StyledTable>
+    <table className={classNames("table content is-hoverable", className)}>
       <thead>
         <tr>
           {React.Children.map(children, (child, index) => (
@@ -125,7 +122,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
         </tr>
       </thead>
       <tbody>{tableData.map(mapDataToColumns)}</tbody>
-    </StyledTable>
+    </table>
   );
 };