// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {assert} from 'chai';
import {$$, waitFor} from '../../shared/helper.js';
import {loadComponentDocExample} from '../helpers/shared.js';

async function getListOfColorsFromList(selector: string) {
  await waitFor(`${selector} li`);
  const codeBlocks = await $$(`${selector} li code`);
  const variableNames = await Promise.all(codeBlocks.map(async block => {
    const text = await block.evaluate(code => (code as HTMLElement).innerText);
    return text.split(':')[0];
  }));
  return variableNames;
}

describe('theme colors', () => {
  it('lists the colors in both light and dark mode', async () => {
    await loadComponentDocExample('theme_colors/basic.html');
    const lightModeVariables = await getListOfColorsFromList('.light-mode');
    const darkModeVariables = await getListOfColorsFromList('.dark-mode');
    assert.strictEqual(lightModeVariables[0], '--color-primary');
    assert.deepEqual(lightModeVariables, darkModeVariables);
  });
});

// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {assert} from 'chai';
import {$$, waitFor} from '../../shared/helper.js';
import {loadComponentDocExample} from '../helpers/shared.js';

async function getListOfColorsFromList(selector: string) {
  await waitFor(`${selector} li`);
  const codeBlocks = await $$(`${selector} li code`);
  const variableNames = await Promise.all(codeBlocks.map(async block => {
    const text = await block.evaluate(code => (code as HTMLElement).innerText);
    return text.split(':')[0];
  }));
  return variableNames;
}

describe('theme colors', () => {
  it('lists the colors in both light and dark mode', async () => {
    await loadComponentDocExample('theme_colors/basic.html');
    const lightModeVariables = await getListOfColorsFromList('.light-mode');
    const darkModeVariables = await getListOfColorsFromList('.dark-mode');
    assert.lengthOf(lightModeVariables, 18);
    assert.deepEqual(lightModeVariables, darkModeVariables);
  });
});

--- 
+++ 
@@ -21,7 +21,7 @@
     await loadComponentDocExample('theme_colors/basic.html');
     const lightModeVariables = await getListOfColorsFromList('.light-mode');
     const darkModeVariables = await getListOfColorsFromList('.dark-mode');
-    assert.lengthOf(lightModeVariables, 18);
+    assert.strictEqual(lightModeVariables[0], '--color-primary');
     assert.deepEqual(lightModeVariables, darkModeVariables);
   });
 });
Fix failing theme_color interaction test

This test was failing as we have added more colors. This doesn't yet
matter as these tests are yet to run on CQ, but they will soon!

TBR=aerotwist@chromium.org

Change-Id: I7f1d709a0fbdc3c2d8b23f345a720cad9eb2d8d9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2571125
Reviewed-by: Jack Franklin <993fcadce4d04090da2fefd557a0995e7966c8d5@chromium.org>
Commit-Queue: Jack Franklin <993fcadce4d04090da2fefd557a0995e7966c8d5@chromium.org>
