design-system/cypress/e2e/docs/show-details.cy.js at c00f80ee8c8cafc84fbaa97972dc9ad44af567e1 · cfpb/design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
describe('The "show details" toggling feature', () => {
  const components = [
    'alerts',
    'banner-notification',
    'banner-us-gov',
    'buttons',
    'checkboxes',
    'date-picker',
    'expandables',
    'fieldsets',
    'helper-text',
    'labels-and-legends',
    'links',
    'lists',
    'pagination',
    'radio-buttons',
    'selects',
    'summaries',
    'tables',
    'taglines',
    'text-inputs',
  ];

  before(() => {
    cy.visit('/components/');
    cy.viewport(1600, 1200);
    // Sidenav.
    cy.get('.ds-nav').should('be.visible');

    // If tests are being run via Sauce Labs, only test ten random component pages.
    // Testing all of them takes 30+ minutes and Sauce Labs has a max test length of 30 min.
    /*if (global.SAUCE_LABS) {
      componentPages.sort(() => 0.5 - Math.random());
      componentPages = componentPages.slice(0, 10);
    }*/
  });

  it('should query component names', () => {
    cy.get('.ds-nav-2 .a-link--jump').then((items) => {
      items.each((index, item) => {
        item = String(item);
        components[index] = item.substring(
          item.lastIndexOf('/design-system/') + 14,
        );
      });
    });
  });

  components.forEach((component) => {
    it(`should show/hide ${component} details across all component pages`, () => {
      cy.visit('/components/' + component);
      cy.reload();

      cy.log('should hide snippet tabs by default');
      // Show details button.
      cy.get('button').contains('Show details').should('be.visible');

      // Hide details button.
      cy.get('button').contains('Hide details').should('not.be.visible');

      // Detail tabs.
      cy.get('.m-tabs').should('not.be.visible');

      cy.log('should show code snippets when toggle button is clicked');
      // Show details button.
      cy.get('button').contains('Show details').click();
      cy.get('button').contains('Show details').should('not.be.visible');

      // Hide details button.
      cy.get('button').contains('Hide details').should('be.visible');

      // Detail tabs.
      cy.get('.m-tabs').should('be.visible');

      cy.log(
        'should re-hide code snippets when toggle button is clicked again',
      );
      // Hide details button.
      cy.get('button').contains('Hide details').click();
      cy.get('button').contains('Hide details').should('not.be.visible');

      // Detail tabs.
      cy.get('.m-tabs').should('not.be.visible');
    });
  });
});