Update specs to be compatible with bootstrap-vue

Added new props to:
  app_spec.js
  collapsible_container_spec.js
  project_empty_state_spec.js
  table_registry_spec.js

Fixed typo
Added Vue.nextTick check

spec/frontend/registry/components/app_spec.js

@@ -39,6 +39,8 @@ describe('Registry List', () => {
     // See https://github.com/vuejs/vue-test-utils/issues/532.
     Vue.config.silent = true;
     wrapper = mount(registry, {
+      attachToDocument: true,
+      sync: false,
       propsData,
       computed: {
         repos() {
@@ -67,6 +69,8 @@ describe('Registry List', () => {
     let localWrapper;
     beforeEach(() => {
       localWrapper = mount(registry, {
+        attachToDocument: true,
+        sync: false,
         propsData,
         computed: {
           repos() {

spec/frontend/registry/components/collapsible_container_spec.js

@@ -22,7 +22,14 @@ describe('collapsible registry container', () => {
   const findToggleRepos = (w = wrapper) => w.findAll('.js-toggle-repo');
   const findDeleteModal = (w = wrapper) => w.find({ ref: 'deleteModal' });
 
-  const mountWithStore = config => mount(collapsibleComponent, { ...config, store, localVue });
+  const mountWithStore = config =>
+    mount(collapsibleComponent, {
+      ...config,
+      store,
+      localVue,
+      attachToDocument: true,
+      sync: false,
+    });
 
   beforeEach(() => {
     createFlash.mockClear();
@@ -63,12 +70,15 @@ describe('collapsible registry container', () => {
     it('should be closed by default', () => {
       expectIsClosed();
     });
-    it('should be open when user clicks on closed repo', () => {
+    it('should be open when user clicks on closed repo', done => {
       const toggleRepos = findToggleRepos(wrapper);
       toggleRepos.at(0).trigger('click');
-      const container = findContainerImageTags(wrapper);
-      expect(container.exists()).toBe(true);
-      expect(wrapper.vm.fetchList).toHaveBeenCalled();
+      Vue.nextTick(() => {
+        const container = findContainerImageTags(wrapper);
+        expect(container.exists()).toBe(true);
+        expect(wrapper.vm.fetchList).toHaveBeenCalled();
+        done();
+      });
     });
     it('should be closed when the user clicks on an opened repo', done => {
       const toggleRepos = findToggleRepos(wrapper);

spec/frontend/registry/components/project_empty_state_spec.js

@@ -6,6 +6,8 @@ describe('Registry Project Empty state', () => {
 
   beforeEach(() => {
     wrapper = mount(projectEmptyState, {
+      attachToDocument: true,
+      sync: false,
       propsData: {
         noContainersImage: 'imageUrl',
         helpPagePath: 'help',

spec/frontend/registry/components/table_registry_spec.js

@@ -28,7 +28,8 @@ describe('table registry', () => {
   const findImageId = (w = wrapper) => w.find({ ref: 'imageId' });
   const bulkDeletePath = 'path';
 
-  const mountWithStore = config => mount(tableRegistry, { ...config, store, localVue });
+  const mountWithStore = config =>
+    mount(tableRegistry, { ...config, store, localVue, attachToDocument: true, sync: false });
 
   beforeEach(() => {
     // This is needed due to  console.error called by vue to emit a warning that stop the tests
@@ -196,7 +197,7 @@ describe('table registry', () => {
       expect(wrapper.vm.handleSingleDelete).toHaveBeenCalledWith(repoPropsData.list[0]);
       expect(wrapper.vm.handleMultipleDelete).not.toHaveBeenCalled();
     });
-    it('on ok when multiple items are selected should call muultiDelete', () => {
+    it('on ok when multiple items are selected should call multiDelete', () => {
       wrapper.setData({ itemsToBeDeleted: [0, 1, 2] });
       wrapper.vm.onDeletionConfirmed();