import {it, describe, expect} from 'vitest'
import Services from '@admin_pages/Services/Services.vue'
import { globalServices } from '@store/modules/services/StaticData'
import { mount } from '@vue/test-utils'
import {createStore} from 'vuex'

const store = createStore({
  state() {
    return {
      services: globalServices,
    }
  },
  getters: {
    services: (state) => state.services,
  },
  mutations: {
    setServices: (state, updateValue) =>  state.services = updateValue,
  },
})

describe("6_admin_pages, page of  Services", () => {
  it("renders Services, with custom button title", () => {
    const wrapper = mount(Services, {
      global: {
        plugins: [store],
      },
      data () {
        return {
          titleServicesButton: 'Показать больше сервисов',
        }
      },
    })

    expect(wrapper.text()).toContain('Показать больше сервисов')
  })
})

describe("Services", () => {
  it("renders after click button, open full Services", async () => {
    const wrapper = mount(Services, {
      global: {
        plugins: [store],
      },
    })

    await wrapper.find('button').trigger('click')
    expect(wrapper.find('button').text()).toContain('Скрыть')
  })
})

describe("Services", () => {
  it("renders Services with exists data", async () => {
    const wrapper = mount(Services, {
      global: {
        plugins: [store],
      },
    })

    expect(store.state.services.length).toBeGreaterThan(0)
    expect(wrapper.exists()).toBe(true)
  })
})

describe("Services", () => {
  it("renders Services maked empty data", async () => {
    const wrapper = mount(Services, {
      global: {
        plugins: [store],
      },
    })

    store.commit('setServices', [])

    expect(store.state.services.length).toBe(0)
    expect(wrapper.exists()).toBe(true)
  })
})