Merge pull request #8890 from weseek/support/148121-replace-tests-with-playwright

support: Replace tests with playwright (60-home/60-home--home)

.github/workflows/reusable-app-prod.yml

@@ -213,7 +213,7 @@ jobs:
       fail-fast: false
       matrix:
         # List string expressions that is comma separated ids of tests in "test/cypress/integration"
-        spec-group: ['20', '21', '22', '23', '30', '50', '60']
+        spec-group: ['20', '21', '22', '23', '30', '50']
 
     services:
       mongodb:

apps/app/playwright.config.ts

@@ -15,7 +15,9 @@ const authFile = path.resolve(__dirname, './playwright/.auth/admin.json');
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  timeout: 7 * 1000,
+  expect: {
+    timeout: 7 * 1000,
+  },
 
   testDir: './playwright',
   outputDir: './playwright/output',

apps/app/playwright/60-home/home.spec.ts

@@ -0,0 +1,122 @@
+import { test, expect } from '@playwright/test';
+
+
+test('Visit User home', async({ page }) => {
+  await page.goto('dummy');
+
+  // Open PersonalDropdown
+  await page.getByTestId('personal-dropdown-button').click();
+  await expect(page.getByTestId('grw-personal-dropdown-menu-user-home')).toBeVisible();
+
+  // Click UserHomeMenu
+  await page.getByTestId('grw-personal-dropdown-menu-user-home').click();
+  await expect(page.getByTestId('grw-users-info')).toBeVisible();
+});
+
+test('Vist User settings', async({ page }) => {
+  await page.goto('dummy');
+
+  // Open PersonalDropdown
+  await page.getByTestId('personal-dropdown-button').click();
+  await expect(page.getByTestId('grw-personal-dropdown-menu-user-home')).toBeVisible();
+
+  // Click UserSettingsMenu
+  page.getByTestId('grw-personal-dropdown-menu-user-settings').click();
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+});
+
+test('Open questionnaire modal', async({ page }) => {
+  await page.goto('/dummy');
+
+  // Open PersonalDropdown
+  await page.getByTestId('personal-dropdown-button').click();
+  await expect(page.getByTestId('grw-personal-dropdown-menu-user-home')).toBeVisible();
+
+  // Expect the questionnaire modal to be displayed when the QuestionnaireModalToggleButton is clicked
+  await page.getByTestId('grw-proactive-questionnaire-modal-toggle-btn').click();
+  await expect(page.getByTestId('grw-proactive-questionnaire-modal')).toBeVisible();
+});
+
+test('Access User information', async({ page }) => {
+  await page.goto('/me');
+
+  // Click BasicInfoSettingUpdateButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+
+  // Expect a success toaster to be displayed when the BasicInfoSettingUpdateButton is pressed
+  await page.getByTestId('grw-besic-info-settings-update-button').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+});
+
+test('Access External account', async({ page }) => {
+  await page.goto('/me');
+
+  // Click ExternalAccountsTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('external-accounts-tab-button').first().click();
+
+  // Expect an error toaster to be displayed when the AddExternalAccountsButton is pressed
+  await page.getByTestId('grw-external-account-add-button').click();
+  await expect(page.getByTestId('grw-associate-modal')).toBeVisible();
+  await page.getByTestId('add-external-account-button').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+  await page.locator('.Toastify__close-button').click();
+  await expect(page.locator('.Toastify__toast')).not.toBeVisible();
+});
+
+test('Access Password setting', async({ page }) => {
+  await page.goto('/me');
+
+  // Click PasswordSettingTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('password-settings-tab-button').first().click();
+
+  // Expect three error toasters to be displayed when the PasswordUpdateButton is pressed
+  await page.getByTestId('grw-password-settings-update-button').click();
+  const toastElements = page.locator('.Toastify__toast');
+
+  const toastElementsCount = await toastElements.count();
+  for (let i = 0; i < toastElementsCount; i++) {
+    // eslint-disable-next-line no-await-in-loop
+    await toastElements.nth(i).click();
+  }
+
+  await expect(page.getByTestId('.Toastify__toast')).not.toBeVisible();
+});
+
+
+test('Access API setting', async({ page }) => {
+  await page.goto('/me');
+
+  // Click ApiSettingTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('api-settings-tab-button').first().click();
+
+  // Expect a success toaster to be displayed when the UpdateApiTokenButton is clicked
+  await page.getByTestId('grw-api-settings-update-button').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+});
+
+test('Access In-App Notification setting', async({ page }) => {
+  await page.goto('/me');
+
+  // Click InAppNotificationSettingTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('in-app-notification-settings-tab-button').first().click();
+
+  // Expect a success toaster to be displayed when the InAppNotificationSettingsUpdateButton is clicked
+  await page.getByTestId('grw-in-app-notification-settings-update-button').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+});
+
+test('Acccess Other setting', async({ page }) => {
+  await page.goto('/me');
+
+  // Click OtherSettingTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('other-settings-tab-button').first().click();
+
+  // Expect a success toaster to be displayed when the QuestionnaireSettingsUpdateButton is clicked
+  await page.getByTestId('grw-questionnaire-settings-update-btn').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+});

