Skip to content

Commit

Permalink
vue3
Browse files Browse the repository at this point in the history
  • Loading branch information
harm-meijer committed Mar 25, 2022
1 parent 8919e8e commit 637a5b4
Show file tree
Hide file tree
Showing 691 changed files with 13,209 additions and 130,940 deletions.
12 changes: 6 additions & 6 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ jobs:
build:
docker:
# the Docker image with Cypress dependencies
- image: cypress/base:12
- image: cypress/base:16.14.0
environment:
JEST_JUNIT_OUTPUT: test-results/unit/output.xml

Expand All @@ -28,16 +28,16 @@ jobs:
command: yarn -v && node -v
- run:
name: Install dependencies
command: yarn install --immutable
command: yarn install --frozen-lockfile
- save_cache:
name: Save Yarn Package Cache
key: yarn-packages-{{ checksum "yarn.lock" }}
paths:
- ~/.cache/yarn

- run:
name: Run Unit tests
command: yarn test:unit --ci --reporters=default --reporters=jest-junit --no-cache
# - run:
# name: Run Unit tests
# command: yarn test:unit --ci --reporters=default --reporters=jest-junit --no-cache
# cannot use reporter after update:
# https://github.com/cypress-io/cypress/issues/4304
- run:
Expand All @@ -52,4 +52,4 @@ jobs:
path: tests/e2e/screenshots

- store_test_results:
path: test-results
path: test-results
2 changes: 0 additions & 2 deletions .eslintignore

This file was deleted.

104 changes: 0 additions & 104 deletions .eslintrc.js

This file was deleted.

24 changes: 4 additions & 20 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,22 @@
node_modules
/dist

/tests/e2e/videos/
/tests/e2e/screenshots/
/test-results/
selenium-debug.log

# local env files
.env
.env.local
.env.local.*
.env.*.local
cypress.env.json

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
_vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

/sunrise.iml
/graphql.config.json
/.graphqlconfig.yml

# terraform files
.terraform.lock.hcl
terraform.tfstate
terraform.tfstate.*
terraform.tfvars
Deploy/.terraform
*.sw?
3 changes: 0 additions & 3 deletions .lintgql.js

This file was deleted.

7 changes: 7 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: true,
singleQuote: true,
printWidth: 60,
};
83 changes: 24 additions & 59 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,24 @@
# SUNRISE as a Single-Page Application

[![CircleCI](https://circleci.com/gh/commercetools/sunrise-spa.svg?style=svg)](https://circleci.com/gh/commercetools/sunrise-spa)

## Demo
https://demo.commercetools.com

## Run it locally

Steps | with [Yarn](https://yarnpkg.com/) | with [NPM](https://www.npmjs.com/) |
------- | ---------------------------------- | ---------------------------------- |
Install | `yarn install` | `npm install` |
Run | `yarn serve` | `npm run serve` |


## How to use your own project data
SUNRISE SPA comes with some read-only data set by default that you can use. But if you need to use a different set of data or to manage the project via [Merchant Center](https://mc.commercetools.com/), then you'll need to connect SUNRISE SPA to your own commercetools project.

Once you have created your commercetools project and populated it with data, follow the next steps to connect to it.

### 1. Create an API client for a SPA
In the [Merchant Center](https://mc.commercetools.com/), select your project and go to the [New API Client](https://mc.commercetools.com/sunrise-spa-ci/settings/developer/api-clients/now) section (`Settings` > `Developer Settings` > `API Clients` > `Create New API Client`). Enter a descriptive name for your new API client and select the template `Mobile & single-page application client`. Once you have filled the form, submit it by clicking on `Create API Client`, you should now be able to see your project credentials. Don't close the window yet!

> **:warning: Always use an API client suited for single-page applications (SPA), as your credentials will be publicly accessible through the browser.**
### 2. Configure SUNRISE with your API client
Below the credentials, you should see a dropdown with different technologies: select `Sunrise SPA` and click on the download button. This will download a file named `.env.local` with your credentials, which you should place in the root folder of your SUNRISE SPA project.

> **:warning: Make sure the downloaded file is called exactly `.env.local`, as browsers may remove the initial dot and apply further modifications to the filename.**
This will set up the necessary environment variables required to run SUNRISE SPA.

## Development tips

### Add any queried fields to the mutation
When executing a mutation (e.g. to update the active cart), we receive as a response the updated resource, which Apollo then uses to update the cached data in Apollo store. It is thanks to this cache that all components are able to display the same information, even after mutations.

But when we under-fetch in the mutation and fail to update some cached fields we are displaying in a component, this component will not be updated at all with any new data. To avoid that, make sure to add any field you are querying in the mutation. The update mutations are found in the methods `updateMyCart` and `updateMyCustomer`.

Related issue: https://github.com/apollographql/apollo-client/issues/3267


## Run tests
The project has unit and end-to-end tests covering each functionality. Unit tests will run out of the box, but end-to-end tests require some further configuration, explained in the section below.

Test | with [Yarn](https://yarnpkg.com/) | with [NPM](https://www.npmjs.com/) |
------- | ---------------------------------- | ---------------------------------- |
Unit | `yarn test:unit` | `npm run test:unit` |
End-to-end | `yarn test:e2e` | `npm run test:e2e` |

### Configure end-to-end tests
In order to continue, it is necessary that you have full control over the commercetools project associated with SUNRISE.

Follow the same steps explained in the section [How to use your own project data](#how-to-use-your-own-project-data) to create a second API client, but this time create it with the `Admin client` template instead. Then add your new client ID and secret as the following environment variables (e.g. in `.env.local` file):

```shell
CYPRESS_CT_CLIENT_ID=<your client ID>
CYPRESS_CT_CLIENT_SECRET=<your client secret>
```
felipe will make home page style
felipe footer style

see what is shared:
CartDetail.js
CartLikeContentDetail/LineItemInfo/LineItemQuantityForm/Remove/Remove.js
CartLikeContentDetail/LineItemInfo/LineItemQuantityForm/LineItemQuantityForm.js
CartLikeContentDetail/LineItemInfo/LineItemInfo.js
CartLikeContentDetail/CartLikeContentDetail.js
AddDiscountCodeForm/AddDiscountCodeForm.js
CartLikePriceDetail/DiscountCodes/RemoveDiscountCodeForm/RemoveDiscountCodeForm.js
CartLikePriceDetail/DiscountCodes/DiscountCodes.js
CartLikePriceDetail/CartLikePriceDetail.js
./Cart.js
./src/containers/views/Shop/Root/Product/PageProductDetail/PageProductDetail.js
./src/containers/views/Shop/Root/Product/PageProductDetail/ProductInfo/DetailsSection/DetailsSection.js
./src/containers/views/Shop/Root/Product/PageProductDetail/ProductInfo/ProductInfo.js
./src/containers/views/Shop/Root/Product/PageProductDetail/ProductInfo/ProductGallery/ProductGallery.js
./src/containers/views/Shop/Root/Product/PageProductDetail/ProductInfo/AddToCartForm/AddToCartForm.js
./src/containers/views/Shop/Root/Product/Product.js

harm minicart
harm product needs variant selector and wishlist DetailsSection logic up
harm
7 changes: 3 additions & 4 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
module.exports = {
presets: [
'@vue/app',
],
plugins: ['@babel/plugin-proposal-optional-chaining'],
};
'@vue/cli-plugin-babel/preset'
]
}
Loading

0 comments on commit 637a5b4

Please sign in to comment.