@ons/design-system 50.0.0 → 52.0.0

package/components/navigation/navigation.spec.js

@@ -0,0 +1,232 @@
+import { setViewport } from '../../tests/helpers/puppeteer';
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_NAVIGATION = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#0',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main navigation',
+    },
+  },
+};
+
+const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Main nav item 2',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    subNavigation: {
+      id: 'sub-nav',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+          sections: [
+            {
+              sectionTitle: 'Section 1',
+              children: [
+                {
+                  title: 'Child item 1',
+                  url: '#0',
+                },
+                {
+                  title: 'Child item 2',
+                  url: '#1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+describe('script: navigation', () => {
+  afterEach(async () => {
+    // Clear viewport size and browser emulation after each test.
+    await jestPuppeteer.resetPage();
+  });
+
+  describe.each([
+    ['main', EXAMPLE_NAVIGATION, '.ons-navigation--main', '.ons-js-navigation-button', false],
+    ['sub', EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION, '.ons-navigation--sub-mobile', '.ons-js-sub-navigation-button', true],
+  ])('level: %s navigation', (_, params, navEl, buttonEl, ariaStatus) => {
+    describe('when the component initialises', () => {
+      beforeEach(async () => {
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has removed the display class from the menu toggle button', async () => {
+        const hasClass = await page.$eval(buttonEl, node => node.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(false);
+      });
+    });
+
+    describe('when the viewport is large', () => {
+      beforeEach(async () => {
+        await setViewport(page, { width: 1650, height: 1050 });
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has the correct aria hidden attribute on the navigation list', async () => {
+        const nav = await page.$(navEl);
+        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+        expect(hasAriaAttribute).toBe(ariaStatus);
+      });
+
+      it('has aria-expanded set as `false` on the navigation toggle button', async () => {
+        const button = await page.$(buttonEl);
+        const ariaExpandedIsFalse = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+        expect(ariaExpandedIsFalse).toBe(true);
+      });
+    });
+
+    describe('when the viewport is small', () => {
+      beforeEach(async () => {
+        await setViewport(page, { width: 600, height: 1050 });
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has aria-hidden set as `true` on the navigation list', async () => {
+        const nav = await page.$(navEl);
+        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+        expect(hasAriaAttribute).toBe(true);
+      });
+
+      describe('when the toggle button is clicked to open the navigation list', () => {
+        beforeEach(async () => {
+          await page.focus(buttonEl);
+          await page.keyboard.press('Enter');
+        });
+
+        it('has aria-hidden set as `false` on the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'false');
+          expect(hasAriaAttribute).toBe(true);
+        });
+
+        it('has the hide class removed from the navigation list', async () => {
+          const hasClass = await page.$eval(navEl, node =>
+            node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+          );
+          expect(hasClass).toBe(false);
+        });
+
+        it('has aria-expanded set as `true` on the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'true');
+          expect(ariaExpandedIsTrue).toBe(true);
+        });
+
+        it('has the correct class applied to the navigation toggle button', async () => {
+          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          expect(hasClass).toBe(true);
+        });
+      });
+
+      describe('when the toggle button is clicked to close the navigation list', () => {
+        beforeEach(async () => {
+          await page.focus(buttonEl);
+          await page.keyboard.press('Enter');
+          await page.waitForTimeout(100);
+          await page.keyboard.press('Enter');
+          await page.waitForTimeout(100);
+        });
+
+        it('has aria-hidden set as `true` on the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+          expect(hasAriaAttribute).toBe(true);
+        });
+
+        it('has aria-expanded set as `false` on the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+          expect(ariaExpandedIsTrue).toBe(true);
+        });
+
+        it('has the active class removed from the navigation toggle button', async () => {
+          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          expect(hasClass).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe.each([['main', EXAMPLE_NAVIGATION, '.ons-navigation--main', '.ons-js-navigation-button']])(
+    'level: %s navigation',
+    (_, params, navEl, buttonEl) => {
+      describe('when the viewport is small and manually made wider', () => {
+        beforeEach(async () => {
+          await setViewport(page, { width: 600, height: 1050 });
+          await setTestPage('/test', renderComponent('header', params));
+          await setViewport(page, { width: 1200, height: 1050 });
+        });
+
+        it('has the aria-hidden attribute removed from the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+          expect(hasAriaAttribute).toBe(false);
+        });
+
+        it('has aria-expanded removed from the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const hasAriaExpanded = await button.evaluate(node => node.getAttribute('aria-expanded') !== null);
+          expect(hasAriaExpanded).toBe(false);
+        });
+
+        it('has the hide class removed from the navigation list', async () => {
+          const hasClass = await page.$eval(navEl, node =>
+            node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+          );
+          expect(hasClass).toBe(false);
+        });
+      });
+    },
+  );
+});

package/components/pagination/_macro.njk

@@ -25,7 +25,7 @@
   {% endif %}
 
 
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" arial-label="Pagination ({{ position }})">
+  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
       <div class="ons-pagination__position">{{ position }}</div>
       <ul class="ons-pagination__items">
           {% if currentPageIndex != 1 %}

package/components/pagination/_macro.spec.js

@@ -0,0 +1,411 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const PAGINATION_PREV_NEXT_LABELS = {
+  previous: 'Previous page',
+  next: 'Next page',
+};
+
+const EXAMPLE_PAGINATION_MINIMAL = {
+  ...PAGINATION_PREV_NEXT_LABELS,
+  pages: [{ url: '/page/1', current: true }],
+};
+
+describe('macro: pagination', () => {
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...EXAMPLE_PAGINATION_MINIMAL,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-pagination').hasClass('extra-class')).toBe(true);
+    expect($('.ons-pagination').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `true`', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...EXAMPLE_PAGINATION_MINIMAL,
+        hideRangeIndicator: true,
+      }),
+    );
+
+    expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(true);
+  });
+
+  it('does not have `ons-pagination--no-indicator` style class when `hideRangeIndicator` is `false`', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...EXAMPLE_PAGINATION_MINIMAL,
+        hideRangeIndicator: false,
+      }),
+    );
+
+    expect($('.ons-pagination').hasClass('ons-pagination--no-indicator')).toBe(false);
+  });
+
+  describe('one page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [{ url: '/page/1', current: true }],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 1)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 1 of 1');
+    });
+
+    it('has a single list item', () => {
+      expect($('li').length).toBe(1);
+      assertIsCurrentPage($('.ons-pagination__item'), '/page/1', 'Current page (Page 1 of 1)', '1');
+    });
+  });
+
+  describe('two pages where first is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [{ url: '/page/1', current: true }, { url: '/page/2' }],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 1 of 2)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 1 of 2');
+    });
+
+    it('has a 3 list items ("1", "2", "Next page")', () => {
+      expect($('li').length).toBe(3);
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
+      assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
+      assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (Page 2)', 'Next page');
+    });
+  });
+
+  describe('two pages where second is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 2)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 2 of 2');
+    });
+
+    it('has a 3 list items ("Previous page", "1", "2")', () => {
+      expect($('li').length).toBe(3);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
+    });
+  });
+
+  describe('three pages where second is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 3)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 2 of 3');
+    });
+
+    it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
+      expect($('li').length).toBe(5);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
+      assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
+      assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+    });
+  });
+
+  describe('five pages where second is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 5)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 2 of 5');
+    });
+
+    it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
+      expect($('li').length).toBe(7);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
+      assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (Page 5)', '5');
+      assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+    });
+  });
+
+  describe('six pages where second is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [
+          { url: '/page/1' },
+          { url: '/page/2', current: true },
+          { url: '/page/3' },
+          { url: '/page/4' },
+          { url: '/page/5' },
+          { url: '/page/6' },
+        ],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 6)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 2 of 6');
+    });
+
+    it('has a 8 list items ("Previous page", "1", "2", "3", "4", "...", "6", "Next page")', () => {
+      expect($('li').length).toBe(8);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
+      assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
+      assertIsGap($('.ons-pagination__item:nth-child(6)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(7)'), '/page/6', 'Go to the last page (Page 6)', '6');
+      assertIsNextPage($('.ons-pagination__item:nth-child(8)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+    });
+  });
+
+  describe('eleven pages where fifth is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [
+          { url: '/page/1' },
+          { url: '/page/2' },
+          { url: '/page/3' },
+          { url: '/page/4' },
+          { url: '/page/5', current: true },
+          { url: '/page/6' },
+          { url: '/page/7' },
+          { url: '/page/8' },
+          { url: '/page/9' },
+          { url: '/page/10' },
+          { url: '/page/11' },
+        ],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 5 of 11)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 5 of 11');
+    });
+
+    it('has a 11 list items ("Previous page", "1", "...", "3", "4", "5", "6", "7", "...", "11", "Next page")', () => {
+      expect($('li').length).toBe(11);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+      assertIsGap($('.ons-pagination__item:nth-child(3)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Current page (Page 5 of 11)', '5');
+      assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/6', 'Go to page 6', '6');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/7', 'Go to page 7', '7');
+      assertIsGap($('.ons-pagination__item:nth-child(9)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(10)'), '/page/11', 'Go to the last page (Page 11)', '11');
+      assertIsNextPage($('.ons-pagination__item:nth-child(11)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
+    });
+  });
+
+  describe('eleven pages where tenth is the current page', () => {
+    const $ = cheerio.load(
+      renderComponent('pagination', {
+        ...PAGINATION_PREV_NEXT_LABELS,
+        pages: [
+          { url: '/page/1' },
+          { url: '/page/2' },
+          { url: '/page/3' },
+          { url: '/page/4' },
+          { url: '/page/5' },
+          { url: '/page/6' },
+          { url: '/page/7' },
+          { url: '/page/8' },
+          { url: '/page/9' },
+          { url: '/page/10', current: true },
+          { url: '/page/11' },
+        ],
+      }),
+    );
+
+    it('passes jest-axe checks', async () => {
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has `aria-label` attribute indicating position within pagination', () => {
+      expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 10 of 11)');
+    });
+
+    it('renders element indicating position within pagination', () => {
+      expect(
+        $('.ons-pagination__position')
+          .text()
+          .trim(),
+      ).toBe('Page 10 of 11');
+    });
+
+    it('has a 9 list items ("Previous page", "1", "...", "7", "8", "9", "10", "11", "Next page")', () => {
+      expect($('li').length).toBe(9);
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+      assertIsGap($('.ons-pagination__item:nth-child(3)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(4)'), '/page/7', 'Go to page 7', '7');
+      assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/8', 'Go to page 8', '8');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(6)'), '/page/9', 'Go to page 9', '9');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(7)'), '/page/10', 'Current page (Page 10 of 11)', '10');
+      assertIsNextPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to page 11', '11');
+      assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
+    });
+  });
+});
+
+function assertIsCurrentPage(pageItem, url, label, text) {
+  expect(pageItem.hasClass('ons-pagination__item--current')).toBe(true);
+  expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
+  expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBe('true');
+  expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
+  expect(
+    pageItem
+      .find('.ons-pagination__link')
+      .text()
+      .trim(),
+  ).toBe(text);
+}
+
+function assertIsOtherPage(pageItem, url, label, text) {
+  expect(pageItem.hasClass('ons-pagination__item--current')).toBe(false);
+  expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
+  expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBeUndefined();
+  expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
+  expect(
+    pageItem
+      .find('.ons-pagination__link')
+      .text()
+      .trim(),
+  ).toBe(text);
+}
+
+function assertIsPreviousPage(pageItem, url, label, text) {
+  assertIsOtherPage(pageItem, url, label, text);
+  expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('prev');
+}
+
+function assertIsNextPage(pageItem, url, label, text) {
+  assertIsOtherPage(pageItem, url, label, text);
+  expect(pageItem.find('.ons-pagination__link').attr('rel')).toBe('next');
+}
+
+function assertIsGap(pageItem) {
+  expect(pageItem.hasClass('ons-pagination__item--gap')).toBe(true);
+  expect(pageItem.text().trim()).toBe('…');
+}