fix: render an empty div instead of no apply button to preserve column

bcgov · Sep 1, 2020 · 45defac · 45defac
1 parent b1791dc
commit 45defac
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/app/containers/Applications/ApplyButtonContainer.tsx b/app/containers/Applications/ApplyButtonContainer.tsx
@@ -53,7 +53,7 @@ export const ApplyButton: React.FunctionComponent<Props> = ({
   ]);
 
   if (!canOpenApplication) {
-    return null;
+    return <div style={{minWidth: '9.7em'}} />;
   }
 
   if (!applicationId) {

diff --git a/app/tests/unit/containers/Applications/ApplyButtonContainer.test.tsx b/app/tests/unit/containers/Applications/ApplyButtonContainer.test.tsx
@@ -63,7 +63,7 @@ describe('The apply button', () => {
     );
   });
 
-  it('should not render anything if no applicationByApplicationId exists and the application window is closed', () => {
+  it('should render an empty div if no applicationByApplicationId exists and the application window is closed', () => {
     const r = shallow(
       <ApplyButton
         relay={null}
@@ -84,10 +84,11 @@ describe('The apply button', () => {
       />
     );
 
-    expect(r).toEqual({});
+    expect(r.at(0).type()).toBe('div');
+    expect(r.at(0).children().length).toBe(0);
   });
 
-  it('should not render anything if no applicationByApplicationId exists and query.openedReportingYear.reportingYear !== reportingYear', () => {
+  it('should render an empty div if no applicationByApplicationId exists and query.openedReportingYear.reportingYear !== reportingYear', () => {
     const r = shallow(
       <ApplyButton
         relay={null}
@@ -149,7 +150,7 @@ describe('The apply button', () => {
     expect(r.find('Button').text()).toBe('Resume CIIP application');
   });
 
-  it('should not render anything if an application revision exists with draft status, its versionNumber is 1, and the application window is closed', () => {
+  it('should render an empty div if an application revision exists with draft status, its versionNumber is 1, and the application window is closed', () => {
     const r = shallow(
       <ApplyButton
         relay={null}
@@ -178,10 +179,11 @@ describe('The apply button', () => {
       />
     );
 
-    expect(r).toEqual({});
+    expect(r.at(0).type()).toBe('div');
+    expect(r.at(0).children().length).toBe(0);
   });
 
-  it('should not render anything if an application revision exists with draft status, its versionNumber is > 1, and the application window is closed', () => {
+  it('should render a resume button if an application revision exists with draft status, its versionNumber is > 1, and the application window is closed', () => {
     const r = shallow(
       <ApplyButton
         relay={null}
@@ -209,8 +211,8 @@ describe('The apply button', () => {
         reportingYear={2018}
       />
     );
-
-    expect(r).toEqual({});
+    expect(r.exists('Button')).toBe(true);
+    expect(r.find('Button').text()).toBe('Resume CIIP application');
   });
 
   it('should render a View Application button if an application revision exists with submitted status', () => {