swapped css class with id for acceptance tests

web/src/__tests__/__acceptance__/ac05.ts

@@ -18,13 +18,13 @@ test('AC05: View card detail', async () => {
   await openDetail(names[0]);
 
   // card section exist
-  expect(await $('[class^=\'detailSection\']').exists()).toBe(true);
+  expect(await $('#detailSection').exists()).toBe(true);
   expect(await text(names[0], toRightOf('name')).exists()).toBe(true);
 
   // Step: Select any other card in the list
   await openDetail(names[1]);
 
   // replace the panel shown
-  expect(await $('[class^=\'detailSection\']').exists()).toBe(true);
+  expect(await $('#detailSection').exists()).toBe(true);
   expect(await text(names[1], toRightOf('name')).exists()).toBe(true);
 });

web/src/__tests__/__acceptance__/ac06.ts

@@ -16,7 +16,7 @@ test('AC06: Successful creation of card', async () => {
   });
 
   // cardDetail section does not exist.
-  expect(await $('[class^=\'detailSection\']').exists()).toBe(false);
+  expect(await $('#detailSection').exists()).toBe(false);
   // card exist in home page
   expect(await text(name).exists()).toBe(true);
   // card exist in database

web/src/__tests__/__acceptance__/ac07.ts

@@ -25,7 +25,7 @@ test('AC07: Successful editing of card details', async () => {
   await write(jobTitle, textBox(toRightOf('job title')));
 
   // Step: User removes the image of the card
-  await click($('[class^=\'deleteImg\']'));
+  await click($('#deleteImg'));
   await click('Yes, Delete');
 
   // Step: User clicks the save button
@@ -35,14 +35,14 @@ test('AC07: Successful editing of card details', async () => {
   expect(await $('#saveButton').exists()).toBe(false);
   expect(await $('#editButton').exists()).toBe(true);
   // image no longer exist
-  expect(await $('[class^=\'noImageDiv\']').exists()).toBe(true);
+  expect(await text('no image').exists()).toBe(true);
   // fields are updated
   expect(await text(phone).exists()).toBe(true);
   expect(await text(jobTitle).exists()).toBe(true);
   // card updated in database
   await reload();
   await openDetail(name);
-  expect(await $('[class^=\'noImageDiv\']').exists()).toBe(true);
+  expect(await text('no image').exists()).toBe(true);
   expect(await text(phone).exists()).toBe(true);
   expect(await text(jobTitle).exists()).toBe(true);
 });

web/src/__tests__/__acceptance__/ac08.ts

@@ -27,7 +27,7 @@ test('AC08: Cancel new card details', async () => {
   await write(randomString(), textBox(toRightOf('job title')));
 
   // Step: User removes the image of the card
-  await click($('[class^=\'deleteImg\']'));
+  await click($('#deleteImg'));
   await click('Yes, Delete');
 
   // Step: User clicks the save button
@@ -37,14 +37,14 @@ test('AC08: Cancel new card details', async () => {
   expect(await $('#saveButton').exists()).toBe(false);
   expect(await $('#editButton').exists()).toBe(true);
   // image still exist
-  expect(await $('[class^=\'noImageDiv\']').exists()).toBe(false);
+  expect(await text('no image').exists()).toBe(false);
   // fields are not updated
   expect(await text(phone).exists()).toBe(true);
   expect(await text(jobTitle).exists()).toBe(true);
   // database is not called
   await reload();
   await openDetail(name);
-  expect(await $('[class^=\'noImageDiv\']').exists()).toBe(false);
+  expect(await text('no image').exists()).toBe(false);
   expect(await text(phone).exists()).toBe(true);
   expect(await text(jobTitle).exists()).toBe(true);
 });

web/src/__tests__/__acceptance__/ac09.ts

@@ -22,7 +22,7 @@ test('AC09: Successful deletion of card', async () => {
   await click('Yes, Delete');
 
   // cardDetail section does not exist.
-  expect(await $('[class^=\'detailSection\']').exists()).toBe(false);
+  expect(await $('detailSection').exists()).toBe(false);
   // card does not exist in home page
   expect(await text(name).exists()).toBe(false);
   // card does not exist in database

web/src/__tests__/__acceptance__/ac10-11.ts

@@ -30,15 +30,15 @@ test('AC10, 11: Keyword search with and without matches', async () => {
   await write(keyword.substring(8, 24), textBox(toRightOf('PORKBELLY')));
 
   // card list shown is filtered to show only cards that contain those words entered.
-  expect((await $('[class*=\'cardContent\']').elements()).length).toBe(len);
+  expect((await $('#cardContent').elements()).length).toBe(len);
 
   // User enters keywords not present on any card in the card list into the search bar
   await write(randomString(), textBox(toRightOf('PORKBELLY')));
 
   // The card list is filtered, no cards are shown.
-  expect((await $('[class*=\'cardContent\']').elements()).length).toBe(0);
+  expect((await $('#cardContent').elements()).length).toBe(0);
 
   // card list returns to original state when search bar is cleared
   await clear();
-  expect((await $('[class*=\'cardContent\']').elements()).length).toBe(len * 2);
+  expect((await $('#cardContent').elements()).length).toBe(len * 2);
 });

web/src/components/Card.tsx

@@ -143,7 +143,7 @@ export const Card: React.VoidFunctionComponent<ICardProps> = ({ card, selected }
 
   return (
     <div className={root} ref={ref}>
-      <Stack className={cardContent}>
+      <Stack className={cardContent} id='cardContent'>
         <div className={imageContainer}>
           {image != null && (
             <Image

web/src/components/cardDetails/CardImageField.tsx

@@ -187,6 +187,7 @@ export const CardImageField: React.VoidFunctionComponent<ICardImageFieldProps> =
               <theme.icon.folderOpen size={28} />
             </label>
             <button
+              id='deleteImg'
               type='button'
               className={deleteImg}
               onClick={toggleHideDialog}

web/src/views/Home.tsx

@@ -341,7 +341,7 @@ export const Home: React.VoidFunctionComponent<IHomeProps> = ({ detail }) => {
         </div>
         {detail != null
           && (
-            <div className={detailSection}>
+            <div className={detailSection} id='detailSection'>
               <CardDetails key={detail.id} card={detail} editing={detail.id === undefined} />
             </div>
           )}