import Vue from 'vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import { s__ } from '~/locale';
import mountComponent from '../../helpers/vue_mount_component_helper';

describe('Pagination links component', () => {
  const paginationLinksComponent = Vue.extend(PaginationLinks);
  const change = page => page;
  const pageInfo = {
    page: 3,
    perPage: 5,
    total: 30,
  };
  const translations = {
    firstText: s__('Pagination|« First'),
    prevText: s__('Pagination|Prev'),
    nextText: s__('Pagination|Next'),
    lastText: s__('Pagination|Last »'),
  };

  let paginationLinks;
  let glPagination;
  let destinationComponent;

  beforeEach(() => {
    paginationLinks = mountComponent(
      paginationLinksComponent,
      {
        change,
        pageInfo,
      },
    );
    [glPagination] = paginationLinks.$children;
    [destinationComponent] = glPagination.$children;
  });

  afterEach(() => {
    paginationLinks.$destroy();
  });

  it('should provide translated text to GitLab UI pagination', () => {
    Object.entries(translations).forEach(entry =>
      expect(
        destinationComponent[entry[0]],
      ).toBe(entry[1]),
    );
  });

  it('should pass change to GitLab UI pagination', () => {
    expect(
      Object.is(glPagination.change, change),
    ).toBe(true);
  });

  it('should pass page from pageInfo to GitLab UI pagination', () => {
    expect(
      destinationComponent.value,
    ).toBe(pageInfo.page);
  });

  it('should pass per page from pageInfo to GitLab UI pagination', () => {
    expect(
      destinationComponent.perPage,
    ).toBe(pageInfo.perPage);
  });

  it('should pass total items from pageInfo to GitLab UI pagination', () => {
    expect(
      destinationComponent.totalRows,
    ).toBe(pageInfo.total);
  });
});