Issue #3432632 by simohell, smustgrave, kostyashupenko, andypost: Collapsed...

// This test is a duplicate of oliveroPrimaryTabsTest.js tagged for claro

const primaryTabsWrapper = '[data-drupal-nav-tabs]';

const activeTab = '.tabs__tab.is-active';

const inactiveTab = '.tabs__tab:not(.is-active)';

const mobileToggle = `${activeTab} .tabs__trigger`;

module.exports = {

  '@tags': ['core', 'claro'],

  before(browser) {

    browser

      .drupalInstall({

        setupFile:

          'core/tests/Drupal/TestSite/TestSiteClaroInstallTestScript.php',

        installProfile: 'minimal',

      })

      .drupalCreateUser({

        name: 'user',

        password: '123',

        permissions: ['administer nodes'],

      })

      .drupalLogin({ name: 'user', password: '123' });

    browser.setWindowSize(1600, 800);

  },

  after(browser) {

    browser.drupalUninstall();

  },

  'Verify desktop primary tab display': (browser) => {

    browser

      .drupalRelativeURL('/node/1')

      .waitForElementVisible(primaryTabsWrapper)

      .assert.visible(activeTab)

      .assert.visible(inactiveTab)

      .assert.not.visible(mobileToggle);

  },

  'Verify mobile tab display and click functionality': (browser) => {

    browser

      .setWindowSize(699, 800)

      .drupalRelativeURL('/node/1')

      .waitForElementVisible(primaryTabsWrapper)

      .assert.visible(activeTab)

      .assert.not.visible(inactiveTab)

      .assert.visible(mobileToggle)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false')

      .click(mobileToggle)

      .waitForElementVisible(inactiveTab)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'true')

      .click(mobileToggle)

      .waitForElementNotVisible(inactiveTab)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false');

  },

};

<?php

declare(strict_types=1);

namespace Drupal\TestSite;

use Drupal\Core\Extension\ModuleInstallerInterface;

use Drupal\Core\Extension\ThemeInstallerInterface;

use Drupal\node\Entity\Node;

use Drupal\comment\Entity\Comment;

/**

 * Setup file used by TestSiteInstallTestScript.

 *

 * @see \Drupal\Tests\Scripts\TestSiteApplicationTest

 */

class TestSiteClaroInstallTestScript implements TestSetupInterface {

  /**

   * {@inheritdoc}

   */

  public function setup() {

    // Install required module for the Olivero front page.

    $module_installer = \Drupal::service('module_installer');

    assert($module_installer instanceof ModuleInstallerInterface);

    $module_installer->install(['olivero_test']);

    // Install Claro instead of Olivero and set it as the default theme.

    $theme_installer = \Drupal::service('theme_installer');

    assert($theme_installer instanceof ThemeInstallerInterface);

    $theme_installer->install(['claro'], TRUE);

    $system_theme_config = \Drupal::configFactory()->getEditable('system.theme');

    $system_theme_config->set('default', 'claro')->save();

    // Create an article that will have no comments

    $article_no_comments = Node::create(['type' => 'article']);

    $article_no_comments->set('title', 'Article without comments');

    // Enable comments

    $article_no_comments->set('comment', 2);

    $article_no_comments->save();

    // Create an article that will have comments

    $article_with_comments = Node::create(['type' => 'article']);

    $article_with_comments->set('title', 'Article with comments');

    // Enable comments

    $article_with_comments->set('comment', 2);

    $article_with_comments->save();

    $values = [

      // These values are for the entity that you're creating the comment for, not the comment itself.

      'entity_type' => 'node',

      'entity_id'   => 2,

      'field_name'  => 'comment',

      'uid' => 1,

      // These values are for the comment itself.

      'comment_type' => 'comment',

      'subject' => 'A comment',

      'comment_body' => 'Body of comment',

      // Whether the comment is 'approved' or not.

      'status' => 1,

    ];

    // Create comment entities out of our field values

    $comment1 = Comment::create($values);

    $comment1->save();

    $comment2 = Comment::create($values);

    $comment2->save();

  }

}

    const openMenu = () => {

      $target.toggleClass('is-open');

      $target.find('button').attr('aria-expanded', $target.hasClass('is-open'));

    };

    const toggleOrder = (reset) => {

        // the width of the parent container.

        const isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();

        $tab.toggleClass('is-horizontal', isHorizontal);

        $tab.find('button').attr('aria-expanded', null);

        toggleOrder(isHorizontal);

      } else {

        toggleOrder(false);

        $tab.find('button').attr('aria-expanded', 'false');

      }

    };