apply prettier and change DataPage to DataStoragePage

.prettierignore

@@ -2,5 +2,6 @@
 src/lib/
 !/src
 !/react
+!/cypress
 **/__generated__/*.graphql.ts
 *.graphql

cypress/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "importOrderSeparation": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "trailingComma": "all",
+  "singleAttributePerLine": false
+}

cypress/commands/DataStoragePage.cy.ts

@@ -0,0 +1,50 @@
+import { findShadowRoot } from '../helper/FindShadowRoot.cy';
+
+Cypress.Commands.add('createVfolder', (vfolderName: string) => {
+  findShadowRoot('backend-ai-webui').find('#data').click();
+  cy.wait(400);
+  const createDialogOpenButton = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view',
+  ).find('#add-folder');
+  const vfolderNameInput = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > #add-folder-name',
+  ).find('input');
+  const createButton = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view',
+  ).find('#add-button');
+  createDialogOpenButton.click();
+  vfolderNameInput.type(vfolderName);
+  createButton.click();
+  cy.wait(5000);
+  findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > backend-ai-storage-list',
+  )
+    .find(`#controls[folder-name=${vfolderName}]`)
+    .should('exist');
+});
+
+Cypress.Commands.add('deleteVfolder', (vfolderName: string) => {
+  findShadowRoot('backend-ai-webui').find('#data').click();
+  cy.wait(400);
+  const deleteDialogOpenButton = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > backend-ai-storage-list',
+  )
+    .find(`#controls[folder-name=${vfolderName}]`)
+    .find('mwc-icon-button[icon="delete"]');
+  const deleteVfolderNameInput = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > backend-ai-storage-list > #delete-folder-name',
+  ).find('input');
+  const deleteButton = findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > backend-ai-storage-list',
+  ).find('#delete-button');
+  deleteDialogOpenButton.click();
+  deleteVfolderNameInput.type(vfolderName);
+  deleteButton.click();
+  findShadowRoot(
+    'backend-ai-webui > backend-ai-data-view > backend-ai-storage-list',
+  )
+    .find(
+      `lablup-shields[folder-name=${vfolderName}][description="deleted-complete"]`,
+    )
+    .should('exist');
+});

cypress/commands/LoginPage.cy.ts

@@ -1,12 +1,23 @@
-import {findShadowRoot} from '../helper/FindShadowRoot.cy';
+import { findShadowRoot } from '../helper/FindShadowRoot.cy';
 
-Cypress.Commands.add('login', (email: string, password: string, endpoint: string) => {
-  const emailInput = findShadowRoot('backend-ai-webui > backend-ai-login > #id_user_id').find('input');
-  const passwordInput = findShadowRoot('backend-ai-webui > backend-ai-login > #id_password').find('input');
-  const endpointInput = findShadowRoot('backend-ai-webui > backend-ai-login > #id_api_endpoint').find('input');
-  const loginButton = findShadowRoot('backend-ai-webui > backend-ai-login > #login-button').find('button');
-  emailInput.type(email);
-  passwordInput.type(password);
-  endpointInput.clear().type(endpoint);
-  loginButton.click();
-});
+Cypress.Commands.add(
+  'login',
+  (email: string, password: string, endpoint: string) => {
+    const emailInput = findShadowRoot(
+      'backend-ai-webui > backend-ai-login > #id_user_id',
+    ).find('input');
+    const passwordInput = findShadowRoot(
+      'backend-ai-webui > backend-ai-login > #id_password',
+    ).find('input');
+    const endpointInput = findShadowRoot(
+      'backend-ai-webui > backend-ai-login > #id_api_endpoint',
+    ).find('input');
+    const loginButton = findShadowRoot(
+      'backend-ai-webui > backend-ai-login > #login-button',
+    ).find('button');
+    emailInput.type(email);
+    passwordInput.type(password);
+    endpointInput.clear().type(endpoint);
+    loginButton.click();
+  },
+);

cypress/commands/UserDropdown.cy.ts

@@ -1,23 +1,61 @@
-import {findShadowRoot} from '../helper/FindShadowRoot.cy';
+import { findShadowRoot } from '../helper/FindShadowRoot.cy';
 
-Cypress.Commands.add('userProfileChange', (userName, originalPassword, newPassword) => {
-  findShadowRoot("backend-ai-webui").find("backend-ai-react-user-dropdown-menu").trigger("click").then(() =>{
-    findShadowRoot("backend-ai-webui > backend-ai-react-user-dropdown-menu").find("li:contains(사용자 정보 변경)").click();
-  });
-  findShadowRoot("backend-ai-webui > backend-ai-react-user-profile-setting-dialog")
-    .find("#full_name").clear().focus().type(userName);
-  findShadowRoot("backend-ai-webui > backend-ai-react-user-profile-setting-dialog")
-    .find("#originalPassword").focus().type(originalPassword);
-  findShadowRoot("backend-ai-webui > backend-ai-react-user-profile-setting-dialog")
-    .find("#newPassword").focus().type(newPassword);
-  findShadowRoot("backend-ai-webui > backend-ai-react-user-profile-setting-dialog")
-    .find("#newPasswordConfirm").focus().type(newPassword);
-  findShadowRoot("backend-ai-webui > backend-ai-react-user-profile-setting-dialog")
-    .find("button:contains(변경)").click();
-});
+Cypress.Commands.add(
+  'userProfileChange',
+  (userName, originalPassword, newPassword) => {
+    findShadowRoot('backend-ai-webui')
+      .find('backend-ai-react-user-dropdown-menu')
+      .trigger('click')
+      .then(() => {
+        findShadowRoot('backend-ai-webui > backend-ai-react-user-dropdown-menu')
+          .find('li:contains(사용자 정보 변경)')
+          .click();
+      });
+    findShadowRoot(
+      'backend-ai-webui > backend-ai-react-user-profile-setting-dialog',
+    )
+      .find('#full_name')
+      .clear()
+      .focus()
+      .type(userName);
+    findShadowRoot(
+      'backend-ai-webui > backend-ai-react-user-profile-setting-dialog',
+    )
+      .find('#originalPassword')
+      .focus()
+      .type(originalPassword);
+    findShadowRoot(
+      'backend-ai-webui > backend-ai-react-user-profile-setting-dialog',
+    )
+      .find('#newPassword')
+      .focus()
+      .type(newPassword);
+    findShadowRoot(
+      'backend-ai-webui > backend-ai-react-user-profile-setting-dialog',
+    )
+      .find('#newPasswordConfirm')
+      .focus()
+      .type(newPassword);
+    findShadowRoot(
+      'backend-ai-webui > backend-ai-react-user-profile-setting-dialog',
+    )
+      .find('button:contains(변경)')
+      .click();
+  },
+);
 
 Cypress.Commands.add('logout', () => {
-  findShadowRoot("backend-ai-webui").find("backend-ai-react-user-dropdown-menu").trigger("click").then(() =>{
-    findShadowRoot("backend-ai-webui > backend-ai-react-user-dropdown-menu").find("li:contains(로그아웃)").click();
-  });
-})
+  findShadowRoot('backend-ai-webui')
+    .find('backend-ai-react-user-dropdown-menu')
+    .trigger('click')
+    .then(() => {
+      findShadowRoot('backend-ai-webui > backend-ai-react-user-dropdown-menu')
+        .find('li:contains(로그아웃)')
+        .click();
+    });
+});
+
+const a = {
+  adajndakdnsxanalcnajkcnjkacasaajda: 100,
+  asdasnbdaskdnajdjkad: 213313,
+};

cypress/e2e/e2eTest.cy.ts

@@ -4,7 +4,7 @@ import '../commands/DataPage.cy';
 
 describe('Initial cypress E2E test', () => {
   beforeEach(() => {
-    cy.viewport(1280,800);
+    cy.viewport(1280, 800);
     cy.visit('http://localhost:9081'); //방문할 페이지
   });
 
@@ -14,4 +14,4 @@ describe('Initial cypress E2E test', () => {
     cy.createVfolder('test-e2eTest');
     cy.deleteVfolder('test-e2eTest');
   });
-});
+});