Merge pull request #8950 from weseek/support/148794-replace-tests-with-playwright

support: Rreplace tests with Playwright (23-editor/23-editor--template-modal.cy.ts)

apps/app/playwright/23-editor/template-modal.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+
+test('Successfully select template and template locale', async({ page }) => {
+  const jaText = '今日の目標';
+  const enText = "TODAY'S GOALS";
+  await page.goto('/Sandbox/TemplateModal');
+
+  // move to edit mode
+  await page.getByTestId('editor-button').click();
+  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+
+  // open TemplateModal
+  const templateModal = page.getByTestId('template-modal');
+  await page.getByTestId('open-template-button').click();
+  await expect(templateModal).toBeVisible();
+
+  // select template and template locale
+  await templateModal.locator('.list-group-item').nth(0).click();
+  await expect(templateModal.locator('.card-body').locator('.has-data-line').nth(1)).toHaveText(enText);
+  await templateModal.getByTestId('select-locale-dropdown-toggle').click();
+  await templateModal.getByTestId('select-locale-dropdown-item').nth(1).click();
+  await expect(templateModal.locator('.card-body').locator('.has-data-line').nth(1)).toHaveText(jaText);
+
+  // insert
+  await templateModal.locator('.btn-primary').click();
+  await expect(page.locator('.has-data-line').nth(1)).toHaveText(jaText);
+});

apps/app/src/client/components/TemplateModal/TemplateModal.tsx

@@ -247,13 +247,21 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
               </div>
               <div className="col-6 d-flex justify-content-end">
                 <UncontrolledDropdown>
-                  <DropdownToggle caret type="button" outline className="float-end" disabled={selectedTemplateSummary == null}>
+                  <DropdownToggle
+                    caret
+                    type="button"
+                    outline
+                    className="float-end"
+                    disabled={selectedTemplateSummary == null}
+                    data-testid="select-locale-dropdown-toggle"
+                  >
                     <span className="float-start">{selectedTemplateLocale != null ? selectedTemplateLocale : t('Language')}</span>
                   </DropdownToggle>
                   <DropdownMenu className="dropdown-menu" role="menu">
                     { selectedTemplateLocales != null && Array.from(selectedTemplateLocales).map((locale) => {
                       return (
                         <DropdownItem
+                          data-testid="select-locale-dropdown-item"
                           key={locale}
                           onClick={() => setSelectedTemplateLocale(locale)}
                         >

apps/app/test/cypress/e2e/23-editor/23-editor--template-modal.cy.ts

@@ -1,67 +0,0 @@
-context('TemplateModal', () => {
-
-  const ssPrefix = 'template-modal-';
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-  });
-
-  it("TemplateModal is shown and closed successfully", () => {
-    cy.visit('/Sandbox/TemplateModal');
-    cy.collapseSidebar(true, true);
-
-    // move to edit mode
-    cy.get('#grw-page-editor-mode-manager').as('pageEditorModeManager').should('be.visible');
-    cy.getByTestid('editor-button').click();
-    cy.getByTestid('grw-editor-navbar-bottom').should('be.visible');
-
-    // open TemplateModal
-    cy.getByTestid('open-template-button').click();
-    cy.getByTestid('template-modal').should('be.visible');
-    cy.screenshot(`${ssPrefix}opened`);
-
-    // close TemplateModal
-    cy.getByTestid('template-modal').should('be.visible').within(() => {
-      cy.get('.btn-close').click();
-    });
-    cy.screenshot(`${ssPrefix}close`);
-  });
-
-  it("Successfully select template and template locale", () => {
-    cy.visit('/Sandbox/TemplateModal');
-    cy.collapseSidebar(true, true);
-
-    // move to edit mode
-    cy.get('#grw-page-editor-mode-manager').as('pageEditorModeManager').should('be.visible');
-    cy.getByTestid('editor-button').click();
-    cy.getByTestid('grw-editor-navbar-bottom').should('be.visible');
-
-    // open TemplateModal
-    cy.getByTestid('open-template-button').click();
-    cy.getByTestid('template-modal').should('be.visible');
-
-    // select template and template locale
-    cy.getByTestid('template-modal').should('be.visible').within(() => {
-      // select first template
-      cy.get('.list-group > .list-group-item:nth-child(1)').click();
-      // check preview exist
-      cy.get('.card-body').should('be.visible');
-      cy.screenshot(`${ssPrefix}select-template`);
-
-      // change template locale
-      cy.get('.modal-body > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > .dropdown > button').click();
-      cy.get('.modal-body > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > .dropdown > div > button:nth-child(2)').click();
-      cy.screenshot(`${ssPrefix}select-template-locale`);
-
-      // click insert button
-      cy.get('.modal-footer > button:nth-child(2)').click();
-    });
-
-    // check show template on markdown
-    cy.screenshot(`${ssPrefix}insert-template`);
-  });
-
-});