apps/app/src/components/Me/AssociateModal.tsx

@@ -112,7 +112,7 @@ const AssociateModal = (props: Props): JSX.Element => {
         </div>
       </ModalBody>
       <ModalFooter className="border-top-0">
-        <button type="button" className="btn btn-primary mt-3" onClick={clickAddLdapAccountHandler}>
+        <button type="button" className="btn btn-primary mt-3" data-testid="add-external-account-button" onClick={clickAddLdapAccountHandler}>
           <span className="material-symbols-outlined" aria-hidden="true">add_circle</span>
           {t('add')}
         </button>

apps/app/src/components/Me/PersonalSettings.jsx

@@ -20,22 +20,22 @@ const PersonalSettings = () => {
   const navTabMapping = useMemo(() => {
     return {
       user_infomation: {
-        Icon: () => <span className="material-symbols-outlined">person</span>,
+        Icon: () => <span data-testid="user-infomation-tab-button" className="material-symbols-outlined">person</span>,
         Content: UserSettings,
         i18n: t('User Information'),
       },
       external_accounts: {
-        Icon: () => <span className="material-symbols-outlined">ungroup</span>,
+        Icon: () => <span data-testid="external-accounts-tab-button" className="material-symbols-outlined">ungroup</span>,
         Content: ExternalAccountLinkedMe,
         i18n: t('admin:user_management.external_accounts'),
       },
       password_settings: {
-        Icon: () => <span className="material-symbols-outlined">password</span>,
+        Icon: () => <span data-testid="password-settings-tab-button" className="material-symbols-outlined">password</span>,
         Content: PasswordSettings,
         i18n: t('Password Settings'),
       },
       api_settings: {
-        Icon: () => <span className="material-symbols-outlined">api</span>,
+        Icon: () => <span data-testid="api-settings-tab-button" className="material-symbols-outlined">api</span>,
         Content: ApiSettings,
         i18n: t('API Settings'),
       },
@@ -45,12 +45,12 @@ const PersonalSettings = () => {
       //   i18n: t('editor_settings.editor_settings'),
       // },
       in_app_notification_settings: {
-        Icon: () => <span className="material-symbols-outlined">notifications</span>,
+        Icon: () => <span data-testid="in-app-notification-settings-tab-button" className="material-symbols-outlined">notifications</span>,
         Content: InAppNotificationSettings,
         i18n: t('in_app_notification_settings.in_app_notification_settings'),
       },
       other_settings: {
-        Icon: () => <span className="material-symbols-outlined">settings</span>,
+        Icon: () => <span data-testid="other-settings-tab-button" className="material-symbols-outlined">settings</span>,
         Content: OtherSettings,
         i18n: t('Other Settings'),
       },

apps/app/test/cypress/e2e/60-home/60-home--home.cy.ts

@@ -1,161 +0,0 @@
-context('Access Home', () => {
-  const ssPrefix = 'home-';
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-  });
-
-  it('Visit home', () => {
-    cy.visit('/dummy');
-
-    // open PersonalDropdown
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('personal-dropdown-button').should('be.visible').click();
-      // wait until
-      return cy.getByTestid('grw-personal-dropdown-menu-user-home').then($elem => $elem.is(':visible'));
-    });
-    // click the Home button
-    cy.getByTestid('grw-personal-dropdown-menu-user-home').should('be.visible').click();
-
-    cy.getByTestid('grw-users-info').should('be.visible');
-
-    // for check download toc data
-    // https://redmine.weseek.co.jp/issues/111384
-    // cy.get('.toc-link').should('be.visible');
-
-    // same screenshot is taken in access-to-page.spec
-    cy.collapseSidebar(true);
-    cy.waitUntilSkeletonDisappear();
-    cy.screenshot(`${ssPrefix}-visit-home`);
-  });
-
-});
-
-
-context('Access User settings', () => {
-  const ssPrefix = 'access-user-settings-';
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-    cy.visit('/me');
-    cy.collapseSidebar(true, true);
-  });
-
-  it('Access User information', () => {
-    // User information
-    cy.getByTestid('grw-user-settings').should('be.visible');
-    cy.screenshot(`${ssPrefix}-user-information-1`);
-    cy.getByTestid('grw-besic-info-settings-update-button').click();
-    cy.get('.Toastify__toast').should('be.visible');
-    cy.screenshot(`${ssPrefix}-user-information-2`);
-
-    cy.get('.Toastify__toast').should('be.visible').within(() => {
-      cy.get('.Toastify__close-button').should('be.visible').click();
-      cy.get('.Toastify__progress-bar').invoke('attr', 'style', 'display: none')
-    });
-  });
-
-  it('Access External account', () => {
-    cy.getByTestid('grw-personal-settings').find('.nav-title.nav li:eq(1) a').click();
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.screenshot(`${ssPrefix}-external-account-1`);
-    cy.getByTestid('grw-external-account-add-button').click();
-    cy.getByTestid('grw-associate-modal').should('be.visible');
-    cy.screenshot(`${ssPrefix}-external-account-2`);
-    cy.getByTestid('grw-associate-modal').find('.modal-footer button').click(); // click add button in modal form
-    cy.get('.Toastify__toast').should('be.visible');
-    cy.screenshot(`${ssPrefix}-external-account-3`);
-    cy.get('.Toastify__toast').should('be.visible').within(() => {
-      cy.get('.Toastify__close-button').should('be.visible').click();
-      cy.get('.Toastify__progress-bar').invoke('attr', 'style', 'display: none')
-    });
-    cy.getByTestid('grw-associate-modal').find('[aria-label="Close"]').click();
-    cy.screenshot(`${ssPrefix}-external-account-4`);
-
-      cy.get('.Toastify__toast').should('not.be.visible');
-    });
-
-  it('Access Password setting', () => {
-    cy.getByTestid('grw-personal-settings').find('.nav-title.nav li:eq(2) a').click();
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.screenshot(`${ssPrefix}-password-settings-1`);
-    cy.getByTestid('grw-password-settings-update-button').click();
-    cy.get('.Toastify__toast').should('be.visible');
-    cy.screenshot(`${ssPrefix}-password-settings-2`);
-
-    cy.get('.Toastify__toast').each((toast) => {
-      cy.wrap(toast).within(() => {
-        cy.get('.Toastify__close-button').should('be.visible').click();
-        cy.get('.Toastify__progress-bar').invoke('attr', 'style', 'display: none')
-      });
-    });
-  });
-
-  it('Access API setting', () => {
-    cy.getByTestid('grw-personal-settings').find('.nav-title.nav li:eq(3) a').click();
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.screenshot(`${ssPrefix}-api-setting-1`);
-    cy.getByTestid('grw-api-settings-update-button').click();
-    cy.getByTestid('grw-api-settings-input').should('be.visible');
-    cy.get('.Toastify__toast').should('be.visible');
-    cy.screenshot(`${ssPrefix}-api-setting-2`);
-
-    cy.get('.Toastify__toast').should('be.visible').within(() => {
-      cy.get('.Toastify__close-button').should('be.visible').click();
-      cy.get('.Toastify__progress-bar').invoke('attr', 'style', 'display: none')
-    });
-  });
-
-  it('Access In-app notification setting', () => {
-    cy.getByTestid('grw-personal-settings').find('.nav-title.nav li:eq(4) a').click();
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.screenshot(`${ssPrefix}-in-app-notification-setting-1`);
-    cy.getByTestid('grw-in-app-notification-settings-update-button').click();
-    cy.get('.Toastify__toast').should('be.visible');
-    cy.screenshot(`${ssPrefix}-in-app-notification-setting-2`);
-  });
-
-  it('Access Other setting', () => {
-    cy.getByTestid('grw-personal-settings').find('.nav-title.nav li:eq(5) a').click();
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.screenshot(`${ssPrefix}-other-setting-1`);
-    cy.getByTestid('grw-questionnaire-settings-update-btn').click();
-    cy.get('.Toastify__toast').should('be.visible').invoke('attr', 'style', 'display: none');
-    cy.screenshot(`${ssPrefix}-other-setting-2`);
-  });
-});
-
-context('Access proactive questionnaire modal', () => {
-  const ssPrefix = 'proactive-questionnaire-modal-';
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-  });
-
-  it('Opens questionnaire modal', () => {
-    cy.visit('/dummy');
-
-    // open PersonalDropdown
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('personal-dropdown-button').should('be.visible').click();
-      // wait until
-      return cy.getByTestid('grw-personal-dropdown-menu-user-home').then($elem => $elem.is(':visible'));
-    });
-
-    cy.getByTestid('grw-proactive-questionnaire-modal-toggle-btn').should('be.visible').click();
-    cy.getByTestid('grw-proactive-questionnaire-modal').should('be.visible');
-
-    cy.screenshot(`${ssPrefix}-opened`);
-  });
-});