Updated project variable tests

app/views/projects/variables/_table.html.haml

-.table-responsive
+.table-responsive.variables-table
   %table.table
     %colgroup
       %col
@@ -14,11 +14,11 @@
           %td= variable.key
           %td= variable.value
           %td
-            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent" do
+            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
               %span.sr-only
                 Update
               = icon("pencil")
-            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent", method: :delete, data: { confirm: "Are you sure?" } do
+            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-delete", method: :delete, data: { confirm: "Are you sure?" } do
               %span.sr-only
                 Remove
               = icon("trash")

spec/features/variables_spec.rb

 require 'spec_helper'
-describe "Variables" do
-  let(:user) { create(:user) }
-  before { login_as(user) }
-
-  describe "specific runners" do
-    before do
-      @project = FactoryGirl.create :empty_project
-      @project.team << [user, :master]
+describe 'Project variables', js: true do
+  let(:user)     { create(:user) }
+  let(:project)  { create(:project) }
+  let(:variable) { create(:ci_variable, key: 'test') }
+
+  before do
+    login_as(user)
+    project.team << [user, :master]
+    project.variables << variable
+
+    visit namespace_project_variables_path(project.namespace, project)
+  end
+
+  it 'should show list of variables' do
+    page.within('.variables-table') do
+      expect(page).to have_content(variable.key)
+    end
+  end
+
+  it 'should add new variable' do
+    fill_in('variable_key', with: 'key')
+    fill_in('variable_value', with: 'key value')
+    click_button('Add new variable')
+
+    page.within('.variables-table') do
+      expect(page).to have_content('key')
+    end
+  end
+
+  it 'should delete variable' do
+    page.within('.variables-table') do
+      find('.btn-variable-delete').click
+    end
+
+    expect(page).to_not have_selector('variables-table')
+  end
+
+  it 'should edit variable' do
+    page.within('.variables-table') do
+      find('.btn-variable-edit').click
     end
-    it "creates variable", js: true do
-      visit namespace_project_variables_path(@project.namespace, @project)
-      click_on "Add a variable"
-      fill_in "Key", with: "SECRET_KEY"
-      fill_in "Value", with: "SECRET_VALUE"
-      click_on "Save changes"
-      expect(page).to have_content("Variables were successfully updated.")
-      expect(@project.variables.count).to eq(1)
+    fill_in('variable_key', with: 'key')
+    fill_in('variable_value', with: 'key value')
+    click_button('Save variable')
+    page.within('.variables-table') do
+      expect(page).to have_content('key')
     end
   end
 end