Make deploy keys table more clearly structured

1 files changed, 17 insertions, 25 deletions

diff --git a/spec/javascripts/deploy_keys/components/keys_panel_spec.js b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
index 08357d2b547..f71f5ccf082 100644
--- a/spec/javascripts/deploy_keys/components/keys_panel_spec.js
+++ b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
@@ -6,7 +6,7 @@ describe('Deploy keys panel', () => {
   const data = getJSONFixture('deploy_keys/keys.json');
   let vm;
 
-  beforeEach((done) => {
+  beforeEach(done => {
     const DeployKeysPanelComponent = Vue.extend(deployKeysPanel);
     const store = new DeployKeysStore();
     store.keys = data;
@@ -24,46 +24,38 @@ describe('Deploy keys panel', () => {
     setTimeout(done);
   });
 
-  it('renders the title with keys count', () => {
-    expect(
-      vm.$el.querySelector('h5').textContent.trim(),
-    ).toContain('test');
-
-    expect(
-      vm.$el.querySelector('h5').textContent.trim(),
-    ).toContain(`(${vm.keys.length})`);
+  it('renders list of keys', () => {
+    expect(vm.$el.querySelectorAll('.deploy-key').length).toBe(vm.keys.length);
   });
 
-  it('renders list of keys', () => {
-    expect(
-      vm.$el.querySelectorAll('li').length,
-    ).toBe(vm.keys.length);
+  it('renders table header', () => {
+    const tableHeader = vm.$el.querySelector('.table-row-header');
+
+    expect(tableHeader).toExist();
+    expect(tableHeader.textContent).toContain('Deploy key');
+    expect(tableHeader.textContent).toContain('Project usage');
+    expect(tableHeader.textContent).toContain('Created');
   });
 
-  it('renders help box if keys are empty', (done) => {
+  it('renders help box if keys are empty', done => {
     vm.keys = [];
 
     Vue.nextTick(() => {
-      expect(
-        vm.$el.querySelector('.settings-message'),
-      ).toBeDefined();
+      expect(vm.$el.querySelector('.settings-message')).toBeDefined();
 
-      expect(
-        vm.$el.querySelector('.settings-message').textContent.trim(),
-      ).toBe('No deploy keys found. Create one with the form above.');
+      expect(vm.$el.querySelector('.settings-message').textContent.trim()).toBe(
+        'No deploy keys found. Create one with the form above.',
+      );
 
       done();
     });
   });
 
-  it('does not render help box if keys are empty & showHelpBox is false', (done) => {
+  it('renders no table header if keys are empty', done => {
     vm.keys = [];
-    vm.showHelpBox = false;
 
     Vue.nextTick(() => {
-      expect(
-        vm.$el.querySelector('.settings-message'),
-      ).toBeNull();
+      expect(vm.$el.querySelector('.table-row-header')).not.toExist();
 
       done();
     });