Add test for displaying the upcoming development

Not sure how I missed this one, but it was caught in a review.

Also correct description of one test.

spec/frontend/environments/new_environment_item_spec.js

@@ -294,7 +294,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
       const deployment = findDeployment();
       expect(deployment.props('deployment')).toEqual(resolvedEnvironment.lastDeployment);
     });
-    it('should not show the last deployment to the deployment component when it is missing', () => {
+    it('should not show the last deployment when it is missing', () => {
       const environment = {
         ...resolvedEnvironment,
         lastDeployment: null,
@@ -309,4 +309,33 @@ describe('~/environments/components/new_environment_item.vue', () => {
       expect(deployment.exists()).toBe(false);
     });
   });
+
+  describe('upcoming deployment', () => {
+    it('should pass the upcoming deployment to the deployment component when it exists', () => {
+      const upcomingDeployment = resolvedEnvironment.lastDeployment;
+      const environment = { ...resolvedEnvironment, lastDeployment: null, upcomingDeployment };
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      const deployment = findDeployment();
+      expect(deployment.props('deployment')).toEqual(upcomingDeployment);
+    });
+    it('should not show the upcoming deployment when it is missing', () => {
+      const environment = {
+        ...resolvedEnvironment,
+        lastDeployment: null,
+        upcomingDeployment: null,
+      };
+
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      const deployment = findDeployment();
+      expect(deployment.exists()).toBe(false);
+    });
+  });
 });