github.com/SamarSidharth/kpt@v0.0.0-20231122062228-c7d747ae3ace/site/static/js/plugins/copy_buttons.test.js (about)

     1  /**
     2   * @jest-environment jsdom
     3   */
     4  
     5  const plugins = require("./copy_buttons");
     6  
     7  const originalClipboard = { ...global.navigator.clipboard };
     8  beforeEach(() => {
     9    const mockClipboard = {
    10      writeText: jest.fn(),
    11    };
    12    global.navigator.clipboard = mockClipboard;
    13  });
    14  
    15  afterEach(() => {
    16    jest.resetAllMocks();
    17    global.navigator.clipboard = originalClipboard;
    18  });
    19  
    20  test("clipboard copying button exists only on shell blocks with a '$'", () => {
    21    document.body.innerHTML = `<pre v-pre="" data-lang="shell" class="language-shell">
    22      <code class="lang-shell language-shell">
    23      No copy button because $.
    24      </code>
    25      </pre>
    26      <pre v-pre="" data-lang="shell" class="language-shell">
    27      <code class="lang-shell language-shell">
    28      $ kpt fn <span class="token builtin class-name">eval</span> wordpress --image gcr.io/kpt-fn/set-namespace:v0.1 -- <span class="token assign-left variable">namespace</span><span class="token operator">=</span>mywordpress
    29      </code>
    30      </pre>
    31      <pre v-pre="" data-lang="yaml" class="language-yaml">
    32      <code class="lang-yaml language-yaml">
    33      $ No copy button because language.
    34      </code>
    35      </pre>`;
    36    plugins.addCodeCopyButtons();
    37    const preTags = document.getElementsByTagName("pre");
    38    expect(preTags.item(0).getElementsByClassName("copy-button").length).toBe(0);
    39    expect(preTags.item(1).getElementsByClassName("copy-button").length).toBe(1);
    40    expect(preTags.item(2).getElementsByClassName("copy-button").length).toBe(0);
    41  });
    42  
    43  test.each([
    44    [
    45      [
    46        `kpt fn source wordpress \\
    47  | kpt fn eval - --image gcr.io/kpt-fn/set-namespace:v0.1 -- namespace=mywordpress \\
    48  | kpt fn eval - --image gcr.io/kpt-fn/set-labels:v0.1 -- app=wordpress env=prod \\
    49  | kpt fn sink wordpress`,
    50      ],
    51      `$ kpt fn source wordpress \\
    52  | kpt fn eval - --image gcr.io/kpt-fn/set-namespace:v0.1 -- namespace=mywordpress \\
    53  | kpt fn eval - --image gcr.io/kpt-fn/set-labels:v0.1 -- app=wordpress env=prod \\
    54  | kpt fn sink wordpress`,
    55    ],
    56    [
    57      [
    58        `kpt fn eval - --image \\
    59  gcr.io/kpt-fn/set-namespace:v0.1 -- namespace=mywordpress`,
    60      ],
    61      `$ kpt fn eval - --image \\
    62  gcr.io/kpt-fn/set-namespace:v0.1 -- namespace=mywordpress
    63  output`,
    64    ],
    65  ])(
    66    "clipboard copying button copies all lines of command: %s",
    67    (expected, shellCodeText) => {
    68      document.body.innerHTML = `<pre v-pre="" data-lang="shell" class="language-shell">
    69      <code class="lang-shell language-shell">
    70      ${shellCodeText}
    71      </code>
    72      </pre>`;
    73      plugins.addCodeCopyButtons();
    74      document.getElementsByClassName("copy-button").item(0).click();
    75      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expected);
    76    }
    77  );