feat(test): added e2e tests

src/tools/otp-code-generator-and-validator/otp-code-generator.e2e.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - OTP code generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/otp-generator');
+  });
+
+  test('Has title', async ({ page }) => {
+    await expect(page).toHaveTitle('OTP code generator - IT Tools');
+  });
+
+  test('Secret hexa value is computed from provided secret', async ({ page }) => {
+    await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
+
+    const secretInHex = await page.getByPlaceholder('Secret in hex will be displayed here').inputValue();
+
+    expect(secretInHex).toEqual('44e6e72e02');
+  });
+
+  test('OTP a generated from the provided secret', async ({ page }) => {
+    page.evaluate(() => {
+      Date.now = () => 1609477200000; //Jan 1, 2021
+    });
+
+    await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
+
+    const previousOtp = await page.getByTestId('previous-otp').innerText();
+    const currentOtp = await page.getByTestId('current-otp').innerText();
+    const nextOtp = await page.getByTestId('next-otp').innerText();
+
+    expect(previousOtp.trim()).toEqual('028034');
+    expect(currentOtp.trim()).toEqual('162195');
+    expect(nextOtp.trim()).toEqual('452815');
+  });
+
+  test('You can generate a new random secret', async ({ page }) => {
+    const initialSecret = await page.getByPlaceholder('Paste your TOTP secret...').inputValue();
+    await page
+      .locator('div')
+      .filter({ hasText: /^Secret$/ })
+      .getByRole('button')
+      .click();
+
+    const newSecret = await page.getByPlaceholder('Paste your TOTP secret...').inputValue();
+
+    expect(newSecret).not.toEqual(initialSecret);
+  });
+});

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -8,13 +8,21 @@
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary @click.prevent="copyPrevious(tokens.previous)">{{ tokens.previous }}</n-button>
+          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
+            tokens.previous
+          }}</n-button>
         </template>
         <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button tertiary type="primary" class="current-otp" @click.prevent="copyCurrent(tokens.current)">
+          <n-button
+            tertiary
+            type="primary"
+            data-test-id="current-otp"
+            class="current-otp"
+            @click.prevent="copyCurrent(tokens.current)"
+          >
             {{ tokens.current }}
           </n-button>
         </template>
@@ -22,7 +30,9 @@
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary @click.prevent="copyNext(tokens.next)">{{ tokens.next }}</n-button>
+          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+            tokens.next
+          }}</n-button>
         </template>
         <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
       </n-tooltip>

src/tools/token-generator/token-generator.e2e.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Token generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/token-generator');
+  });
+
+  test('Has title', async ({ page }) => {
+    await expect(page).toHaveTitle('Token generator - IT Tools');
+  });
+
+  test('New token on refresh', async ({ page }) => {
+    const initialToken = await page.getByPlaceholder('The token...').inputValue();
+    await page.getByRole('button', { name: 'Refresh' }).click();
+    const newToken = await page.getByPlaceholder('The token...').inputValue();
+
+    expect(newToken).not.toEqual(initialToken);
+  });
+});